WPF-布局

        WPF使用具有各自布局逻辑的不同容器（Container）安排布局，抵制基于坐标的布局，更灵活且自适应。

        类似Web的流（flow）布局，可以更好的表现需要语言切换的界面。

一、理解WPF布局

        WPF布局特点：存在内部自适应计算，过程分为测量和排列两个阶段。

        设计思路：尽量不要显式地设定元素尺寸和位置坐标，尽可能的发挥其处理动态内容的优越性。

       核心布局面板：StackPanel、WrapPanel、DockPanel、Grid、UniformGrid、Canvas等。

       通过布局容器之间相互嵌套，复杂的组合实现复杂的页面。

       Grid是WPF中最强大的布局容器。

二、Grid搭配StackPanel的布局案例

<Window x:Class="Layout布局.MainWindow"
        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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Layout布局"
        mc:Ignorable="d"
        Title="MainWindow" SizeToContent="WidthAndHeight">
    <Grid>
        <!--这里定义Grid表格的行列数量及宽高-->
        <Grid.RowDefinitions>
           <RowDefinition Height="2*"/><!--这里可以按比例设置高度或宽度-->
           <RowDefinition Height="3*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>

        <Border Grid.Row="0" Grid.Column="0" Padding="5" CornerRadius="5" BorderBrush="Black" BorderThickness="2">
            <StackPanel  Background="AliceBlue">
                <Button>111</Button>
                <Button Content="222"/>
                <!--Button文字设置的不同方式 Content="XXX"-->
                <Button>333</Button>
                <Button>444</Button>
            </StackPanel>
        </Border>
        
        <StackPanel Grid.Row="0" Grid.Column="1" Background="AntiqueWhite">
            <Button Margin="5">111</Button>
            <!--外边距Margin设置 接收Thickness对象参数 3中写法 ①上左下右一致：单一数值参数 ②-->
            <Button Content="222"/>
            <Button Margin="5,0">333</Button>
            <Button >444</Button>
            <Button  Margin="0,5">555</Button>
            <Button >666</Button>
        </StackPanel>
        <!--这里设置水平拉伸铺满Stretch 所以背景色铺满datagrid的整个cell-->
        <StackPanel Grid.Row="1" Grid.Column="0"  Orientation="Horizontal" Background="Aqua" HorizontalAlignment="Stretch">
            <Button>111</Button>
            <Button Content="222"/>
            <Button>333</Button>
            <Button>444</Button>
        </StackPanel>

        <StackPanel Grid.Row="1" Grid.Column="1" Background="Aquamarine" VerticalAlignment="Bottom">
            <Button MaxWidth="60">111</Button><!--最大最小值的设定-->
            <Button MaxWidth="70" Content="222"/>
            <Button MinHeight="50">333</Button>
            <Button >444</Button>
            <Button >555</Button>
            <Button >666</Button>
        </StackPanel>
    </Grid>
</Window>

 

        自动改变窗口大小

        Window.SizeToContent属性的设置：Manual、Height、Width、WidthAndHeight

        指定窗口将如何自动调整自身大小以适合其内容大小

        Border控件

        Border控件是装饰元素，继承自System.Windows.Controls.Decorator类，可以设置圆角效果。

三、WrapPanel和DockPanel

        这两种Panel是对StackPanel的功能补充。

        WrapPanel是唯一一个不能被Grid灵活替代的Panel。

        WrapPanel是可换行Panel

        DockPanel是边界锚定Panel

四、文档大纲

        在Visual Studio中查看文档大纲，更直观方便的了解页面布局。

        视图->其他窗口->文档大纲