3、WPF学习之-布局

一、基础知识

1、所有WPF布局容器都派生自System.Windows.Controls.Panel抽象类的面板；

2、WPF种核心布局面板有StackPanel(栈面板)、WrapPanel(环绕面板)、DockPanel(停靠面板)、Grid(网格面板)、UniformGrid(均匀面板)、Canvas(画布)

二、实例

1、StackPanel(栈面板)：特点是在水平或垂直的堆栈中放置元素，每个元素各占一行或者一列，这个布局容器通常用于大的、复杂的窗口中的一些小区域

默认情况下，StackPanel面板自上而下的顺序排列元素，使每个元素的高度适合它的内容

1.1垂直布局

<Grid>
        <StackPanel>
            <Button Name="btn1" Content="Button1" />
            <Button Name="btn2" Content="Button2" />
            <TextBox Name="txtDemo" Background="Red" />
            <CheckBox Name="cbDemo" Content="男" />
            <RadioButton Name="rbMan"
                         Content="男"
                         GroupName="rbSex" />
            <RadioButton Name="rbWomen"
                         Content="女"
                         GroupName="rbSex" />
        </StackPanel>
 </Grid>

1.2水平布局

<StackPanel Orientation="Horizontal">

2、WrapPanel(环绕面板)：WrapPanel面板在可能的空间中，以一次一行或一列的方式布局控件，在水平方向上，WrapPanel面板从左向右放置条目，然后在随后的行中放置元素，在垂直方向上，WrapPanel面板自上而下的列种放置元素，并使用附加的列放置剩余的条目。

通过Orientation属性来设置

<WrapPanel Orientation="Vertical">
          <Button Name="btn1" Content="btn1" Margin="4"/>
          <Button Name="btn2" Content="btn2" Margin="4"/>
          <Button Name="btn3" Content="btn3" Margin="4"/>
          <Button Name="btn4" Content="btn4" Margin="4"/>
          <Button Name="btn5" Content="btn5" Margin="4"/>
</WrapPanel>

3、DockPanel(停靠面板):根据容器的整个边界调整元素，默认情况下后添加的元素只能使用剩余的空间，最后一个元素可以占据所有剩余空间

<Grid>
        <DockPanel LastChildFill="false">
            <Button Name="btn1"
                    Content="Dock.Top"
                    DockPanel.Dock="Top" />
            <Button Name="btn2"
                    Content="Dock.Left"
                    DockPanel.Dock="Left" />
            <Button Name="btn3"
                    Content="Dock.Right"
                    DockPanel.Dock="Right" />
            <Button Name="btn4"
                    Content="Dock.Bottom"
                    DockPanel.Dock="Bottom" />
            <Button Name="btn5" Content="Dock" />
        </DockPanel>
 </Grid>

默认情况下最后一个元素填充剩余空间

4、Grid面板：通过使用对象填充Grid.RowDefinitions和Grid.ColumnDefinations集合来创建网格和行可以用ShowGridLines="True"来显示网格

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button Name="btn1"
                Grid.Row="0"
                Grid.Column="0"
                Content="第一行第一列" />
        <Button Name="btn2"
                Grid.Row="0"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Background="Green"
                Content="第一行第二、三列" />
        <Button Name="btn3"
                Grid.Row="1"
                Grid.RowSpan="2"
                Grid.Column="0"
                Background="Gray"
                Content="第二、三行第一列" />
        <Grid Grid.Row="1"
              Grid.Column="1"
              ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <TextBox Name="txtDemo"
                     Grid.Row="1"
                     Grid.Column="1"
                     Background="Azure"/>
        </Grid>
    </Grid>

View Code

三、混合实例

3.1类似连连看布局

源码下载：布局连连看.zip

3.2中国八大名菜系列布局

源码下载：PanelDemo.zip