WPF之基础布局

在WPF中大小字母敏感.
WPF中的布局有六种，分别是StackPanel 栈面布局，WrapPanel环绕布局，DockPanel:停靠布局，Canvas：画布布局，Grid网格布局，
我们来简单的学习WPF的五大模块的布局：
一、StackPanel栈面布局，也可以叫栈面板
他有两种形式：第一种是垂直方向排列，第二种是水平方向排列
是否垂直或者水平Orientation=” Horizontal”或者Orientation=” Vertical”来确定的。
Horizontal：水平排列，Vertical：垂直排列
特点：每个元素个元素各占一行或者一列；如下图

左边是垂直排列加水平排列，右边是垂直排列 ，控件会交叠。前一个元素会被后一个元素发生重叠如左边

代码如下：

<!--XAML的代码—左代码-->
<StackPanel x:Name="stackpanel2" Orientation="Horizontal" VerticalAlignment="Top" >
                <GroupBox Header="网站分类">
                    <StackPanel Orientation="Horizontal">
                        <Button Content="电视剧" ></Button>
                        <Button Content="电影"></Button>
                        <Button Content="动漫"></Button>
                        <Button Content="娱乐"></Button>
                    </StackPanel>
                </GroupBox>
                <GroupBox Header="网站分类">
                    <StackPanel Orientation="Vertical">
                        <Button Content="电视剧" ></Button>
                        <Button Content="电影"></Button>
                        <Button Content="动漫"></Button>
                        <Button Content="娱乐"></Button>
                    </StackPanel>
                </GroupBox>
            </StackPanel>

<!--XAML的代码—左右代码-->  
  <StackPanel x:Name="stackpanel" Grid.Row="0" Grid.Column="1" Orientation="Vertical" DockPanel.Dock="Left" HorizontalAlignment="Left">
                <GroupBox Header="网站分类">
                    <StackPanel Orientation="Horizontal">
                        <Button Content="电视剧" ></Button>
                        <Button Content="电影"></Button>
                        <Button Content="动漫"></Button>
                        <Button Content="娱乐"></Button>
                    </StackPanel>
                </GroupBox>
            </StackPanel>

二、WrapPanel环绕布局，也可以叫环绕面板
他的排列也是两种：垂直和水平排列
当Orientation属性的值设置为 Horizontal：元素是从左向右排列的，然后自上至下自动换行。当Orientation属性的值设置为Vertical：元素是从上向下排列的，然后从左至右自动换行。
如果你将两种属性的值放在同一个窗体，他们会重叠在一起。如下图
图一是窗体高度较小时候的效果，图二是窗体高度较大时的效果

图一

图二

<!--XAML的代码—图一-->
<WrapPanel Orientation="Horizontal">
                <Button Width="100">按钮1</Button>
                <Button Width="100">按钮2</Button>
                <Button Width="100">按钮3</Button>
                <Button Width="100">按钮4</Button>
                <Button Width="100">按钮5</Button>
                <Button Width="100">按钮6</Button>
            </WrapPanel>
<!--XAML的代码—图二-->
            <WrapPanel Orientation="Vertical" DockPanel.Dock="Right">
                <Button Width="100">按钮1</Button>
                <Button Width="100">按钮2</Button>
                <Button Width="100">按钮3</Button>
                <Button Width="100">按钮4</Button>
                <Button Width="100">按钮5</Button>
                <Button Width="100">按钮6</Button>
            </WrapPanel>

三、DockPanel:停靠布局，也可以叫停靠面板
在一个区域内，进行元素排版，在属性默认情况，先行排布的占领大，他是绝不会交叠，所以一个元素排在左边，那左边都是他的，在第二个元素排在上边，那他的左边的那部分他是没有份的，第三个元素排布在右边，那他的上面的那部分是没有他的份，第四个元素排布在下面，那他只有贴着底部的份，左右是没有的。再加一个元素，那他最后元素填充剩余空间如图一，

如果你给他DockPanel属性LastChildFill设置为false，那他最后元素不填充剩余空间

<!--XAML代码—填充剩余空间-->
<DockPanel Grid.Row="1" Grid.Column="1" Width="Auto">
          <Button DockPanel.Dock="Left" Content="ButtonLeft"></Button>
          <Button DockPanel.Dock="Top" Content="ButtonTop"></Button>
          <Button DockPanel.Dock="Right" Content="ButtonRight"></Button>
          <Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button>
          <Button  Content="ButtonTop"></Button>
</DockPanel>
<!--XAML代码—不填充剩余空间-->
<DockPanel LastChildFill="False" Grid.Column="1" Grid.Row="2">
          <Button DockPanel.Dock="Left" Content="ButtonLeft"></Button>
          <Button DockPanel.Dock="Top" Content="ButtonTop"></Button>
          <Button DockPanel.Dock="Right" Content="ButtonRight"></Button>
          <Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button>
          <Button  DockPanel.Dock="Top" Content="最后一个Button不填充剩余空间"> </Button>
</DockPanel>

四、Canvas：画布布局，
注意：当用户改变窗体，Canvas也随之改变，Canvas允许子元素的部分或全部超过其边界，默认不会裁剪子元素，只有你设置属性将ClipToBounds属性设为true才会裁剪子元素
还有左和右不能同时出现，上和下也一样，左上右下来处理，左右同时出现右是无效的，上下同时出现下是无效的。

<!--XAML最原始结构-->
<Canvas Grid.Row="1" Grid.Column="0">
       <TextBox Width="100" BorderBrush="Blue"></TextBox>
       <TextBox Canvas.Left="100" Canvas.Top="50" Width="100" BorderBrush="Green"> </TextBox>
       <Button Height="20" Canvas.Right="50" Canvas.Bottom="10" Content="按钮"></Button> 
</Canvas>

五、Grid网格布局
Grid网格，以表格形式布局元素，对于整个面板上的元素进行布局，它的子控件被放在一个一个事先定义好的小格子里面，整齐配列，里面可以为空，同一个单元格中的子元素不会与其他元素交互布局，同一个单元格信息会重叠，在单元格里面你可以放其他的布局。
具体有多少行有多少列，都是RowDefinition和ColumnDefinition来控制。尽管Grid面板被设计成不可见的，但可将Grid.ShowGridLines属性设置为True，从而更清晰的观察Grid面板，方便调试，可以更准确地控制Grid面板如何选择列宽和行高。
网格布局，可以用比例，固定的尺寸，自动设置尺寸，Grid网格布局的单元格是0行0列开始，如在三行三列的中间那个单元格设置，一定加上Grid.Row=“1”,Grid.Column="1"如下图：

<!--XAML代码—填充剩余空间-->
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
               <Grid Grid.Row="0" Grid.Column="0">
            <Image x:Name="image1" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Source="E:\图片\027b40c5ed81d04f4d5bdd0e77ffc085.jpg"/>
        </Grid>
               <Grid Grid.Row="0" Grid.Column="2">
            <Image x:Name="image2" Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right"  Source="E:\图片\2b7be48e3fc9e9852ca77eb095660a24.jpg"/>
        </Grid>
            <Grid Grid.Row="2" Grid.Column="0">
            <Image x:Name="image3" Source="E:\图片\017a4be04d8c996c00321eeda39adac9.jpg" Width="AuTo" HorizontalAlignment="Left"/>
        </Grid>
        <Grid Grid.Row="2" Grid.Column="2">
            <Image x:Name="image4" HorizontalAlignment="Right" Source="E:\图片\d19a06aa828f25699073b439b29913bd.jpg" Width="AuTo"/>
        </Grid>
    </Grid>