内容大概：
1）6类控件介绍及派生关系
2）WPF的UI元素类型介绍
3）内容模式的详解
4）UI布局简介
控件
控件无外乎6类：
1）布局控件：Grid、StackPanel、DockPanel等等这些可以容纳其他控件或者说是嵌套其他控件，主要用于UI上的组织和排列。共同的父类是Panel。
2）内容控件：Window、Button等属于这类，只能容纳一个控件作为其内容。共同父类ContentPanel。
3）带标题内容控件：顾名思义，比内容控件多个标题。典型代表：GroupBox、TabItem….共同父类HeaderedContent。
4）条目控件：ListBox、ComboBox等，可以显示一列数据。共同父类ItemsControl。
5）带标题条目控件：比条目控件多个Header。TreeVievItem、MenuItem等典型代表。基类为HeaderedItemsControl。
6）特殊内容控件：这类控件相对是独立的。有TextBox、TextBlock等等
派生关系：
WPF的UI元素的类型
各类内容模型详解
1)ContentControl家族
特点：
1.基类均为ContentControl
2.都是控件[Control]
3.内容属性名称为Content
4.只能由单一元素充当其内容
重点理解“只能由单一元素充当其内容”。最好的解释莫过于用Coding了。
以Button为例：第一个Button的内容为一个静态文本，第二个button的内容为一张图片
<Button Margin="5"><TextBlock Text="Hello Li.Lin"></TextBlock></Button><Button Grid.Row="1" Margin="5"><Image Source="img.jpg" Width="60" Height="60"></Image></Button>
run:
假如你想在同一个Button中既显示TextBlock又要显示image:
<Button Margin="5"><TextBlock Text="Hello Li.Lin"></TextBlock><Image Source="img.jpg" Width="60" Height="60"></Image></Button>
error:报错说[属性“Content”已设置多次]。
ContentControl家族的控件有：
2）HeaderedContentControl家族
特点：
1.都派生自HeaderedContentControl，HeaderedContentControl派生自ContenControl。
2.用于显示带标题的数据。
3.除了显示主题内容的区域外，还有一个显示Header的区域。
4.内容属性分为Content和Header。
5.无论是Content还是Header都只能容纳一个元素作为其内容。
包含的控件有：Expander、GroupBox、headeredContentControl、TabItem。
做个GroupBox的Coding:
<GroupBox Margin="10" BorderBrush="SlateBlue"><GroupBox.Header><Image Source="img.jpg" Width="20" Height="20"></Image></GroupBox.Header><GroupBox.Content><TextBlock TextWrapping="WrapWithOverflow" Margin="10" Text="Li.Lin is a programer learning wpf..."></TextBlock></GroupBox.Content></GroupBox>Run:
3）ItemsControl家族
特点：
1.都派生自ItemsControl。
2.都是控件，用于显示列表化数据。
3.内容属性为Items或ItemsSource。
4.每种ItemsControl都对应有自己的条目容器(Item Container)。
ItemsControl家族包含控件有：
ListBox是ItemsControl的典型代表，下面以它为例：
<ListBox Margin="5"><ListBoxItem>Li.Lin</ListBoxItem>wpf<ListBoxItem><CheckBox x:Name="checkBoxName" Content="LiLin"></CheckBox></ListBoxItem><ListBoxItem><Button x:Name="BtnWpf" Content="WPF"></Button></ListBoxItem>/ListBox>
Run:
注意！其中的 wpf 没有包含在<ListBoxItem>…</ListBoxItem>中，是因为这对标签是可以省略的。也就是说，无论你把什么数据或数据集合丢给ListBox，它都会以<ListBoxItem>…</ListBoxItem>包装，因此我们完全可以不写。
不过，大多数情况下，ListBox是用来动态显示后台的数据，而非控件。
接着Coding：
程序中定义一个Employee类：
public class Emplayee{public int Id { get; set; }public string Name { get; set; }public int Age { get; set; }}
再定义一个Employee类型的集合：
List<Emplayee> employeeList = new List<Emplayee>(){new Emplayee(){Id=1,Name="LiLin",Age=23},new Emplayee(){Id=2,Name="Tom",Age=26},new Emplayee(){Id=3,Name="Guo",Age=29},new Emplayee(){Id=4,Name="Yan",Age=20},new Emplayee(){Id=5,Name="Tom",Age=30},};在程序的主界面上定义一个名为listBoxEmployee的ListBox。接下来我们写：
this.listBoxEmployee.DisplayMemberPath = "Name";this.listBoxEmployee.SelectedValuePath = "Id";this.listBoxEmployee.ItemsSource = employeeList;
Run:
DisplayMemberPath这个属性的value是只ListBox显示数据的属性。也就是说，ListBox会去调用这个属相的ToString()方法，把得到的字符串放入一个TextBlock(文本控件)，then再Textblock放入ListBoxItem中。这是简单的显示，需要复杂的显示就需要用到DataTemplate。
SelectedValuePath属性与SelectValue属性配合使用。
以下列出ItemsControl对应的Item Container：
HeaderedItemsControl家族
该家族控件除了具有ItemsControl的特性外，还具有显示Header 的能力。
特点：
1.均派生自HeaderedItemsControl类。
2.都是控件，用于显示列表化数据，同事显示一个标题。
3.内容属性有：Items、ItemsSource、Header。
本家族控件有MenuItem、TreeViewItem、ToolBar。
Decorator家族
该家族在UI上期装饰效果。如Border元素把一些内容加边框；在ViewBox元素里的内容可以*缩放。
特点：
1.均派生自Decorator类。
2.起UI装饰作用。
3.内容属性为Child。
4.只能由单一元素充当内容。
家族元素：
TextBox和TextBlock
这两个都是用来显示文本。区别是TextBlock只能显示不能编辑；TextBox允许编辑文本。除了这个区别，它们的内容属性也不一样。TextBlock由于需要操纵格式，其内容属性为InLines(行)，同时保留Text属性。而TextBox得内容属性为Text。
Sharp家族
Sharp家族元素是视觉元素，而非控件，内容自己的内容。不过可以用Fill属性填充效果，Stroke属性设置边线。
特点：
1.均派生自Sharp。
2.用于2D图形绘制。
3.无内容属性。
4.使用Fill属性设置填充，使用Stroke属性设置边线。
Panel家族
这是一个用于UI布局的家族。该家族特点:
1.均派生自Panel抽象类。
2.控制UI布局。
3.内容属性为Children。
4.内容可以为多个元素，并控制它们的布局。
本家族元素：
UI布局(Layout)简介
WPF是专门的用户界面技术，因此布局功能是它的核心功能之一。在WPF的布局元素中，既有像传统的Windows Form和APS.NET的绝对坐标定位元素，也有像HTML页面那样用行列定位的。
WPF多了一个Content的概念——包含。以窗体为根，整个WPF的UI形成树形结构，叫做可视化树。
WPF的布局元素属于Pane家族。
WPF中的布局元素：
1.Grid：网格。类似HTML中的Table。
2.StackPanel：栈式面板。竖直或水平排成一条直线。
3.Canvas：画布。绝对坐标定位，类似于Windows Form的布局。
4.DockPanel：泊靠式面板。
5.WrapPanel：自动折行面板。排满一行自动折行，类似HTML中的流式布局。
转自：https://www.cnblogs.com/lnetmor/archive/2011/11/20/2256251.html