WPF 笔记 二

面板知识

介绍

Canvas
该面板可以设置每个子控件的坐标
WrapPanel
每个子控件按照水平（默认方式）或者竖直的方式满布一行或一列，让后再布置下一行或者下一列。基于最大的项目调整宽度或高度。当你需要水平或者竖直排列子控件且能自动滚动进入下一行（列）时采用他。
StackPanel
与 WrapPanel 很相似，但不会换行，尽量延长自己。但每个项目拉伸占满全宽或全高，而不是基于最大的项目调整宽度或高度
DockPanel
将子控件停靠在顶部、底部、左侧或右侧，最后一个子控件如果不指定，占满剩余空间
Grid
多行多列
以像素的绝对数量、可用空间的百分比或自动方式，其中行或列将根据内容自动调整其大小
UniformGrid
所有网格具有相同大小

Canvas

    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    Canvas>

WrapPanel

    <WrapPanel>
        <Button>Test button 1Button>
        <Button>Test button 2Button>
        <Button>Test button 3Button>
        <Button Height="40">Test button 4Button>
        <Button>Test button 5Button>
        <Button>Test button 6Button>
    WrapPanel>

 StackPanel

垂直堆叠

    <StackPanel>
        <Button>Button 1Button>
        <Button>Button 2Button>
        <Button>Button 3Button>
        <Button>Button 4Button>
        <Button>Button 5Button>
        <Button>Button 6Button>
    StackPanel>

 水平堆叠

只需要加上

 <StackPanel Orientation="Horizontal">

    <StackPanel Orientation="Horizontal">
        <Button VerticalAlignment="Top">Button 1Button>
        <Button VerticalAlignment="Center">Button 2Button>
        <Button VerticalAlignment="Bottom">Button 3Button>
        <Button VerticalAlignment="Bottom">Button 4Button>
        <Button VerticalAlignment="Center">Button 5Button>
        <Button VerticalAlignment="Top">Button 6Button>
    StackPanel>

DockPanel

    <DockPanel>
        <Button DockPanel.Dock="Left">LeftButton>
        <Button DockPanel.Dock="Top">TopButton>
        <Button DockPanel.Dock="Right">RightButton>
        <Button DockPanel.Dock="Bottom">BottomButton>
        <Button>CenterButton>
    DockPanel>

可以为各个控件指定宽高

    <DockPanel>
        <Button DockPanel.Dock="Top" Height="50">TopButton>
        <Button DockPanel.Dock="Bottom" Height="50">BottomButton>
        <Button DockPanel.Dock="Left" Width="50">LeftButton>
        <Button DockPanel.Dock="Right" Width="50">RightButton>    
        <Button>CenterButton>
    DockPanel>

<DockPanel LastChildFill="False">

用此属性关闭最后一个控件铺满剩余空间。

Grid

 引子

    <Grid>
错误用法
        <Button>Button 1Button>
        <Button>Button 2Button>
    Grid>

像这样使用，第二个控件会覆盖第一个。

列划分简单例子

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        Grid.ColumnDefinitions>
        <Button>Button 1Button>
        <Button Grid.Column="1">Button 2Button>
    Grid>

默认的Grid.Column 为0

 在各个列中，不让button铺满，使用对齐

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        Grid.ColumnDefinitions>        
        <Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1Button>
        <Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2Button>
    Grid>

Grid行和列

ColumnDefinition RowDefinition 使用数字*指定比例关系

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="1*" />
            <RowDefinition Height="1*" />
        Grid.RowDefinitions>
        <Button>Button 1Button>
        <Button Grid.Column="1">Button 2Button>
        <Button Grid.Column="2">Button 3Button>
        <Button Grid.Row="1">Button 4Button>
        <Button Grid.Column="1" Grid.Row="1">Button 5Button>
        <Button Grid.Column="2" Grid.Row="1">Button 6Button>
        <Button Grid.Row="2">Button 7Button>
        <Button Grid.Column="1" Grid.Row="2">Button 8Button>
        <Button Grid.Column="2" Grid.Row="2">Button 9Button>
    Grid>

Grid单位

ColumnDefinition RowDefinition除了*，

还有auto 和数字，分别表示占用控件text长度和绝对像素。

 Grid跨越

    <Grid>
        <Grid.ColumnDefinitions>            
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        Grid.RowDefinitions>
        <Button>Button 1Button>
        <Button Grid.Column="1">Button 2Button>
        <Button Grid.Row="1" Grid.ColumnSpan="2">Button 3Button>
    Grid>

指定第二行跨越两列

Grid分割

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="5" />
            <ColumnDefinition Width="*" />
        Grid.ColumnDefinitions>
        <TextBlock FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Left sideTextBlock>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" />
        <TextBlock Grid.Column="2" FontSize="55" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap">Right sideTextBlock>
    Grid>

用户控件

新建WPF用户控件，名称LimitedInput

.xaml文件内容

<UserControl x:Class="WpfControlLibrary1.LimitedInput"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfControlLibrary1"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        Grid.ColumnDefinitions>
        <Label Content="{Binding Title}" />
        <Label Grid.Column="1">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding ElementName=txtLimitedInput, Path=Text.Length}" />
                <TextBlock Text="/" />
                <TextBlock Text="{Binding MaxLength}" />
            StackPanel>
        Label>
        <TextBox MaxLength="{Binding MaxLength}" Grid.Row="1" Grid.ColumnSpan="2" Name="txtLimitedInput" ScrollViewer.VerticalScrollBarVisibility="Auto" TextWrapping="Wrap" />
    Grid>
UserControl>

对应cs文件

namespace WpfControlLibrary1
{
    /// <summary>
    /// UserControl1.xaml 的交互逻辑
    /// summary>
    public partial class LimitedInput : UserControl
    {
        public LimitedInput()
        {
            InitializeComponent();
            this.DataContext = this;
        }
        public string Title { get; set; }
        public int MaxLength { get; set; }
    }
}

使用

从工具栏拖入LimitedInput控件

 或者引用相应dll，

在相应Window的xaml文件中

        xmlns:uc="clr-namespace:WpfControlLibrary1;assembly=WpfControlLibrary1"

    <Grid>

        <uc:LimitedInput Title="Enter Title" MaxLength="100" Margin="40,25,418.6,295"/>

    Grid>