WPF学习笔记布局

WPF布局原则

　　WPF窗口只能包含一个元素，如果要在WPF窗口中放置多个元素并创建更实用的界面，需要在窗口上放置一个容器，然后再添加其他的元素。尽管有多个容器可供选择，但是需要遵循以下几个规则：

1.不应显式设定元素(如控件)的尺寸，应当可以改变尺寸以适合它们的内容。

2.不应使用屏幕坐标指定元素的位置，应当由它们的容器，根据它们的尺寸、顺序以及其他特定于具体布局容器的信息进行安排。如果需要在元素之间添加空白控件，则可以使用Margin属性。(通过硬编码属性是非常不理想的，因为这样会限制本地化界面的能力，并且会使界面更难处理动态化内容。)

3.布局容器和它们的子元素共享可以使用空间。如果空间允许，布局容器会根据元素的内容尽可能的为所含元素设置尺寸。

4.可以嵌套布局容器。

布局容器

　　在WPF中，所有布局容器都派生自System.Windows.Controls.Panel抽象类的面板。有三个公共属性。Background：该属性是用于为面板背景着色的画刷。Children：该属性是存储条目的集合。包含更多的条目。IsItemsHost：该属性是一个BOOL值，如果用于显示一个ItemsControl控件相关联的项，那么该属性值为true。

　　其实就Panel类本身是没什么特别的，但是提供了大量可供继承自Panel的类。如：StackPanel、WarpPanel、DockPanel、Grid、UniformGrid、Canvas。下面会详细学习这些面板。

StackPanel面板：

　　这是一个水平或垂直的堆栈中放置元素。默认情况下，面板是自上而下排列元素，使每个元素的高度适合它的内容。或者可以通过Orientation属性设置将其水平排列。

　　其中对齐的方式可以用HorizontaAlignment属性来设置。label控件默认是Left、button控件是Stretch。边距可以使用Margin属性来设置可以为所有的边距设置相同的宽度，也可以分别设置不同的边距。在代码中使用Thickness(N)结构设置。每个元素都有Height和Width属性，用于指定元素的大小。

　　Border控件是一个添加背景或在其周围添加边框。其属性有Background：使用Brush对象设置边框中的背景。BorderBrush和BorderThickness使用Brush对象设置位于Border对象边缘的边框的颜色，并设置宽度。CornerRadius：该属性可以使边框有圆角。Padding：该属性在边框和内部的内容之间添加空间。

StackPanel小例子：

    <Border Margin="5" Background="LightYellow" BorderBrush="SteelBlue"
            BorderThickness="3,5,3,5" CornerRadius="3" VerticalAlignment="Top">
        <StackPanel Margin="3">
            <Label HorizontalAlignment="Center" Margin="3" MaxWidth="200" MinWidth="100">A Button Stack</Label>
            <Button HorizontalAlignment="Left" Margin="3" MaxWidth="200" MinWidth="100">Button1
            </Button>
            <Button HorizontalAlignment="Right" Margin="3" MaxWidth="200" MinWidth="100">Button2
            </Button>
            <Button Margin="3" MaxWidth="200" MinWidth="100">Button3
            </Button>
            <Button Margin="3" MaxWidth="200" MinWidth="100">Button4
            </Button>
        </StackPanel>
    </Border>

WrapPanel和DockPanel面板:

　　WrapPanel面板在可能的空间中，一次以一行或一列方式布置控件。默认情况下Orientation属性为：Horizontal；从左向右排列，然后再向下一行排列。还可以设置为Verti-cal，从而在多个列中放置元素。

WrapPanel小例子：

 <WrapPanel Margin="3">
            <Button VerticalAlignment="Top">Top Button
            </Button>
            <Button MinHeight="60">Tall Button
            </Button>
            <Button VerticalAlignment="Bottom">Bottom Button
            </Button>
            <Button>Stretch Button
            </Button>
            <Button VerticalAlignment="Center">Center Button
            </Button>
    </WrapPanel>

　　DockPanel面板沿着一条外边缘来拉伸所包含的控件。通过Dock的附加属性设置Top、Bottom、Left、Right来使控件靠边。其中LastChildFill属性如果设置为True，则告诉面板使最后一个元素占满所有空间。

DockPanel小例子：

  <DockPanel LastChildFill="False">
        <Button DockPanel.Dock="Top">Top Button
        </Button>
        <Button DockPanel.Dock="Bottom">Bottom Button
        </Button>
        <Button DockPanel.Dock="Left">Left Button
        </Button>
        <Button DockPanel.Dock="Right">Right Button
        </Button>
    </DockPanel>

Grid面板：

　　Grid面板是WPF中功能最强大的面板。它将元素分割到不可见的行列网格中。一般在一个单元格中放置一个元素比较合理。基于Grid面板的布局需要两个步骤，首先，选择希望使用的行和列的数量，可以通过Grid.ColumnDefinitions和Grid.RowDefinitions集合来创建。然后，为每一个包含的元素指定恰当的行和列，需要使用Row和Column附加属性，这两个属性值都是从0开始的索引数。从而在合适的位置放置元素。通过ShowGridLine属性可以看出网格线。同样这个面板和前面一样可以设置Width和Hight以及Margin。还可以通过两个附加属性RowSpan和ColumnSpan来跨越多个单元格。

Grid小例子：

    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox Margin="10" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">This is a Test</TextBox>
        <Button Margin="10,10,2,10" Padding="3" Grid.Row="1" Grid.Column="1">OK</Button>
        <Button Margin="0,10,12,10" Padding="3" Grid.Row="1" Grid.Column="2" Width="48">Cancel</Button>
    </Grid>

UniformGrid面板：

　　UniformGrid面板不需要预先定义行和列。通过Rows和Columns属性来设置其尺寸。，每个单元格始终大小相等，可用的空间被均分。这个面板较少使用，主要用于在一个规格的网格中快速的布局元素。

UniformGrid小例子：

 <UniformGrid Rows="2" Columns="2">
        <Button>Top Left</Button>
        <Button>Top Right</Button>
        <Button>Bottom Left</Button>
        <Button>Bottom Right</Button>
    </UniformGrid>

Canvas面板：

　　Canvas面板允许精确的放置坐标元素，同时它是最轻量级的布局容器。可用使用Canvas.Left以及Canvas.Top来设置元素的左边和上面离Canvs面板的单位数。可用使用Width和Height来设置子元素尺寸的大小。面板中如果有重叠元素，默认是后声明的会显示在前面，但可用通过ZIndex值来提高他的层次级别，高层次的显示在低层次的上面。

Canvas小例子:

 <Canvas>
        <Button Canvas.Left="10" Canvas.Top="10">10,10</Button>
        <Button Canvas.Left="120" Canvas.Top="30">120,30</Button>
        <Button Canvas.Left="60" Canvas.Top="80" Canvas.ZIndex="1" Width="50" Height="50">60,80</Button>
        <Button Canvas.Left="70" Canvas.Top="120" Width="100" Height="50">70,120</Button>
    </Canvas>