WPF布局、控件与样式

视频来源：https://www.bilibili.com/video/BV1HC4y1b76v/

布局

常用布局属性

• HorizontalAlignment：用于设置元素的水平位置
• VerticalAlignment：用于设置元素的垂直位置
• Margin：指定元素与容器的边距
• Height：指定元素的高度
• Width：指定元素的宽度
• WinHeight/WinWidth：指定元素的最小高度和宽度
• MaxHeight/MaxWidth：指定元素的最大高度和宽度
• Padding：指定元素内部边距

  常用布局容器

  1、Grid

  Grid为最常用的布局容器，作为View中的主要组成部分，负责框架中整体的页面布局

  ShowGridLines：可以设置行业的边距线的显示。

  Grid.RowDefinitions：可以创建任意行，进行固定高度与百分比或自适应高度设置。

  Grid.ColumnDefinitions：可以创建任意列，进行固定宽度与百分或自适应宽度设置。

  

  2、StackPanel

  Windows可以只包含一个元素,作为其内容。如果要在其中包含多个元素,就可以将 stackPanel用作Windows的一个子元素,并在 stackPanel的 内容中添加元素。stackPanel是 一个简单的容器控件,只能逐个地显示元素。stackPanel的 方向可以是水平或垂直。TooBarPancl类 派生自stackPanel。

  Orientation：用于设置StackPanel的元素排列方式。默认以垂直的方式布局。

  

  3、WarpPanel

  WrapPanel将子元素 自左向右逐个地排列,若一个水平行中放不下,就排在下一行。面板的方向可以是水平或垂直。

  WrapPanel与StackPanel类似的功能，相当于WrapPanel，具有在有限容器范围内，可以自动换行，或者换行处理。具体取决于WrapPanel的排列方式（Orientation）。默认水平布局方向。

  

  4、Dockpanel

  包含在DockPanel中元素，具备DockPanel.Dock的四个枚举值（Top/Lrft/Right/Bottom)用于设置元素的锚定位置。

  LastChildFill：容器中的最后一个元素时，默认该元素填充DockPanel所有空间，默认值为True。

  DockPanel中的元素未显示添加DockPanel.Dock属性时，系统则会默认为DockPanel.Dock = “Left”。

  

  5、UniformGrid

  与Grid不同的是，该容器具备Columns/Rows属性，通过设置该属性，UniformGrid则具备相应的行与列，但是设置的Columns/Rows不允许单独的进行容器的大小设置。

  位于UniformGrid中的子元素，按输入顺序排列至容器中，直至填充容器的所有空间。

  未显示指定Columns/Rows，UniformGrid则为子元素动态分配Column/Rows，换行与换行的基准主要基于UniformGrid的容器大小（宽度与高度）。

  

  控件

  日常工作中与我们打交道最多的控件无外乎6类：

  1、布局控件：可以容纳多个控件或嵌套其他布局控件，用于UI上组织和排列控件。Grid，StackPanel等，他们拥有共同的父类Panel。

  2、内容控件：只能容纳一个其他控件或布局控件作为他的内容。Button、Window等，他们的共同父类是ContentControl。

  3、带标题内容控件：相当于一个内容控件，但可以加一个标题，标题部分亦可容纳一个控件或布局。GroupBox，TabItem等，他们共同的父类是HeaderedContentControl。

  4、条目控件：可以显示一列数据，一般情况下这列数据的类型相同。ListBox、ComboBox等。他们共同的基类是ItemsControl。

  5、带标题条目控件：相当于一个条目控件，但可以加一个标题显示区。TreeViewItem，MenuItem等。此类空间的共同基类是HeaderedItemsControl。

  6、特殊内容控件：比如TextBox容纳的是字符串、TextBlock可以容纳可自由控制格式的文本，Image容纳图片类型数据。这类控件相对比较独立。

  六类控件的派生关系如下图：

  

  WPF的UI元素的类型

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

  问题

  为什么有一些元素是Content显示内容，而一些元素是Text显示内容？

  凡是继承于ContentControl的控件，他们的定义内容用Content，除了TextBlock使用的是Text，大部分都是Content设置其显示内容。

  为什么有一些元素是Padding，而有一些元素并没有？

  在继承于Control下得大部分控件具备这个Padding属性，TextBlock则单独实现了Padding属性。

  Magin和Padding的区别是？

  Magin：外边距

  Padding：内边距

  样式

  控件的Style属性可以赋予包含Setter相关联的Style元素。Setter元素定义Property和Value属性，并给指定的属性设置一个值。这里设置Background、FontSize和FontWeight属性。

  把Style设置为TargetType Button，以便可以直接访问Button的属性。如果没有设置样式的TargetType，就可以通过Button.Background、Button.FontSize访问属性。

  WPF中的各类控件元素，都可以自由的设置其样式。

  字体（FontFamily）

  字体大小（FontSize）

  背景颜色（Backgroud）

  字体颜色（Foreground）

  边距（Margin）

  水平位置（HorizontalAlignment）

  垂直位置（VerticalAlignment）

  而样式则是组织和重用以上的重要工具。不是使用重复的标记填充XAML，通过Styles创建一系列封装所有这些细节的样式。然后通过元素的style属性设定其样式。

  样式继承

  BasedOn