WPF布局

1、WPF的UI布局：

    【1】布局的原则：

    1、如果做屏幕适应的程序，不要显示的设置元素(控件)的尺寸，一般可以设置最小和最大尺寸。

    2、不应使用屏幕坐标指定元素位置，元素的位置应该由它所在的容器决定。

    3、布局容器可以嵌套。

     【2】 布局的容器

        1、Grid面板

        2、StackPanel面板

        3、Canvas面板

        4、DockPanel面板

        5、WrapPanel面板

二、Grid面板(可以想象成Table)

     1、布局特点

      [1]、可以定义任意数量的行、列，并且轻松跨行、跨列。

      [2]、行、列高度或者宽度可以设置绝对值、相对比例、自动调整等方式。

    2、使用场合：

         [1]、UI的大布局设计。

         [2]、UI需要整体尺寸改变时。

      GridDemo:

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="25*"/>
            <RowDefinition Height="160*"/>
            <RowDefinition Height="25*"/>
        </Grid.RowDefinitions>
        <!--<Grid></Grid>-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110*"></ColumnDefinition>
            <ColumnDefinition Width="148*"></ColumnDefinition>
            <ColumnDefinition Width="65*"></ColumnDefinition>
            <ColumnDefinition Width="65*"></ColumnDefinition>


        </Grid.ColumnDefinitions>
        <Label x:Name="Label" Content="请输入您的留言：" Height="25" Margin="5,1" Grid.Column="0" Grid.Row="0" />
        <ComboBox x:Name="Cbbly" Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="3"  Margin="3" />
        <TextBox x:Name="Txtly" Grid.ColumnSpan="4" Grid.Row="1" Grid.Column="0" Margin="5"/>
        <Button x:Name="BtnSubmit" Content="提交" Grid.Column="2"  Grid.Row="2" Width="55" Height="25"/>
        <Button x:Name="BtnCancel" Content="取消" Grid.Column="3" Grid.Row="2" Width="55" Height="25"/>

    </Grid>

三、StackPanel面板

   1、布局特点：

   【1】 可以把内部元素在纵向或者横向上紧凑排列，形成栈式布局，通俗来说就是把元素堆到一块。

   【2】 当把前面的元素去掉后，后面的会整体向前移动，占领原有元素空间。

  2、适用场合

    【1】、同类型原型需要紧凑排列(比如制作菜单或者列表)

    【2】、移除其中的元素后能够自动补缺的布局，或者动画。

 3、三个属性：

     【1】、Orientation 属性：决定内部元素是横向还是纵向积累。

     【2】、HorizontalAlignment 属性：决定内部元素水平方向上的对齐方式。

     【3】、VerticalAlignment 属性：决定内部元素垂直方向上的对齐方式。

StackPanelDemo: <多个布局标签嵌套>

<Grid>
        <GroupBox Header="请选择你喜欢的课程名称" BorderBrush="Black" Margin="8">
            <StackPanel Margin="5">
                <CheckBox Content="A.C#面向对象编程"></CheckBox>


                <CheckBox Content="B.WCF通信框架" />


                <CheckBox Content="C.WPF快速编程"></CheckBox>
                <CheckBox Content="D.ASP.NET MVC"></CheckBox>
                
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                   
                    <Button Name="BtnSubmit" Content="提  交" Width="70" Margin="7" Click="BtnSubmit_Click" />
                    <Button Name="BtnReset" Content="重  置" Width="70"  Margin="7" Click="BtnReset_Click"/>
                </StackPanel>
            </StackPanel>
        </GroupBox>
    </Grid>

四、Canvas面板：

   【1】布局特点：

    1、在面板内部，我们可以通过x和y的坐标属性，直接控制控件的位置，非常类似winform中的top和left定位。

    2、我们可以直接通过拖放的形式选择控件的位置。

   【2】适用场合

    1、一经设计基本上不会有改动的小布局(系统登录或者密码修改等)

    2、需要使用绝对定位的布局。

    3、依赖于横纵坐标的动画。

CanvasDemo:

   <Grid>
        <Canvas Margin="10" >
            <Label x:Name="Lable" Content="用户名 :" Canvas.Left="26" Canvas.Top="30" />
            <TextBox x:Name="TxtUserName" VerticalContentAlignment="Center" HorizontalContentAlignment="Left" Height="25" Canvas.Left="85" Canvas.Top="30"  Width="150"/>
            <Label x:Name="Label" Content="密  码 ："  Canvas.Left="26" Canvas.Top="65"/>
            <PasswordBox x:Name="TxtUserPassWord" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Height="25" Canvas.Left="85" Canvas.Top="65" Width="150"/>
            <Button x:Name="BtnLogin" Content="登  录" Canvas.Left="70" Canvas.Top="115" Width="75"/>
            <Button x:Name="BtnCancel" Content="取  消" Canvas.Left="160" Canvas.Top="115" Width="75"/>
        </Canvas>

    </Grid>

五、DockPanel面板：

   1、布局特点

    根据Dock属性值，元素向指定方向累积，切分DockPanel内部剩余空间，就像传播停靠一样。

  2、使用场景

    需要自动填满剩余空间的布局。（最后一个元素自动填满DockPanel内的剩余空间。）

DockPanelDemo:

 <Grid>
        <DockPanel>
            <TextBox DockPanel.Dock="Top"  Height="30" BorderBrush="#FFEA0F0F"  />
            <TreeView DockPanel.Dock="Left" Width="100" BorderBrush="Goldenrod"></TreeView>
            <ListView DockPanel.Dock="Right" BorderBrush="Red"></ListView>
        </DockPanel>

    </Grid>

六、WrapPanel面板(流式布局,类似Web中div的float）

   1、布局特点：

     【1】、在流延伸的方向上会排列尽可能多的控件，排列不下的控件会新起一行。

     【2】、使用Orientaion属性控制流延伸的方向。

   2、适用场合：

     需要根据容器大小动态排列控件的场合。

WrapPanelDemo:

<Grid>
        <WrapPanel>
            <Button Content="01" Height="30" Width="30" Margin="5" />
            <Button Content="02" Height="30" Width="30" Margin="5" />
            <Button Content="03" Height="30" Width="30" Margin="5" />
            <Button Content="04" Height="30" Width="30" Margin="5" />
            <Button Content="05" Height="30" Width="30" Margin="5" />
            <Button Content="06" Height="30" Width="30" Margin="5" />
            <Button Content="07" Height="30" Width="30" Margin="5" />
            <Button Content="08" Height="30" Width="30" Margin="5" />
            <Button Content="09" Height="30" Width="30" Margin="5" />
            <Button Content="10" Height="30" Width="30" Margin="5" />
            <Button Content="11" Height="30" Width="30" Margin="5" />
            <Button Content="12" Height="30" Width="30" Margin="5" />
            <Button Content="13" Height="30" Width="30" Margin="5" />
            <Button Content="14" Height="30" Width="30" Margin="5" />
            <Button Content="15" Height="30" Width="30" Margin="5" />
            <Button Content="16" Height="30" Width="30" Margin="5" />
            <Button Content="17" Height="30" Width="30" Margin="5" />
            <Button Content="18" Height="30" Width="30" Margin="5" />
            <Button Content="19" Height="30" Width="30" Margin="5" />
            <Button Content="20" Height="30" Width="30" Margin="5" />
            <Button Content="21" Height="30" Width="30" Margin="5" />
        </WrapPanel>

    </Grid>