4.控件与布局

控件与布局

常用控件分类

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

内容模型

WPF的UI元素类型

名称	注释
ContentControl	单一内容控件
HeaderedContentControl	带标题的单一内容控件
ItemsControl	以条目集合为内容的控件
HedderedItemsControl	带标题的条目集合内容控件
Decorator	控件装饰元素
Panel	面板类元素
Adorner	文字点缀元素
Flow Text	流式文本元素
TextBox	文本输入
TextBlock	静态文字
Shape	图形

ContentControl

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

包含控件：

Button	ButtonBase	CheckBox	ComboBoxItem	ContentControl
GroupItem	Label	ListBoxItem	ListViewItem	NavigationWindow
RepeatButton	ScrollViewer	StatusBarItem	ToggleButton	ToolTip
UserControl	Window

HeaderedContentControl

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

包含控件：

Expander	GroupBox	HeaderedContentControl	TabItem

ItemsControl

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

Menu	MenuBase	ContextMenu	ComboBox	ItemsControl	ListBox
ListView	TabControl	TreeView	Selector	StatusBar

该类控件会自动使用相应的条目容器对提交给它的内容进行包装，合法的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

  MenuItem	TreeViewItem	ToolBar

Decorator

在UI上起装饰效果

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

ButtonChrome	ClassicBorderDecorator	ListBoxChrome	SystemDropShadowChrome	Border
InkPresenter	BulletDecorator	Viewbox	AdornerDecorator

TextBlock和TextBox

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

Shape

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

Panel

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

包括控件：

Canvas	DockPanel	Grid	TabPenel	ToolBarOVerFlowPanel	StackPanel
ToolBarPanel	UniformGrid	VirtualizingPanel	VirtualizingStackPanel	WrapPanel

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());

长度单位

英文名称	中文名称	简写	换算
Pixel	像素	px	图形基本单位
Inch	英寸	in	1in=96px
Centimeter	厘米	cm	1cm=(96/2.54)px
Point	点	pt	1pt=(96/72)px

值类型：

• 绝对值：如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个属性

属性名称	数据类型	可取值	描述
Orientation	Orientation枚举	Horizongtal、Vertial	横向排列还是纵向排列
HorizontalAlignment	HorizontalAlignment枚举	Left、Center、Right、Stretch	内部元素水平方向上的对齐方式
VerticalAlignment	VerticalAlignment枚举	Top、Center、Bottom、Stretch	内部元素竖直方向上的对齐方式

Canvas

类似于Winform

使用场景：

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

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

DockPanel

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

WrapPanel

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