WPF的控制分类和UI布局

WPF的控制分类和UI布局

WPF主要分为三个顶级元素：

1. 窗口（最常用） 窗口属性有:外观类的，位置类，窗口大小

1. 窗口的生命周期和窗口的事件（最常用的是页面加载事件：Loaded）
2. 注意事项：顶级元素只能包含一个子元素

1. 控件

• 布局控件：一般放在顶级元素（Window）的下面

布局控制特点:布局控件可以容纳多个控件/嵌套其他的布局控件

布局控制用途:用在于UI组织和排列的控件；常用控件：Grid（网格标签）,StackPanel（栈式面板）,DockPanel（停靠面板）,这些布局控件都继承着Panel（布局）。

• 内容控件：只能容纳一个控件/布局控件的其他内容（比如：Window，Button....）,因为只能容纳一个控件作为内容，所以经常借助布局控件来规划其内容；它们的父类继承与ContentControl。

• 带标题的内容控件：相当于一个内容控件，但是可以添加一个标题（Header）,标题部分可以分为两部分：（1）标题可以容纳一个控件（2）内容也可以容纳一个控件；GroupBox、TabItem等，它们的父类继承与HeaderedContentControl。

• 条目控件:可以显示一列数据（比如：下拉框/列表/树形控件），一般里面列的数据类型是相同的（比如：下拉框绑定的值相同）;它们的基类是:ItemsControl。条目控件在显示几个类型数据方面比较强大。

• 带标题条目控件：相当于在一个条目控件上加上一个标题显示区。TreeViewItem（树形项）、 MenuItem（菜单项）都属于带标题条目控件；带标题条目控件，往往显示层级关系数据，节点显示Header（一般是父节点）区域，而子节点是具体的项（其他控件的条目）。它们的共同基类继承与HeaderedContentControl。

• 特性内容控件：TexBox(文本输入框)，可以容纳字符串也可以容纳控制格式的一个文本，也可以放Image。

UI布局

XAML布局元素（常用重点）

• 网格布局（Grid）：可以自定以行和列，行列的数量和行高列宽来调整整个布局。

1. 定义行：RowDefinitons   定义列：ColumnDefinitions;如果需要在面板中放入控件元素必须采用附加属性的语法去定义。
2. 附加属性:（1）Grid.Row：占据第几行（2）Grid.Colum:占据第几列。它们都是以0为基准的整形也就是索引为0。
3. 跨行：Grid.RowSpan,跨列：Grid.ColumSpan。
4. 行高可以接收三种值：绝对值、相对比列值（1*）和自动调整(auto)。
5. 设置Children元素的对齐方向：（1）水平：HorizontalAlignnnment （2）垂直：VerticalAlignment。可作用于：主页面布局。

• 泊靠式面板（DockPanel）:停靠方向分为上下左右。DockPanel:经常用于设置主页面。

1. 多个停靠在同侧的元素按顺序排序（比如，两个相同的元素谁靠前谁在的面积就多）
2. 在DockPanel面板中，指定停靠的控件，会根据定义的顺序占领边角，所有的控件绝不会交叠。
3. 默认情况下(没有写DockPanel.Dock)，后面添加的元素只能使用剩余的面积。

• 栈式面板（StackPanel）：元素在水平或者垂直方向排成一条线。StackPanel：作用于设置菜单栏/列表。

1. 通过设置StackPanel的属性，有两种排列方式：（1）横排：Horizontal（1）竖排：Vertical。
2. 水平排列，每一个元素都于面板等高，垂直（Vertical）排列时，每个元素都与面板等宽；如果包含的元素超过了面板的空间，它只会截断多出的内容。
3. 每格元素占一行或者一列。
4. 常用属性：（1）Orientation:控制方向(Horizontal垂直排布还是水平排布Vertical)
5. HorizntalAlignnnment :水平方向向上的对齐方向; VerticalAlignment：垂直方向向上的对齐方向o

• 自动折行面板（环绕面板）WrapPanel：内部元素在排满一行自动折行分布。

1. 自动换行换列
2. WrapPanel布局面板将各个控件从左至右按照行或者列的顺序罗列
3. 高低：ItemHeight     宽度：ItemWidth

• 均分布面板(UniformGrid): 横向分布，行高大小相同；可作用于：导航栏。

1. 每个单元格的大小相同，不需要定义行列；每个单元格只有容纳一个控件
2. 默认从左往后排布
3. 设置排序的方向:  FlowDirection

• 画布（Canvas）:以像素为单位的绝对坐标进行定位；可作用于：页面嵌套。

1. 使用Canvas面板，必须指定一个子元素的位置（相对于画布），否则所有的元素都将出现画布的左上角。
2. 属性：Left、Right、Top、Button