WPF基础之UI布局（wpf ui界面设计）

知识点：

WPF中的布局控件主要有以下几种：

StackPanel：栈面板，可以将元素排列成一行或者一列。其特点是：每个元素各占一行或者一列。

WrapPanel：环绕面板，将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从左至右的顺序进行。

DockPanel：停靠面板，定义一个区域，在此区域中，您可以使子元素通过描点的形式排列，这些对象位于 Children 属性中。

Grid：网格面板， Grid顾名思义就是“网格”，以表格形式布局元素，对于整个面板上的元素进行布局，它的子控件被放在一个一个事先定义好的小格子里面，整齐配列。 Grid和其他各个Panel比较起来，功能最多也最为复杂。

Canvas：画布面板，画布，用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种，直接将元素放到指定位置，主要来布置图面。

1、StackPanel

Orientation属性指定排列方式：

Vertical(垂直)【默认】，垂直排列时，每个元素都与面板一样宽。

Horizontal(水平)，水平排列时，每个元素都与面板一样高；

如果包含的元素超过了面板空间，它只会截断多出的内容。 元素的Margin属性用于使元素之间产生一定得间隔，当元素空间大于其内容的空间时，剩余空间将由HorizontalAlignment和 VerticalAlignment属性来决定如何分配。

首先是【默认】垂直（Vertical）情况下的布局：

<Window
    x:Class="LayoutSample.StackPanelSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:LayoutSample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="StackPanelSample"
    Width="800"
    Height="450"
    mc:Ignorable="d">
 
    <StackPanel Margin="5,5,5,5">
        <Button
            x:Name="button1"
            Margin="2,5,2,5"
            Content="按钮1" />
        <Button
            x:Name="button2"
            Margin="2,5,2,5"
            Content="按钮2" />
        <Button
            x:Name="button3"
            Margin="2,5,2,5"
            Content="按钮3" />
        <Button
            x:Name="button4"
            Margin="2,5,2,5"
            Content="按钮4" />
        <Button
            x:Name="button5"
            Margin="2,5,2,5"
            Content="按钮5" />
        <Button
            x:Name="button6"
            Margin="2,5,2,5"
            Content="按钮6" />
        <Button
            x:Name="button7"
            Margin="2,5,2,5"
            Content="按钮7" />
        <Button
            x:Name="button8"
            Margin="2,5,2,5"
            Content="按钮8" />
    </StackPanel>
</Window>

水平布局，示例代码，与垂直排列相同，只是多了一个Oriention属性：

  <StackPanel Margin="5,5,5,5" Orientation="Horizontal">

StackPanel其他常用属性：

HorizontalAlignment：水平对齐方式，值：Left，Center，Right，Stretch。

VerticalAlignment：垂直对齐方式，值：Bottom ， Center，Stretch，Top。

Visibility：设置StackPanel是否可见，值：Visible，Hidden，Collapsed。

Background：设置背景颜色，值为Bursh类型的枚举值。

Width，Height，MinWidth，MinHeight，MaxWidth，MaxHeight：分别用来设置StackPanel的宽，高，最小宽，最小高，最大宽，最大高。

WrapPanel【环绕面板】：

WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列，当长度或高度不够时就会自动调整进行换行，后续排序按照从上至下或从左至右的顺序进行。

水平排列：当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。

<Window
    x:Class="LayoutSample.WrapPanelSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:LayoutSample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="WrapPanelSample"
    Width="400"
    Height="350"
    mc:Ignorable="d">
 
    <WrapPanel>
        <Button
            x:Name="button1"
            Margin="2,5,2,5"
            Content="按钮1" />
        <Button
            x:Name="button2"
            Margin="2,5,2,5"
            Content="按钮2" />
        <Button
            x:Name="button3"
            Margin="2,5,2,5"
            Content="按钮3" />
        <Button
            x:Name="button4"
            Margin="2,5,2,5"
            Content="按钮4" />
        <Button
            x:Name="button5"
            Margin="2,5,2,5"
            Content="按钮5" />
        <Button
            x:Name="button6"
            Margin="2,5,2,5"
            Content="按钮6" />
        <Button
            x:Name="button7"
            Margin="2,5,2,5"
            Content="按钮7" />
        <Button
            x:Name="button8"
            Margin="2,5,2,5"
            Content="按钮8" />
    </WrapPanel>
</Window>

垂直布局，示例代码，与水平排列相同，只是多了一个Oriention属性：

<WrapPanel Margin="5,5,5,5" Orientation="Vertical">

WrapPanel其他常用属性，除了StackPanel属性常用属性，还有两个，如下所示：

ItemHeight：所有的元素都相同高度。

ItemWidth：所有的元素都相同宽度。

DockPanel【停靠面板】：

停靠面板类似于WinForm中控件的Dock属性。DockPanel会对每个子元素进行排序，并将根据指定的边进行停靠，多个停靠在同侧的元素则按顺序排序。

默认情况下，所有子元素都是靠左停靠【DockPanel.Dock=Left】

<Window
    x:Class="LayoutSample.DockPanelSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:LayoutSample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="DockPanelSample"
    Width="600"
    Height="450"
    mc:Ignorable="d">
 
    <DockPanel Margin="5,5,5,5">
        <Button
            x:Name="button1"
            Margin="2,5,2,5"
            Content="按钮1"
            DockPanel.Dock="Left" />
        <Button
            x:Name="button2"
            Margin="2,5,2,5"
            Content="按钮2"
            DockPanel.Dock="Top" />
        <Button
            x:Name="button3"
            Margin="2,5,2,5"
            Content="按钮3"
            DockPanel.Dock="Right" />
        <Button
            x:Name="button4"
            Margin="2,5,2,5"
            Content="按钮4"
            DockPanel.Dock="Bottom" />
        <Button
            x:Name="button5"
            Margin="2,5,2,5"
            Content="按钮5"
            DockPanel.Dock="Left" />
        <Button
            x:Name="button6"
            Margin="2,5,2,5"
            Content="按钮6"
            DockPanel.Dock="Top" />
        <Button
            x:Name="button7"
            Margin="2,5,2,5"
            Content="按钮7"
            DockPanel.Dock="Right" />
        <Button
            x:Name="button8"
            Margin="2,5,2,5"
            Content="按钮8"
            DockPanel.Dock="Bottom" />
        <Button
            x:Name="button9"
            Margin="2,5,2,5"
            Content="按钮9" />
    </DockPanel>
</Window>

DockPanel其他常用属性，除了StackPanel属性常用属性，还有一个，如下所示：

1. LastChildFill：最后一个子元素，是否填充剩余空间，默认为True。

设置不顶边：

<DockPanel Margin="5,5,5,5" LastChildFill="False">

Grid【网格面板】：

以表格形式布局元素，对于整个面板上的元素进行布局，要使用Grid，首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefinitions和 ColumnDefinitions元素，从而定义行数和列数。

放置在Grid面板中的控件元素都必须显示采用Row和Column附加属性定义其放置所在的行和列，这两个属性的值都是从0开始的索引数，如果没有显式设置任何行或列，Grid将会隐式地将控件加入在第0行第0列。

默认情况下，如果不设置Grid面板的行列宽，与高，则默认均分，且如果不显示设置子元素的大小，则默认填充。

<Window
    x:Class="LayoutSample.GridSample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:LayoutSample"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="GridSample"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button
            x:Name="button1"
            Grid.Row="0"
            Grid.Column="0"
            Margin="2,5,2,5"
            Content="按钮1" />
        <Button
            x:Name="button2"
            Grid.Row="0"
            Grid.Column="1"
            Margin="2,5,2,5"
            Content="按钮2" />
        <Button
            x:Name="button3"
            Grid.Row="0"
            Grid.Column="2"
            Margin="2,5,2,5"
            Content="按钮3" />
        <Button
            x:Name="button4"
            Grid.Row="1"
            Grid.Column="0"
            Margin="2,5,2,5"
            Content="按钮4" />
        <Button
            x:Name="button5"
            Grid.Row="1"
            Grid.Column="1"
            Margin="2,5,2,5"
            Content="按钮5" />
        <Button
            x:Name="button6"
            Grid.Row="1"
            Grid.Column="2"
            Margin="2,5,2,5"
            Content="按钮6" />
        <Button
            x:Name="button7"
            Grid.Row="2"
            Grid.Column="0"
            Margin="2,5,2,5"
            Content="按钮7" />
        <Button
            x:Name="button8"
            Grid.Row="2"
            Grid.Column="1"
            Margin="2,5,2,5"
            Content="按钮8" />
        <Button
            x:Name="button9"
            Grid.Row="2"
            Grid.Column="2"
            Margin="2,5,2,5"
            Content="按钮9" />
    </Grid>
</Window>

列宽和行高，分别可以在ColumnDefinition、RowDefinition里面指定Width、Height的值。

设置宽与高的几种方式：

固定值：设置具体的数字，单位为像素px。

Auto：根据子元素的大小，自动分配大小，刚好能够容纳子元素的内容。

星号*：根据比例自动分配剩余空间。

Grid面板其他属性，除了StackPanel属性常用属性，还有两个：

Grid.ColumnSpan：用于设置元素跨越的单元格列数。

Grid.RowSpan：用于设置元素跨越的单元格行数。

Canvas【画布面板】：

画布，用于完全控制每个元素的精确位置。他是布局控件中最为简单的一种，直接将元素放到指定位置，主要来布置图面。

Canvas通过设置Left，Top，Bottom，Right等属性的值，来设置子元素的位置，如果同时设置Canvas.Left和Canvas.Right属性，那么后者将会被忽略

    <Canvas>
        <Button x:Name="button1" Margin="2 5 2 5" Content="按钮1" Canvas.Left="20" Canvas.Top="50"/>
    </Canvas>

Canvas的其他属性，除了StackPanel的常用属性外，还有两个属性：

1. ClipToBounds：超出边界部分，是否需要进行剪裁。
2. Panel.ZIndex：用于设置子元素在Z方向上的顺序，值越大，越靠上。如果两个元素重叠，则ZIndex值小的将会被覆盖。