WPF-面板

主界面是Grid，Grid里面可以嵌套Grid、Border和其它的容器。
做客户端界面时，先把主要的面板写出来，面板主要用Grid+Border。Grid负责面板的布局，Border负责每个小面板的样式，类似于CSS。

6种容器分为Grid（网格）、StackPanel（堆叠面板）、WrapPanel（换行面板）、DockPanel（停靠面板）、UniformGrid（均匀网络）、Canvas（画布）
1、Gird（社区网格员）：定义最底层的面板。
2、StackPanel（猪撞南墙也不拐弯式排列）：堆叠面板，元素在水平或垂直方向，在一个轴上，依次排列，比较简单，但是灵活性不高。适用于按顺序排列的布局。
3、WrapPanel（猪撞南墙时就自动拐弯式排列）：在StackPanel的基础上，元素会根据空间大小，自动换行，适用于动态数据排列、流式布局，但是元素的位置可能比较难掌控。
4、DockPanel（船到码头听话式排列）：码头停船式排布，元素根据上下左右的属性排列。
5、UniformPanel（希特勒阅兵式所有元素统一大小占据欧洲式排列）：自动将所有元素分配为大小一致的模式，并填充满全部空间，如果是奇数个数的元素，可能会剩一点空间。
6、Canvas（155榴弹炮精准坐标且自动派兵布阵式排列）：能够精准定位每个元素的位置，但不会根据界面放缩自适应定位，需要手动解决元素重叠问题。

示例 🚀：



<Grid.RowDefinitions>


</Grid.RowDefinitions>

<!--第一行-->
<Grid Grid.Row="0">
    <Border Background="AntiqueWhite"></Border>
</Grid>

<!--第二行-->
<Grid Grid.Row="1">
    <!--第一行设置两列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.2*"/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!--第二行第一列-->
    <Grid Grid.Column="0">
        <Border Background="Aquamarine"></Border>
    </Grid>

    <!--第二行第二列-->
    <Grid Grid.Column="1">
        <!--第二行第二列设置五列-->
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <!--第二行第二列设置三行-->
        <Grid.RowDefinitions>
            <RowDefinition Height="0.6*"></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <Border Background="Khaki" Margin="10"/>
        <Border Background="SteelBlue" Margin="10" Grid.Column="1"/>
        <Border Background="Honeydew" Margin="10" Grid.Column="2"/>
        <Border Background="RosyBrown" Margin="10" Grid.Column="3"/>
        <Border Background="Fuchsia" Margin="10" Grid.Column="4"/>

        <Border Background="Black" Margin="10" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3"/>
        <Border Background="Pink" Margin="10" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3"/>

        <Border Background="Ivory" Margin="10" Grid.Column="3" Grid.Row="1" Grid.ColumnSpan="2"/>
        <Border Background="AliceBlue" Margin="10" Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2"/>
    </Grid>
</Grid>

示例 🚀🚀：



<Grid.RowDefinitions>


</Grid.RowDefinitions>

<Grid Grid.Row="0">
    <Border Background="AliceBlue"></Border>
</Grid>


<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.7*"></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0" Margin="15">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Grid Background="Lavender" Margin="8"></Grid>
        <Grid Background="Tan" Grid.Column="1" Margin="8"></Grid>
        <Grid Background="Tan" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Margin="8"></Grid>
        <Grid Background="Magenta" Margin="8" Grid.Row="2" Grid.Column="0"></Grid>
        <Grid Background="PaleGoldenrod" Margin="8" Grid.Row="2" Grid.Column="1"></Grid>
        <Grid Background="Green" Margin="8" Grid.Row="3" Grid.Column="0"></Grid>
        <Grid Background="Red" Margin="8" Grid.Row="3" Grid.Column="1"></Grid>
    </Grid>
    <Grid Grid.Column="1" Margin="15">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="1.1*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Margin="8" Background="PaleTurquoise" Grid.Column="0" Grid.Row="0"></Grid>
        <Grid Margin="8" Background="SandyBrown" Grid.Column="1" Grid.Row="0"></Grid>
        <Grid Margin="8" Background="BlanchedAlmond" Grid.Column="2" Grid.Row="0"></Grid>
        
        <Grid Margin="8" Background="Khaki" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1"></Grid>
        <Grid Margin="8" Background="NavajoWhite" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="2"></Grid>
    </Grid>
</Grid>