WPF 基础 - 控件与布局
1. 前言
1. 数据驱动 UI
WPF 是数据核心、主动的，UI 从属数据并表达数据、是被动的；
不再是 UI 驱动数据，而是数据驱动 UI；
2. 控件的定义
控件、数据内容、行为（控件响应用户操作执行自己的方法或以事件的形式通知应用程序）；
1）控件是数据和行为的载体；
2）所以关注控件时应该关注抽象的数据和行为而不是具体的形象，
3）比如符合"能展示内容并相应用户单击"这一抽象概念的 UI 元素都可以是 Button，而具体的样子完全可以通过 Style 和 Template 决定，checkbox 也不是因为有个 box 可以 check 才叫 checkbox。
3. 控件类型
- 布局控件：Grid、StackPanel、DockPanel、WarpPanel 等 Panel 的子类；
- 内容控件：只能容纳一个其他控件或布局控件作为它的内容。如 Window、Button 等 ContentControl 的子类；
- 带标题的内容控件：GroupBox、TabItem 等 HeaderedContentControl 的子类；
- 条目控件：显示一列数据，一般这列数据之间的类型一致；ListBox、ComboBox 等 ItemsControl 的子类；
- 带标题的条目控件：TreeViewItem、MenuItem 等 HeaderedContentControl 的子类；
<TreeView>
<TreeViewItem Header="A">
<TreeViewItem Header="A1">A11</TreeViewItem>
</TreeViewItem>
<TreeViewItem Header="B">
<TreeViewItem Header="B1">B11</TreeViewItem>
</TreeViewItem>
</TreeView>
<Menu>
<MenuItem Header="菜单">
<MenuItem Header="新建" InputGestureText="Ctrl+N">
<MenuItem.Icon>
<Image Source="/Images/2.png"/>
</MenuItem.Icon>
<MenuItem Header="设备" Click="MenuItem_Click"/>
</MenuItem>
</MenuItem>
<MenuItem Header="设置" />
<MenuItem Header="关于" />
</Menu>
- 特殊内容控件：TextBox、TextBlock、Image
graph LR
DependencyObject-->Dispatcher
Visual-->DependencyObject
UIElement-->Visual
FrameworkElement-->UIElement
Panel-->FrameworkElement
Control-->FrameworkElement
TextBlock-->FrameworkElement
Image-->FrameworkElement
ContentControl-->Control
HeaderedContentControl-->ContentControl
ItemsControl-->Control
HeaderedItemsControl-->ItemsControl
TextBox-->Control
2. 内容模型
2.1 逻辑树、可视元素树
可视树：因为 WPF 有Content 的概念，使控件与控件之间可以存在包含关系，以窗体为根，整个 WPF 的 UI 才形成树形结构。
2.2 内容属性
不同控件的内容属性名称不一：Content、Child、Items、Children、Text；
Button.Content、StackPanel.Children、ListBox.Items。
2.3 各类内容模型详解
2.3.1 ContentControl 族
- 内容属性：Content
- 常用：
Button、Window、Label、UserControl、
ListBoxItem、ListViewItem、ComboBoxItem、
RadioButton、ToggleButton、CheckBox、
ToolTip、ScrollViewer、ContentControl； - 不常用：
ButtonBase、GroupItem、RepeatButton、StatusBarItem、NavigationWindow、Frame、GridViewColumnHeader
2.3.2 HeaderedContentControl
- 内容属性：Content、Header
- 常用：TabItem、Expander、HeaderedContentControl
- 不常用：GroupBox
2.3.3 ItemsControl
- 内容属性：Items 或 ItemsSource
每种 ItemsControl 都对应有自己的条目容器 Item Container，如 ListBox 的 Item Container 是 ListBoxItem，关键词：包装机制 - 常用：
ListBox、ListView、ComboBox、Menu、ContextMenu、ItemsControl、TabControl、TreeView、StatusBar - 不常用：
MenuBase、Selector(ListBox、ComboBox、TabControl 等的父类)
2.3.3.1 ListBox
- DisplayMemberPath、SelectedValue、SelectedValuePath、SelectedItem、SelectedItems
| ItemsContorl | Item Container |
|---|---|
| ComboBox | ComboBoxItem |
| ListBox | ListBoxItem |
| ListView | ListViewItem |
| TabControl | TabItem |
| Menu | MenuItem |
| ContextMenu | MenuItem |
| TreeView | TreeViewItem |
| StatusBar | StatusBarItem |
2.3.4 HeaderedItemsControl
内容属性：Items 或 ItemsSource、Header
常用：
MenuItem、TreeViewItem、ToolBar
2.3.5 Decorator 族
- 内容属性： Child
起 UI 装饰作用 - 常用：
Border、ViewBox - 不常用：
ButtonChrome、ListBoxChrome、BulletDecorator、InkPresenter、AdornerDecorator、ClassicBorderDecorator、SystemDropShadowChome
2.3.6 TextBox、TextBlock
2.3.7 Shape 族
- Path、Polygon、Polyline 等 Shape 子类；
- Stroke 设置边线、Fill 设置填充；
- 无内容属性；
- 用于 2D 图形绘制。
<Polygon Points="10,10 100,125 20,125" Stroke="Red"/>
<Polyline Points="10,10 100,125 20,125" Stroke="Red"/>
<Path Stroke="Red">
<Path.Data>
<PathGeometry Figures="M 10,100 C 10,300 300,-160 100,10"/>
</Path.Data>
</Path>
<Path Data="M 12.37,87.5 A 15,15 0 0 0 60,115" Stroke="Red" />
Path：
起点命令 M，终点命令 Z(让头尾相连)
直线 L，水平直线 H，垂直直线 V，曲线 C、Q、S、T
椭圆 A
2.3.8 Panel 族
- 内容属性：Children
- 常用：
Grid、StackPanel、DockPanel、WrapPanel、Canvas - 不常用：
UniformGrid(Grid 简化版，定义几行几列，每个单元格大小一致)、TabPanel、ToolBarOverflowPanel、ToolBarPanel、VirtualizingPanel、VirtualizingStackPanel
2.3.8.1 Grid
- Grid 共享尺寸属性 SharedSizeGroup 运用：
1）将父级 Grid 的 Grid.IsSharedSizeScope 设置为 true；
2）两个 Grid 各自某一行或某一列的 SharedSizeGroup 设置为同一个字符串，那么这两行或这两列就可以共享空间。
<Grid Grid.IsSharedSizeScope="True">
<Grid x:Name="layer0Grid"
Panel.ZIndex="0"
MouseEnter="layer0Grid_MouseEnter">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
...
</Grid>
<Grid x:Name="toolboxLayerGrid" Visibility="Collapsed">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" SharedSizeGroup="ToolboxGroup" />
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Width="3" HorizontalAlignment="Left" />
<Grid x:Name="toolboxGrid" Grid.Column="1" Margin="3,0,0,0">
</Grid>
</Grid>
</Grid>
toolboxLayerGrid.Visibility = System.Windows.Visibility.Visible;
toolboxLayerGrid.SetValue(Grid.ZIndexProperty, 2);
layer0Grid.ColumnDefinitions.Add(new ColumnDefinition { SharedSizeGroup = "ToolboxGroup" });
- Grid 宽高接受的尺寸单位：Pixel(像素，默认单位)、Inch(英寸=96 piexl)、Centimeter(厘米=96/2.54 pixel)、Point(=96/72 pixel)
- 如果把两个元素放在 Grid 的同一个单元格内，则后书写的元素将在先书写的元素之上，可以通过 Panel.ZIndex 值调整，值越大，越靠上。默认为 1.
2.3.8.2 StackPanel
- Orientation 决定横向排列还是纵向排列；
- 布局风格：垒积木
2.3.8.3 Canvas
- Canvas.Top 、Canvas.Left；
- 用于基本不改动、艺术性比较强、需要大量使用横坐标作为绝对定位、依赖横坐标的动画等场景；
- 两个元素占据同一个位置时，跟 Grid 一样。
2.3.8.4 DockPanel
- LastChildFill
2.3.8.5 WrapPanel
- 流式布局，Orientation 默认 Horizontal：从左到右 从上到下。
