WPF布局全接触
WPF教程二：布局之StackPanel面板
WPF教程⼆：布局之StackPanel⾯板应⽤程序界⾯设计中，合理的元素布局⾄关重要，它可以⽅便⽤户使⽤，并将信息清晰合理地展现给⽤户。
WPF提供了⼀套功能强⼤的⼯具-⾯板(Panel)，来控制⽤户界⾯的布局。
你可以使⽤这些⾯板控件来排布元素。
如果内置布局控件不能满⾜需要的话，还可以创建⾃定义的布局元素。
⾯板（Panel）WPF⽤于布局的⾯板主要有6个，StackPanel(栈⾯板)、WrapPanel（环绕⾯板）。
DockPanel（停靠⾯板）、Canvas（画布）、Grid（⽹格⾯板）和UniformGrid(均布⽹格)。
StackPanel：栈⾯板栈⾯板,可以将元素排列成⼀⾏或者⼀列，其特点是：每个元素各占⼀⾏或者⼀列，Orientation属性指定排列⽅式：Vertical(垂直)【默认】、Horizontal(⽔平)，默认情况下，⽔平排列时，每个元素都与⾯板⼀样⾼；垂直排列时，每个元素都与⾯板⼀样宽。
如果包含的元素超过了⾯板空间，它只会截断多出的内容。
元素的Margin属性⽤于使元素之间产⽣⼀定得间隔，当元素空间⼤于其内容的空间时，剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。
1、垂直⽅向排列界⾯运⾏效果：使⽤XAML代码实现：1 <Window x:Class="WpfDemo.MainWindow"2 xmlns="/winfx/2006/xaml/presentation"3 xmlns:x="/winfx/2006/xaml"4 Title="StackPanel⾯板" Height="237" Width="525" WindowStartupLocation="CenterScreen">5 <StackPanel x:Name="stackpanel" Margin="0" Orientation="Vertical">6 <Button Content="第⼀个"></Button>7 <Button Content="第⼆个"></Button>8 <Button Content="第三个"></Button>9 <Button Content="第四个"></Button>10 </StackPanel>11 </Window>2、⽔平⽅向排列界⾯运⾏效果：使⽤XAML代码实现：1 <Window x:Class="WpfDemo.MainWindow"2 xmlns="/winfx/2006/xaml/presentation"3 xmlns:x="/winfx/2006/xaml"4 Title="StackPanel⾯板" Height="237" Width="525" WindowStartupLocation="CenterScreen">5 <StackPanel x:Name="stackpanel" Margin="0" Orientation="Horizontal">6 <Button Content="第⼀个"></Button>7 <Button Content="第⼆个"></Button>8 <Button Content="第三个"></Button>9 <Button Content="第四个"></Button>10 </StackPanel>11 </Window>注：当把StackPanel的FlowDirection属性设置为RightToLeft，Orientation属性设置为Horizontal，StackPanel将从右向左排列元素。
WPF控件的使用和布局
TCSS V1.0
Panel族元素 本族元 Nhomakorabea特点如下:
•均派生自Panel类。 •主要功能是控制UI布局。 •内容属性为Children。 •内容可以是多个元素，Panel将控制它们的布局。
TCSS V1.0
UI布局(Layout)
WPF作为专业的界面技术，布局功能是它的核心技术之一。友好 的用户界面和良好的用户体验离不开设计精良的布局。日常工作 中，WPF设计师最大的工作量就是布局和动画。除了点缀型的动 画之外，大部分布局都是动画间的转换，UI布局的重要性可见一 斑。布局是静态的，动画是动态的，用户体验就是用户在这动静 之中与软件功能产生交互式的感受
•本族控件不光要具备ItemControl的特性外，还要具有显示标题的 能力。 •该族控件有以下特点: •均派生自HeaderedItemControl类。 •它们都是控件，用于显示列表化的数据，同时可以支持显示一个 标题。 •内容属性为Items,ItemsSource和Header。
TCSS V1.0
GUI是程序界面的优胜者，在Windows上实现图形用户界面有很多种 方法，每种方法又都有自己的一套开发理念和工具。每种GUI开发方 法与它的理念和工具共同组成了一种方法论，常见的有:
•Windows API(Win API)：调用Windows的底层绘图函数，使用C语言， 最原始也是最基础的。 •Microsoft Foundition Class(MFC)：使用C++语言将最原始的Win32 API 封装成控件类。 •Visual Component Library(VCL)：Delphi和C++ Builder使用的与MFC相 近的控件类库。 •Visual Basic+ActiveX(VB6)：使用组件化的思想把Win32 API封装成控 件，以期与多种语言共用。 •Java Swing/AWT：Java SDK中用于跨平台开发的控件类库。 •Windows Form:.NET平台上用于开发GUI的老牌劲旅，完全组件化，但 是需要.net运行时支持。 •Windows Presentation Foundition(WPF)：后起之秀，使用全新的数据 驱动UI理念。
WPF布局
核心价值观：创新 诚信 责任 共赢
4008-000-222
国家AAAA级物流企业
Canvas比较简单，只是一个存储元素的容器，它不会自动调整内部元素的排列及 大小。不指定元素位置，元素将默认显示在画布的左上方。 Canvas的主要用途是用来画图。 Canvas默认不会自动裁减超过自身范围的内容，即溢出的内容会显示在Canvas外 面，这是因为默认ClipToBounds="False"；我们可以通过设置ClipToBounds="True 来裁剪多出的内容。
核心价值观：创新 诚信 责任 共赢
4008-000-222
国家AAAA级物流企业
Grid和其他各个Panel比较起来，功能最多也最为复杂，它由 Grid.ColumnDefinitions列元素集和Grid.RowDefinitions行元素集合两种元素组成。 而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其放置所在的行 和列，否则元素均默认放置在第0行第0列。由于Grid的组成并非简单的添加属性标 记来区分行列，这也使得用户在实际应用中可以具体到某一单元格中，所以布局起 来就很精细了。
国家AAAA级物流企业
核心价值观：创新 诚信 责任 共赢
4008-000-222
国家AAAA级物流企业
Grid的宽度
核心价值观：创新 诚信 责任 共赢
4008-000-222
国家AAAA级物流企业
UniformGrid 均布网格的是Grid的简化版本，每个单元格的大小相同，不用在定义 行列集合。均布网格每个单元格只能容纳一个元素，将自动按照定义在其内部的元 素个数，自动创建行列，并通常保持相同的行列数。
WPF布局
· 1.摘要
· 2.本文提纲
· 3.总体介绍
· 4.Canvas
· 5.StackPanel
· 6.WrapPanel
· 7.DockPanel
· 8.Grid
· 9.UniformGrid
· 10.ViewBox
· 11.Border
· 12.ScrollViewer
· 13.布局综合应用
· 14.自定义布局控件
<RectangleFill="Red"
Stroke="Azure"
Width="209"
Height="159"
Canvas.Left="310"Canvas.Top="181"/>
<EllipseFill="Azure"
Stroke="Green"
Width="258"Height="97"
Panel.ZIndex="1"
要实现的效果如下图（用XAML和C#实现同一效果）：
XAML代码实现：
<Window
xmlns="/winfx/2006/xaml/presentation"
WPF界面布局与控件PPT课件
使子元素跨多列。例如Grid.ColumnRowSpan=“2”表示 跨2列。
1.4.StackPanel (堆叠面板)
• 堆叠面板也叫栈面板，可以将元素排列成一行或者一列。没 有重叠的时候称为排列，有重叠的时候称为堆叠。常用属性 为Orientation属性，表示排列或堆叠的方向，默认为 Ve r t i c a l （ 纵 向 ） ， 如 果 希 望 横 向 排 列 则 需 要 设 置 为 “Horizontal”即可。
3.ClipToBounds属性
当绘制内容超出Canvas界限时，设置为true表示超出的部 分被自动剪裁掉，false表示不剪裁。
【例2-1】新建一个“Csharp_2_Canvas”WPF应用程 序项目，在画布上放置两个文本框。其运行结果如图2-3 所示。
图1 程序运行结果
操作步骤 （1）新建一个“Csharp_2_Canvas”WPF应用程序项
2.1.TextBox(文本框)
•TextBox（文本框）控件用于显示或编辑纯文本字符。 常用属性如下： （1）Text：表示显示的文本。 （2）MaxLength：用于指示文本框中输入的最大字符 数。 （ 3 ） Te x t W r a p p i n g ： 控 制 是 否 自 动 转 到 下 一 行 。 当 其值为“Wrap”时，该控件可以自动扩展以容纳多行 文本。 （4）BorderBrush：设置边框颜色。 （5）BorderThickness：设置边框宽度，如果不希望 该控件显示边框，可以将其设置为0即可。 Te x t B o x 控 件 的 常 用 事 件 是 Te x t C h a n g e d 事 件 。
• 在实际应用中，一般先用Grid将整个界面划分为需要的行和 列，然后将StackPanel放在某个单元格内，再对 StackPanel内的多个子控件进行排列或堆叠。
第8章WPF控件全解
排列或堆叠，将该属性设置为“Horizontal”即可。
【例8-5】演示StackPanel的基本用法。
20
8.2 常用布局控件
画布（Canvas）
Canvas用于定义一个区域，称为画布。在该画布内的所有子元素都用相 对于该区域左上角的坐标位置x和y来定位 ，其常用属性如下。
Canvas.Left和Canvas.Top附加属性：子元素一般内容模型
WPF内容模型
WPF内容模型是指如何组织和布局WPF控件的内容。用XAML描述控件元素时，一 般语法形式为
<控件元素名>
内容模型
</控件元素名>
Text
Text内容模型表示一段字符串。TextBox、PasswordBox都属于Text内容模型。
Xaml： <TextBox Name="textBox1">这是一段文本</TextBox>
18
8.2 常用布局控件
【例8-4】演示如何用Grid构造动态布局。
19
8.2 常用布局控件
堆叠面板（StackPanel）
StackPanel用于将其子元素按纵向或横向顺序排列或堆叠。没有重叠的时 候称为排列，有重叠的时候称为堆叠。常用属性如下。
Orientation属性：排列或堆叠的方向。默认为纵向，如果希望横向
ResizeMode
窗口
SizeToContent
窗口
设置为WidthAndHeight（允许窗口内的内容扩展时 自动调整窗口的大小）可最大程度地提高灵活性
17
8.2 常用布局控件
网格 （Grid）
该控件定义由行和列组成的网格区域，在网格区域内可以放置其他控件，放置的 这些控件都自动作为Grid元素的子元素。是所有动态布局控件中唯一可按比例动 态调整分配空间的控件。 Grid内的子元素中还可以嵌套Grid。子元素使用以下附加属性来定位：
WPF使用
WPF使用一WPF界面布局首先会看到一个靓丽的小方框，将鼠标放在方框的边缘点击就会产生相应的分割线。
现在我们要做的内容需要将窗体分成三行，可以先随便分割一下，以后在调整相互的大小。
这时候会注意到下方的XML代码区域。
每个R owDefinition作为一个行被定义出来会使控件在一定的坐标上固定位置以下WPF中的布局观（Layout Phil osophy）：在WPF窗体中，一个窗体只能持有一个控件，当多个控件想要在窗体中展现时，就需要首先设置一个容器控件（Container)然后将其他控件放到这个控件里面，形成树状结构因此，布局观第一条就是，控件的布局应该有容器来决定而不是通过自身使用margin之类的东西来控制位置。
因为这些属性原本应该是控制自己内部展现或与邻里之间关系的；第二条，控件应避免明确的定义具体的尺寸，因为显示器分辨率及windows窗体的大小都有可能随时改变通过MinWidth,MinHeight,MaxWidth,MaxHeight属性可以实现这一点第三条，不要将界面元素位置设置成与屏幕坐标相关.现在显示器分辨率比较多样话（800×600、1024×768，我的显示器是一台是1400×1050,还有一个是1024×1280竖式的），这样的做法还是比较有风险的。
第四条，容器应将有效空间共享给其子控件，这也是为了不在窗体调整后，遗留出大块的空余。
第五条，容器嵌套使用，因为不同的容器，表现效果不同，必要时应结合使用。
接下来在工具箱（Tool Box）中双击ListView，一个小框会出现在界面上。
接下来在工具箱（Tool Box）中双击WrapPanel，又一个大框会出现在界面上。
再增加一个Button。
最终结果如下：<Grid><Grid.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="Auto"/><RowDefinition Height="22"/></Grid.RowDefinitions><ListView Name="listView1"MinWidth="280"><ListView.View><GridView x:Name="gridView1"><GridViewColumn Header="ContactID"></ GridViewColumn><GridViewColumn Header="FirstName"></ GridViewColumn><GridViewColumn Header="LastName"></G ridViewColumn><GridViewColumn Header="EmailAddress "></GridViewColumn></GridView></ListView.View></ListView><WrapPanel Grid.Row="1"Orientation="Horizontal"></WrapPane l><Button Grid.Row="2"HorizontalAlignment="Right"Click="but ton1_Click"Name="button1">Refresh</Button></Grid>1)介绍以下容器控件Panel，现在界面中有两个容器型的控件一个是Grid跟元素，另一个是WrapPanel。
WPF布局全接触
一.摘要首先很高兴这个系列能得到大家的关注和支持，这段时间一直在研究Windows Azure，所以暂缓了更新，同时也本着想把它写好、宁缺毋滥的精神，在速度上自然也就慢了下来，这篇文章拖拖拉拉也经历了十多天才发布出来（每天写一点），不过请大家放心，这个系列一定会继续写下去。
由于自己才疏学浅且是对这些技术的使用总结和心得体会，错误之处在所难免，怀着技术交流的心态，在这里发表出来，所以希望大家能够多多指点，这样在使一部分人受益的同时也能纠正我的错误观点，以便和各位共同提高。
这篇文章主要是对WPF布局系统做一个较简单的介绍，大家都知道：UI是做好一个软件很重要的因素，如果没有一个漂亮的UI，再怎么强大的功能也会显得这个软件很脆弱且没有投资价值。
本文以总分总的形式展开介绍：首先对WPF Panel做一个总体认识、然后讲解各Panel基本用法（分别用XAML和C#两种方式实现同一个功能，便于大家学习）、布局综合应用、自定义布局控件以及最后的总结，希望对大家有所帮助。
二.本文提纲·1.摘要·2.本文提纲·3.总体介绍·4.Canvas·5.StackPanel·6.WrapPanel·7.DockPanel·8.Grid·9.UniformGrid·10.ViewBox·11.Border·12.ScrollViewer·13.布局综合应用·14.自定义布局控件·15.本文总结·16.系列进度·17.相关代码三.总体介绍WPF的布局控件都在System.Windows.Controls.Panel这个基类下面，使用Panel元素在WPF应用程序中放置和排列子对象。
它具体包括哪些布局控件以及如何使用这些布局控件（分别用XAML和C#两种方式实现同一个功能）、如何开发自定义的布局控件，也就是本文所要讨论的范畴：Panel具体继承关系详见下面类图：如上图，公共属性太多了，就简单介绍几个常见的属性：Margin是元素与其他元素的外边距；Padding是指在本元素内部的元素内容与边缘的距离；前面这两个元素基本和ASP.NE中的Margin和Padding类似，只是定义大小的设置不同而已；FlowDirection属性标示元素的内容显示方向；Panel.ZIndex是相对于显示屏的Z轴坐标，用于调整层叠元素的显示先后；RenderTransform和LayoutTransform用来将缩放和旋转的变换应用到某个元素上。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
WPF布局全接触一.摘要首先很高兴这个系列能得到大家的关注和支持，这段时间一直在研究Windows Azure，所以暂缓了更新，同时也本着想把它写好、宁缺毋滥的精神，在速度上自然也就慢了下来，这篇文章拖拖拉拉也经历了十多天才发布出来（每天写一点），不过请大家放心，这个系列一定会继续写下去。
由于自己才疏学浅且是对这些技术的使用总结和心得体会，错误之处在所难免，怀着技术交流的心态，在这里发表出来，所以希望大家能够多多指点，这样在使一部分人受益的同时也能纠正我的错误观点，以便和各位共同提高。
这篇文章主要是对WPF布局系统做一个较简单的介绍，大家都知道：UI是做好一个软件很重要的因素，如果没有一个漂亮的UI，再怎么强大的功能也会显得这个软件很脆弱且没有投资价值。
本文以总分总的形式展开介绍：首先对WPF Panel做一个总体认识、然后讲解各Panel基本用法、布局综合应用、自定义布局控件以及最后的总结，希望对大家有所帮助。
二.本文提纲· 1.摘要· 2.本文提纲· 3.总体介绍· 4.Canvas· 5.StackPanel· 6.WrapPanel· 7.DockPanel· 8.Grid· 9.UniformGrid· 10.ViewBox· 11.Border· 12.ScrollViewer· 13.布局综合应用· 14.自定义布局控件· 15.本文总结· 16.系列进度三.总体介绍WPF的布局控件都在System.Windows.Controls.Panel这个基类下面，使用Panel 元素在WPF应用程序中放置和排列子对象。
它具体包括哪些布局控件以及如何使用这些布局控件、如何开发自定义的布局控件，也就是本文所要讨论的范畴：Panel具体继承关系详见下面类图：如上图，公共属性太多了，就简单介绍几个常见的属性：Margin是元素与其停放父元素的间距；Padding是指在本元素内部的元素内容与边缘的距离；FlowDirection属性标示元素的内容显示方向；Panel.ZIndex是相对于显示屏的Z轴坐标，用于调整层叠元素的显示先后；RenderTransform 和LayoutTransform用来将缩放和旋转的变换应用到某个元素上。
一个Panel 的呈现是测量和排列Children子元素、然后在屏幕上绘制它们的过程。
所以在布局的过程中会经过一系列的计算，那么Children 越多，执行的计算次数就越多。
如果不需要较为复杂的Panel（如Grid和自定义复杂的Panel），则可以使用构造相对简单的布局（如Canvas、UniformGrid等），这种布局可带来更好的性能。
如果有可能，我们应尽量避免不必要地调用UpdateLayout方法。
每当Panel内的子元素改变其位置时，布局系统就可能触发一个新的处理过程。
对此，了解哪些事件会调用布局系统就很重要，因为不必要的调用可能导致应用程序性能变差。
换句话说，布局是一个递归系统，实现在屏幕上对元素进行大小调整、定位和绘制，然后进行呈现。
具体如下图，要实现控件0的布局,那么先要实现0的子控件01,02...的布局,要实现01的布局,那么得实现01的子控件001,002...的布局,如此循环直到子控件的布局完成后,再完成父控件的布局,最后递归回去直到递归结束,这样整个布局过程就完成了。
布局系统为Children 集合的每个成员完成两个处理过程：测量处理过程（Measure）和排列处理过程（Arrange）。
每个子Panel 均提供自己的MeasureOverride 和ArrangeOverride 方法，以实现自己特定的布局行为。
四. CanvasCanvas比较简单，只是一个存储元素的容器，它不会自动调整内部元素的排列及大小。
不指定元素位置，元素将默认显示在画布的左上方。
Canvas的主要用途是用来画图。
Canvas默认不会自动裁减超过自身范围的内容，即溢出的内容会显示在Canvas外面，这是因为默认ClipToBounds="False"；我们可以通过设置ClipToBounds="True来裁剪多出的内容。
要实现的效果如下图（用XAML和C#实现同一效果）：XAML代码实现：C#代码实现：五. StatickPanelStatickPanel就是将子元素按照堆栈的形式一一排列，通过设置面板的Orientation属性设置了两种排列方式：横排（Horizontal默认的）和竖排（Vertical）。
纵向的StatickPanel默认每个元素宽度与面板一样宽，反之横向亦然。
如果包含的元素超过了面板空间，它只会截断多出的内容。
元素的Margin属性用于使元素之间产生一定得间隔，当元素空间大于其内容的空间时，剩余空间将由HorizontalAlignment和VerticalAlignment属性来决定如何分配。
其他属性，大家可以看看如下类图：要实现的效果如下图（用XAML和C#实现同一效果）：XAML代码实现：C#代码实现：六. WrapPanelWrapPanel是一个非常简单的面板，从左至右按顺序位置定位子元素，如果排满断开至下一行。
后续排序按照从上至下或从右至左的顺序进行。
WrapPanel面板也提供了Orientation属性设置排列方式，这跟上面的StackPanel基本相似。
不同的是WrapPanel会根据内容自动换行。
要实现的效果如下图（用XAML和C#实现同一效果）：XAML代码实现：C#代码实现：七. DockPanelDockPanel定义一个区域，在此区域中，您可以使子元素通过描点的形式排列。
停靠面板其实就是在WinForm类似于Dock属性的元素。
DockPanel会对每个子元素进行排序，并停靠在面板的一侧，多个停靠在同侧的元素则按顺序排序，最后一个元素填充这个Panel（这个需要设置LastChildFill属性为True）。
对于在DockPanel中的元素的停靠属性可以通过Panel.Dock的附加属性来设置.要实现的效果如下图（用XAML和C#实现同一效果）：XAML代码实现：C#代码实现：八. GridGrid和其他各个Panel比较起来，功能最多也最为复杂，它由<Grid.ColumnDefinitions>列元素集和<Grid.RowDefinitions>行元素集合两种元素组成。
而放置在Grid面板中的控件元素都必须显示采用附加属性语法定义其放置所在的行和列，否则元素均默认放置在第0行第0列。
由于Grid 的组成并非简单的添加属性标记来区分行列，这也使得用户在实际应用中可以具体到某一单元格中，所以布局起来就很精细了。
第一种，固定长度——宽度不够，会裁剪，不好用。
单位pixel。
第二种，自动长度——自动匹配列中最长元素的宽度。
第三种，比例长度——*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；像上面的一个2*，一个*，表示前者2/3宽度。
跨越多行和多列<Rectangle Fill="Silver" Grid.Column="1" Grid.ColumnSpan="3"/>使用Grid.ColumnSpan和Grid.RowSpan附加属性可以让相互间隔的行列合并，所以元素也可以跨越多个单元格。
使用GridSplit控件结合Grid控件实现类似于WinForm中SplitContainer的功能，这个大家在WinForm当中经常用到，我们也不多做介绍。
要实现的效果如下图（用XAML和C#实现同一效果）：XAML代码实现：C#代码实现：九UniformGrid介绍了前面的Grid,接下来的这个UniformGrid 就太简单了，均布网格的是Grid的简化版本，每个单元格的大小相同，不用在定义行列集合。
均布网格每个单元格只能容纳一个元素，将自动按照定义在其内部的元素个数，自动创建行列，并通常保持相同的行列数。
要实现的效果如下图（用XAML和C#实现同一效果）：XAML代码实现：C#代码实现：十. ViewBoxViewBox这个控件通常和其他控件结合起来使用，是WPF中非常有用的控制。
定义一个内容容器，该容器可拉伸和缩放单个子元素以填满可用空间。
一个Viewbox只能具有一个Child。
如果添加一个附加Child，会导致一个运行时ArgumentException错误。
我们用得最多的首先是Stretch 属性，然后是StrctchDirection属性，关于这两个元素，大家可以运行我们的代码，然后改变设置就可以看到效果。
要实现的效果如下图（用XAML和C#实现同一效果）：XAML代码实现：C#代码实现：十一. BorderBorder 是一个装饰的控件，此控件绘制边框及背景，在Border 中只能有一个子控件（这个子控件又可以包含多个子控件）。
Border 的几个重要属性：Background:用用一个Brush 对象来绘制背景；BorderBrush:用一个Brush 对象来绘制边框；BorderThickness:此属性设置Border 边框的大小；CornerRadius:此属性设置Border 的每一个角圆的半径；Padding:此r属性设置Border 里的内容与边框的之间的间隔。
要实现的效果如下图（用XAML和C#实现同一效果）：XAML代码实现：C#代码实现：十二. ScrollViewer通常用户界面中的内容比计算机屏幕的显示区域大，大出的部分就会破坏原有的布局。
利用ScrollViewer 控件可以方便地使应用程序中的内容具备滚动功能。
这样大出的部分就可以正常显示出来了。
常用属性、事件和继承关系见下面类图：要实现的效果如下图（用XAML和C#实现同一效果）：XAML代码实现：C#代码实现：十三.布局综合应用前面通过十多个小节讲了一些常用Panel的基本用法，那我们这里就简单做一个综合的小例子，通过这个例子，旨在巩固前面的内容，也可以当做一个举一反三的过程。
要实现的效果如下图:XAML代码实现：其实用熟练上面的各个布局控件以后，你会发现布局UI是一件非常容易的事，遇到一个新的UI，你会发现任意一个Panel都可以实现你的需求。
当然对于较复杂且对要求很高的UI，我们也会自定义一些Panel，在下面我们就简单介绍一下自定义布局控件。
十四.自定义布局控件讲到自定义布局控件，我们必须得先谈一下在WPF中自定义控件，在WPF自定义控件你可以选择下图的一些基类作为继承对象，你也可以继承自已有的一些控件，这个就看你的需要了。