2021-08-17 WPF控件专题 Grid 控件详解

Posted 2021-09-06 微软MVP Eleven

1.Grid 控件介绍

网格—网格面板 类似于Winform中TableLayoutPanel ，行和列方式布局页面或页面中某一块区域，

单元格 —一个元素或多个元素，容器：多个控件 StackPanel/WrapPanel/Grid等

可以使边框可见，方便布局可视。

网格结构：定义行和列，RowDefinitions 集合中定义 3行 ColumnDefinitions 定义3列

尺寸表示：

指定元素位置：Row Column RowSpan ColumnSpan

Grid最复杂一种布局，很强大、很灵活的布局控件

整个页面格局复杂，或与DockPanel结合， （自适应 DockPanel 某一个块里布局复杂、内容多 Grid)

页面布局：DockPanel StackPanel /WrapPanel Grid GroupBox Expander Frame TabControl

2.具体案例

<Grid ShowGridLines="False" Background="LightBlue">
    <!--定义Grid的行和列-->
    <!--尺寸  3种：(1)固定  30    (2)按比例 1* 2*   atuo 按内容自动调整
    没有设置height width，平均分配
-->

    <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100"/>
            <ColumnDefinition />
            <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <!--元素位置的指定   指定该元素的所在的行索引和列索引,从0开始，如果没有指定，默认就是第一个单元格 0 0，Row  Column    跨行或跨列  RowSpan   ColumnSpan-->
    <TextBox Grid.Column="1"></TextBox>
    <TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Background="LightGray" />
    <Label Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Background="YellowGreen" Content="用户信息："/>
    <Label Grid.Row="3" Grid.Column="1" Content="用户名：" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,9.2,0,0"/>
    <Label Grid.Row="3" Grid.Column="1" Content="密码："  HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,40,0,0"/>
    <WrapPanel Grid.Column="1" Grid.Row="2" Background="SeaShell" ItemHeight="30" ItemWidth="40" >
            <Button Content="btn1"/>
            <Button Content="btn1" />
            <Button Content="btn1"/>
            <Button Content="btn1" />
            <Button Content="btn1"/>
            <Button Content="btn1" />
            <Button Content="btn1"/>
            <Button Content="btn1" />
            <Button Content="btn1"/>
            <Button Content="btn1" />
            <Button Content="btn1"/>
            <Button Content="btn1" />
    </WrapPanel>
    <Grid Grid.Column="2" Grid.Row="2" Background="Olive">
            <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Button Content="btn22"/>
            <Button Content="btn32" Grid.Column="1"/>
            <StackPanel Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal" Background="LavenderBlush">
                    <Label Content="113"/>
                    <Label Content="113"/>
                    <Label Content="113"/>
            </StackPanel>
    </Grid>
</Grid>