1.Canvas 布局控件
Canvas面板是最轻量级的布局容器，它不会自动调整内部元素的排列和大小，不指定元素位置，元素将默认显示在画布的左上方。Canvas主要用来画图。Canvas默认不会自动裁剪超过自身范围的内容，即溢出的内容会显示在Canvas外面，这是因为Canvas的ClipToBounds属性默认值是false，我们可以显式地设置为true来裁剪多出的内容。下面XAML代码简单演示了Canvas面板的使用。
<Canvas Margin="10,10,10,10" Background="White" > <Rectangle Name="rect" Canvas.Left="50" Canvas.Top="50" Fill="Black" Stroke="Red" Width="200" Height="200"/> <Ellipse Name="el" Canvas.Left="50" Canvas.Top="50" Fill="Azure" Stroke="Green" Width="180" Height="180"/> </Canvas>
public partial class BUJU : Window { public BUJU() { InitializeComponent(); Canvas canv = new Canvas(); canv.Margin = new Thickness(10, 10, 10, 10); canv.Background = new SolidColorBrush(Colors.White); // 把canv添加为窗体的子控件 this.Content = canv; // Rectangle Rectangle rect = new Rectangle(); rect.Fill = new SolidColorBrush(Colors.Black); rect.Stroke = new SolidColorBrush(Colors.Red); rect.Width = 200; rect.Height = 200; rect.SetValue(Canvas.LeftProperty, (double)300); rect.SetValue(Canvas.TopProperty, (double)180); canv.Children.Add(rect); // Ellipse Ellipse el = new Ellipse(); el.Fill = new SolidColorBrush(Colors.Azure); el.Stroke = new SolidColorBrush(Colors.Green); el.Width = 180; el.Height = 180; el.SetValue(Canvas.LeftProperty, (double)160); el.SetValue(Canvas.TopProperty, (double)150); el.SetValue(Panel.ZIndexProperty, -1); canv.Children.Add(el); } }
2.StackPanel 布局控件
StackPanel就是将子元素按照堆栈的形式一一排列，可以通过设置StackPanel的Orientation属性设置两种排列方式：横排（Horizontal，该值为默认值）和竖排（Vertical）。纵向的StackPanel每个元素默认宽度与面板一样宽，反之横向是高度和面板一样高。如果包含的元素超过了面板控件，它会被截断多出的内容。可以通过Orientation属性来设置StackPanel是横排（设置其值为Vertical）还是竖排（设置其值为Horizontal）。下面XAML代码演示了StackPanel的使用：
<StackPanel Margin="10,10,10,10" Background="Azure"> <Label>A Button Stack</Label> <Button Content="Button 1"></Button> <Button>Button 2</Button> <Button>Button 3</Button> <Button Content="Button 4"></Button> </StackPanel>
public partial class BUJU : Window { public BUJU() { InitializeComponent(); StackPanel sp = new StackPanel(); sp.Margin = new Thickness(10, 10, 10, 10); sp.Background = new SolidColorBrush(Colors.Azure); sp.Orientation = Orientation.Vertical; // 把sp添加为窗体的子控件 this.Content = sp; // Label Label lb = new Label(); lb.Content = "A Button Stack"; sp.Children.Add(lb); // Button 1 Button btn1 = new Button(); btn1.Content = "Button 1"; sp.Children.Add(btn1); // Button 2 Button btn2 = new Button(); btn2.Content = "Button 2"; sp.Children.Add(btn2); // Button 3 Button btn3 = new Button(); btn3.Content = "Button 3"; sp.Children.Add(btn3); // Button 4 Button btn4 = new Button(); btn4.Content = "Button 4"; sp.Children.Add(btn4); } }
3.WrapPanel 布局控件
WrapPanel面板在可能的空间中，一次以一行或一列的方式布置控件。默认情况下，WrapPanel.Orientation属性设置为Horizontal，控件从左向右进行排列，然后再在下一行中排列，但你可将WrapPanel.Orientation设置为Vertical，从而在多个列中放置元素。与StackPanel面板不同，WrapPanel面板实际上用来控制用户界面中一小部分的布局细节，并非用于控制整个窗口布局。
<WrapPanel Margin="10" Background="Azure"> <Button VerticalAlignment="Top" Margin="5">Top Button</Button> <Button MinHeight="50">Tall Button 2</Button> <Button VerticalAlignment="Bottom">Bottom Button</Button> <Button>Stretch Button</Button> <Button VerticalAlignment="Center">Center Button</Button> <Button>Next Button</Button> </WrapPanel>
4.DockPanel 布局控件
DockPanel面板定义一个区域，在此区域中，你可以使子元素通过锚点的形式进行排列。DockPanel类似于WinForm中Dock属性的功能。对于在DockPanel中的元素的停靠可以通过Panel.Dock的附加属性来设置，如果设置LastChildFill属性为true，则最后一个元素将填充剩余的所有空间。
<DockPanel Margin="10" Background="Azure" LastChildFill="True"> <Button DockPanel.Dock="Top" Background="Red">Top Button</Button> <Button DockPanel.Dock="Left" Background="Gray">Left Button</Button> <Button DockPanel.Dock="Right" Background="Green">Right Button</Button> <Button DockPanel.Dock="Bottom" Background="White">Bottom Button</Button> <Button>Remaining Button</Button> </DockPanel>
5.Grid 布局控件
Grid比起其他Panel，功能是最多最为复杂的布局控件。它由<Grid.ColumnDefinitions>列元素集合和<Grid.RowDefinitions>行元素集合两种元素组成。而放在Grid面板中的元素必须显式采用附加属性定义其所在行和列，否则元素均默认放置在第0行第0列。下面XAML演示了Grid面板的使用：
<Grid Width="Auto" Height="Auto"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="120"/> <ColumnDefinition Width="150"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="2*"/> </Grid.ColumnDefinitions> <Rectangle Grid.Row="0" Grid.Column="0" Fill="Green" Margin="10,10,10,20"/> <Rectangle Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Fill="Blue" Margin="10,10,10,20"/> <Rectangle Grid.Row="0" Grid.Column="4" Fill="Orange"/> <Button Grid.Row="1" Grid.Column="0">Button 2</Button> <Rectangle Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Fill="Red"/> </Grid> <!--定义Grid的列宽和行高可采用固定、自动和按比例三种方式定义。 第一种：固定长度——宽度不够时，元素会被裁剪，单位是pixel; 第二种：自动长度——自动匹配行中最宽元素的高度。 第三种：比例长度——"*"表示占用剩余的全部宽度或高度，两行都是*，则将剩余高度平分。像上面的一个2*，一个*，表示前者2/3宽度。-->
6.UniformGrid 布局控件
UniformGrid是Grid简化版本，不像Grid面板，UniformGrid不需要预先定义行集合和列集合，反而，通过简单设置Rows和Columns属性来设置尺寸。每个单元格始终具有相同的大小。UniformGrid每个单元格只能容纳一个元素，将自动按照在其内部的元素个数，自动创建行和列，并通过保存相同的行列数。
<UniformGrid> <Ellipse Margin="10" Fill="Gray"/> <Ellipse Margin="10" Fill="Gray"/> <Ellipse Margin="10" Fill="Green"/> <Ellipse Margin="10" Fill="Green"/> <Ellipse Margin="10" Fill="Red"/> </UniformGrid>
7.ScrollViewer 控件
通常用户界面中的内容比计算机屏幕的显示区域大的时候，可以利用ScrollViewer控件可以方便地使应用程序中的内容具备滚动功能。具体的使用示例如下所示：
<Grid> <ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Auto"> <Rectangle Width="500" Height="400" Fill="Green"/> </ScrollViewer> </Grid>
8.布局综合运用
<DockPanel Width="Auto" Height="Auto" LastChildFill="True"> <!--顶部菜单区域--> <Menu Width="Auto" Height="20" Background="LightGray" DockPanel.Dock="Top"> <!--File菜单项--> <MenuItem Header="文件"> <MenuItem Header="保存"/> <Separator/> <MenuItem Header="退出"/> </MenuItem> <!--About 菜单项--> <MenuItem Header="帮助"> <MenuItem Header="关于本产品"/> </MenuItem> </Menu> <!--状态栏--> <StackPanel Width="Auto" Height="25" Background="LightGray" Orientation="Horizontal" DockPanel.Dock="Bottom"> <Label Width="Auto" Height="Auto" Content="状态栏" FontFamily="Arial" FontSize="12"/> </StackPanel> <!--Left--> <StackPanel Width="130" Height="Auto" Background="Gray" DockPanel.Dock="Left"> <Button Margin="10" Width="Auto" Height="30" Content="导航栏"/> <Button Margin="10" Width="Auto" Height="30" Content="导航栏"/> <Button Margin="10" Width="Auto" Height="30" Content="导航栏"/> </StackPanel> <!--Right--> <Grid Width="Auto" Height="Auto" Background="White"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="0"/> <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="0" Grid.Column="1"/> <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="0"/> <Rectangle Fill="Gray" Margin="10,10,10,10" Grid.Row="1" Grid.Column="1"/> </Grid> </DockPanel>
原文：http://www.cnblogs.com/lgxlsm/p/5104217.html