常用控件分类

• 布局控件：可容纳多个控件或者嵌套其他布局控件，用于在UI上组织和排列控件，如Grid、StaticPanel、DockPanel，共同的父类是Panel。
• 内容控件：只能容纳一个控件或者布局控件作为内容。如Window、Button，共同的父类是ContentControl。
• 带标题的内容控件：类似于一个内容控件，只不过可以加一个标题。如GroupBox，共同的父类是HeaderedContentControl。
• 条目控件：可以显示一列数据，如ListBox，共同的基类是ItemsControl。
• 带标题的条目控件：类似于条目控件加上一个标题，如TreeViewItem，共同的父类是HeaderedItemControl。
• 特殊内容控件：如TextBox容纳字符串、Image容纳图片。

内容模型

WPF的UI元素类型

ContentControl

• 基类为ContentControl
• 内容属性为Content
• 只能填充单一元素

包含控件：

HeaderedContentControl

• 派生自HeaderedContentControl类，HeaderedContentControl是ContentControl的子类
• 内容属性为Content和Header
• 无论是Content还是Header都只能容纳一个元素

包含控件：

ItemsControl

• 派生自ItemsControl
• 内容属性为Items和ItemsSource
• 每种ItemsControl都有自己的条目容器（Item Container）

该类控件会自动使用相应的条目容器对提交给它的内容进行包装，合法的ItemsControl内容一定是集合，这个集合不会直接个给ItemsControl使用，而是先使用条目容器进行包装，这样的好处是允许程序员向ItemsControl提交各种类型的数据集合。

public class Person {
    public int Id { set; get; }
    public string Name { set; get; }
}
 List<Person> people = new List<Person>()
 {
     new Person(){Id=1,Name="a"},
     new Person(){Id=2,Name="b"},
     new Person(){Id=3,Name="c"},
     new Person(){Id=4,Name="d"},

 };
 //DisplayMebberPath只能显示字符串，更复杂的数据使用DataTemplate
 this.lst.DisplayMemberPath = "Name";//显示数据的那个属性，listBox会调用这个属性的ToString()方法
 this.lst.SelectedValuePath = "Id";//与SelectedValue属性配合使用，作为value的键
 this.lst.ItemsSource = people;

HeaderedItemsControl

• 内容属性为Items、ItemsSource、Header

Decorator

在UI上起装饰效果

• 派生自Decorator类
• 内容属性为Child
• 只能由单一元素充当内容

TextBlock和TextBox

• TextBlock只能显示静态文本，但可以使用丰富的印刷格式和排版效果，内容属性为Inlines和Text
• TextBox内容属性为Text

Shape

• 派生自Shape类
• 用于绘制2D图形
• 无内容属性
• 可以使用Fill填充，使用Stroke属性设置边线

Panel

• 派生自Panel抽象类
• 主要功能是控制UI布局
• 内容属性为Children
• 内容可以是多个元素

包括控件：

UI布局

• Grid：网格，可以自定义行和列
• StackPanel：栈式面板，可将包含的元素在数值或者水平方向排成一条直线，当移除一个元素时，后面的会自动向前移动
• Canvas：画布，以像素为单位的绝对左边定位，类似于Windows Form
• DockPanel：泊靠式面板，类似于Windows Form中控件的Dock属性
• WrapPanel：自动折行面板

Grid

• 行和列可以使用绝对值、相对比例或者自动调整，并可设置最大最小值
• 内部元素可以设置所在的行和列，及跨行跨列
• 可以设置Children对齐方向

Grid适合场景：

• UI布局大框架
• 大量元素需要排成行列
• UI整体尺寸改变，元素需保持长宽比

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

通过代码

this.grid.ColumnDefinitions.Add(new ColumnDefinition());
this.grid.RowDefinitions.Add(new RowDefinition());

长度单位

值类型：

• 绝对值：如30px。属性为double类型，默认是px（可以不写）

​​<RowDefinition Height="30px"/>​​

• 比例值：double后面加*。把所有的比例数值的和作为分母，每个比例值作为分子然后乘以未被占用的像素数

​​<RowDefinition Height="130*"/>​​

• 自动值：Auto。由控件的高度或者宽度确定

案例：

<!--Margin按照顺时针左、上、右、下-->
<Grid Margin="10" x:Name="grid">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" MinWidth="120"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="80"/>
        <ColumnDefinition Width="4"/>
        <ColumnDefinition Width="80"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="25"/>
        <RowDefinition Height="4"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="4"/>
        <RowDefinition Height="25"/>
    </Grid.RowDefinitions>
    <!--Grid.xxx等是附加属性-->
    <TextBox Text="请选择部门并留言" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center"/>
    <ComboBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4" />
    <TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="Black"/>
    <Button Content="提交" Grid.Column="2" Grid.Row="4"/>
    <Button Content="清除" Grid.Column="4" Grid.Row="4"/>
</Grid>

• 行列从0开始
• 如果把不同元素放在同一Grid单元格内，则后面的会覆盖前面的

StackPanel

内部元素可以横向和纵向紧凑排列，删除一个元素后面的自动移动到前面

适用场景：

• 同类元素需要紧凑排列（如菜单）
• 移除元素可自动补缺

常用的3个属性

Canvas

类似于Winform

使用场景：

• 不会随便改动的布局
• 艺术性较强的布局
• 需要大量横纵左边进行绝对定位的布局
• 依赖于坐标的对话

<Canvas>
    <TextBox Canvas.Left="12" Canvas.Top="20" Width="200"/>
</Canvas>

DockPanel

• 有一个重要属性LastChildFill，默认值为True，即最后一个元素的DockPanel.Dock属性被忽略，填满剩余空间

WrapPanel

内部采用流式布局，使用Orientation属性来控制流延伸的方向，使用HorizontalAlignment和VerticalAlignment两个属性控制内部控件的对齐。