《WPF编程宝典·C#2010版》阅读笔记(2)·布局

1、StackPanel

StackPanel是一个相当简单的容器，此处不在赘述。

注意到的是：

<Border Margin="5" Padding="5" Background="LightYellow"
        BorderBrush="SteelBlue" BorderThickness="3,5,3,5" CornerRadius="3"
        VerticalAlignment="Top">
    <StackPanel>
        <Button Margin="3">One</Button>
        <Button Margin="3">Two</Button>
        <Button Margin="3">Three</Button>
    </StackPanel>
</Border>

这里在多个元素中设置了标准化的属性（Margin="3"），有时候我们需要更方便的方法设置它。这个时候可以使用“样式”。

另外，Border是一个装饰元素，装饰元素是特定类型的元素，通常用于在一个对象周围添加某些种类的图形装饰。所有装饰元素都继承自System.Windows.Controls.Decorator类。大多数装饰元素被设计用于特定的控件。例如，Button控件使用ButtonChrome装饰元素，以获取其特有的圆角和阴影背景效果，而ListBox使用ListBoxChrome装饰元素。还有两个更通用的元素，当构造用户界面时它们非常有用：这里用到的Border以及没有用到的ViewBox元素。

2、WrapPanel

WrapPanel在可能的空间中，一次以一行（默认）或一列的方式布置控件。然后再在下一行或者下一列排列。每一行的高度都被设置为刚行所包含元素中高度最高的那个。WrapPanel是唯一不可被Grid替代的。

3、DockPanel（略）

4、Grid

1. 调整行和列（分为绝对值，相对值（用"*"来度量，"*"是1倍，"2*"就是2倍）和"Auto"）
2. 布局舍入。解决宽度不能平分的时候边缘会模糊的问题（譬如宽度是奇数，但你设置了将2者平分。<Grid UseLayoutRounding="True">
3. 分割窗口，使用GridSplitter。

       <Grid ShowGridLines="True">
           <Grid.RowDefinitions>
               <RowDefinition></RowDefinition>
               <RowDefinition></RowDefinition>
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
               <ColumnDefinition MinWidth="100"></ColumnDefinition>
               <ColumnDefinition Width="Auto"></ColumnDefinition>
               <ColumnDefinition MinWidth="50"></ColumnDefinition>           
           </Grid.ColumnDefinitions>
           <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
           <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
           <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
           <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
           
           <GridSplitter Grid.Row="0" Grid.Column="1" 
                         Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"
                         ShowsPreview="False"></GridSplitter>
       </Grid>

   其中GridSplitter的对齐方式决定了分隔条是水平的还是竖直的。对于水平分隔条，则VerticalAlignment的属性为"Center"（默认）。竖直分隔条的HorizontalAlignment为"Center"

   上面的代码中，尽管GridSplitter只在上面的单元格中，但它的左右拖动还是会改变整个Grid的布局。如果只想改变上面。就应该上下分别再嵌入一个Grid。

4. 共享尺寸组。有时候两个Grid的各自一列需要有同样的尺寸。这个时候可以使用共享尺寸组。

   <Grid Grid.IsSharedSizeScope="True" Margin="3">
       <Grid.RowDefinitions>
           <RowDefinition></RowDefinition>
           <RowDefinition Height="auto"></RowDefinition>
           <RowDefinition></RowDefinition>
       </Grid.RowDefinitions>
       <Grid Margin="3" Background="LightYellow" ShowGridLines="True">
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
               <ColumnDefinition Width="Auto"></ColumnDefinition>
               <ColumnDefinition></ColumnDefinition>
           </Grid.ColumnDefinitions>
           <Label Margin="5">A very long bit of text</Label>
           <Label Grid.Column="1" Margin="5">More Text</Label>
           <TextBox Grid.Column="2" Margin="5">A textbox</TextBox>
       </Grid>
       <Grid Margin="3" Grid.Row="2"  Background="LightYellow" ShowGridLines="True">
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="Auto" SharedSizeGroup="TextLabel"></ColumnDefinition>
               <ColumnDefinition></ColumnDefinition>
           </Grid.ColumnDefinitions>
           <Label Margin="5">A even longer bit of text. It's true</Label>
           <TextBox Grid.Column="1" Margin="5">A textbox</TextBox>
       </Grid>
   </Grid

   需要明确地在顶部Grid里指出Grid.IsSharedSizeScope="True"。

5、Canvas和InkCanvas。通过坐标定位。