WPF 控件与布局

1.经常使用的控件大概为6大类：

• 1.布局控件 :Grid，StackPanel，DockPanel—父：Panel
• 2.内容控件 ：只能容纳一个控件。Window，Button—父：ContentControl
• 3.带标题内容空间 :GroupBox，TabItem—父：HeaderedContentControl
• 4.条目控件 ：ListBox，ComboBox—父：ItemsControl
• 5.带标题条目控件：TreeViewItem，MenuItem—父：HeaderedItemsControl
• 6.特殊内容控件：TextBox，TextBlock，mage

---

FrameworkElement在UIElement的基础上添加了很多专门用于WPF开发的Api.如SetBinding方法。所以从这个类开始才算是进入WPF开发框架。

2.UI元素的类型。
除了上面的6大类，还有：
- Decorator 控件装饰元素。
- Adorner：文字点缀元素
- Flow Text:流式文本元素
- TextBox 文本输入框
- TextBlock 静态文字
- Shape 图形元素

---

控件是内存中的对象，控件的内容也是内存中的对象，控件听过自己的某个属性引用这作为其内容的对象，这个属性就是“内容属性”–叫法在不同的控件中是不一样的：Context，Child，Items，Children

XAML标签的内容区域专门映射了控件的内容属性。

1.ContentControl族。

1.均派生自ContentControl类
2.他们都是控件Control，内容属性名称为Content
3.只能由单一的元素充当其内容。
控件有：
Button，ButtonBase，CheckBox，ComboBoxItem，ContentControl，Frame，GridViewColumnHeader，GroupItem，Label，ListBoxItem，ListViewItem，NavigationWindow，RadioButton，RepeatButton，ScrollViewer，StatusBarItem，ToggleButton，ToolTip,UserControl，Window

2.HeaderedContentControl族

1.派生自HeaderedContentControl类，HeaderedContentControl是ContentControl的子类
2.用于显示带标题的数据的控件
3.内容属性为Content 和 Header
4.Content 和 Header 区域都只能容纳一个元素作为其内容
控件有：Expander，GroupBox，HeaderedContentControl，TabItem

3.ItemsControl族

1.派生自ItemsControl类
2.显示列表化数据的控件
3.内容属性为Items 或 ItemsSource，强调以列表的形式来展示数据。
4.每种ItemsControl都有对应自己的条目容器 Item Container
控件有：
Menu，MenuBase，ContextMenu，ComboBox，
ItemsControl，ListBox，ListView，TabControl，
TreeView，Selector，StatusBar

4.HeaderedItemsControl族

内容属性为Items,ItemsSource 和 Header
控件有：MenuItem,TreeViewitem,ToolBar

5.Decorator族

1.均派生自Decorator类
2.起UI装饰作用
3.内容属性为Child
4.只能由单一元素充当内容
控件有：
ButtonChrome，ClassicBorderDecorator，ListBoxChrome，SystemDropShadowChrome，Border，InkPresenter，BulletDecorator，ViewBox，AdornerDecorator

6.TextBlock和TextBox

TextBlock只能显示文本，不能编辑–静态文本。他可以使用丰富的印刷级的格式控制标记显示专业的排版效果。他因为要操纵格式，所以内容属性为InLines(印刷中“行”)，在显示简单字符串的时候，也可以使用内容属性Text.

TextBox可以允许用户编辑内容。内容属性为Text.

7.Shape族元素

他们只是简单的视觉元素，不是控件。是专门用来在UI上绘制图形的一类元素。这类元素没有自己的内容，
特点：派生自Shape类。用于2D图形绘制，无内容属性。用Fill属性为他们设置填充效果，用Stroke属性为他们设置边线的效果

8.Panel族元素

特点：派生自Panel抽象类。主要功能是控制UI布局。内容属性为Childen，强调对包含的元素进行布局。 内容可以是多个元素。Panel元素将控制他们的布局。
控件有：Canvas，DockPanel，Grid，TabPanel，ToolBarOverflowPanel，StackPanel，ToolBarPanel，UniformGrid，VietualizingPanel，VirtualizingStackPanel，WrapPanel.

1.Grid

特点：
1.行的宽度和列的宽度可以使用绝对数值，相对比例或自动调整的方式进行精确设定，并可设置最大最小值。
2.内部元素可以设置自己所在的行和列，还可以设置横向跨几列，纵向跨几行。
3.可以设置Children元素的对其方向。

---

使用场景：
1.UI布局的大框架设计
2.大量UI元素需要成行或成列对齐的情况
3.UI整体尺寸改变的时候，元素需要保持固有的宽度和高度比例
4.UI后期可能有较大的变更或扩展

---

1.定义行和列：ColumnDefinitions和RowDefinitions两个属性。
宽度和高度的单位：默认px （像素）是图形基本单位。Inch英尺，Centimeter厘米，Point点。
1in = 96px
1cm = 96/2.54 px
1pt = 96/72 px
宽高度的属性值为double类型。像素px为默认单位，可以省略px不写。其他单位会被转换成像素显示在Grid的边缘处。

设置宽高度的时候可以使用三类值：

绝对值：double数值加单位后缀
比例值：double数值后加一个星号 *.
自动值：Auto:行高和列宽的实际值将由行列内的控件的告诉和宽度决定。即控件会把行列撑到合适的宽度和高度。如果其中没有控件，则宽高都为0.
注意：
1.行和列都是从0 开始计算。
2.指定控件在某行：Grid:Row=”1”,若编号为0可以省略。列同理。
跨行或列：Grid:RowSpan=”行数” 和Grid:ColumnSpan=”列数”。
如果把两个元素放在Grid的同一个单元格内，则后写的元素会把前一个覆盖住。如果想让后面的元素显示出来，可以将上面的元素的Visibility设置为Hidden或Collapsed，也可以吧上面元素的Opacity属性设置为0.

StackPanel

类似于Android里的LinearLayout。使用三个属性控制内部元素的布局。
orientation: Horizontal和Vertical
HorizontalAlignment: Left, Center ,Right, Stretch
VerticalAlignment: Top, Center ,Bottom, Stretch

Canvas

当控件被放置进Canvas里布局的时候，有点类似于绝对布局。使用Canvas.X和Canvas.Y属性设置位置。
使用场景：
1.一经设计基本上不会再有改动的小型布局（如图标）
2.艺术性比较强的布局
3.需要大量使用横纵坐标进行绝对点定位的布局。
4.依赖横纵坐标的动画
如果两个元素在Canvas中占有相同的位置，同Grid中处理办法

DockPanel

DockPanel内的元素会被附加上DockPanel.Dock这个属性。这个属性的取值有“Left，Top，Right，Bottom”.根据该属性值，DockPanel内的元素会向指定方向累积。切分DockPanel内部的剩余空间。
DockPanel还有一个重要属性：bool类型的LastChildFill，默认为true. 为true的时候，DockPanel内的最后一个元素的Dock属性会被忽略，这个元素会把DockPanel内的所有剩余空间充满，这也解释了为什么Dock属性的取值没有Fill这个值。

WrapPanel

流式布局，一行放不下会自动转为第二行。

orientation:控制方向
HorizontalAlignment: 控制内部方向的对齐方式
VerticalAlignment: Top, Center ,Bottom, Stretch

如果想要实现可拖拽的分隔栏。使用Grid+GridSplitter来实现。