Wpf布局之Grid面板！

发布于：2025-07-04 ⋅ 阅读:(14) ⋅ 点赞:(0)

前言

Wpf布局之Grid面板！

一、引言

Grid面板可以通过设置行和列将窗口划分成不同大小的区域！

二、使用步骤

使用Grid面板时，需要先使用Grid.RowDefinitions和ColumnDefinitions来创建网格的行和列。再使用RowDefinition和ColumnDefinition来创建所需要的行和列的数量，例如下面创建的两行两列。

<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
</Grid>

如何将其他控件放置到划分好的区域内？
可以使用Row和Column两个附加属性来控制其他控件所放的区域，如果不设置这两个附加属性则默认在第一个区域也就时Grid.Row=“0” Grid.Column="0"的区域

<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Width="100" Height="100" Content="按钮1"/>
    <Button Grid.Row="0" Grid.Column="1" Width="100" Height="100" Content="按钮2"/>
    <Button Grid.Row="1" Grid.Column="0" Width="100" Height="100" Content="按钮3"/>
    <Button Grid.Row="1" Grid.Column="1" Width="100" Height="100" Content="按钮4"/>
</Grid>

其效果如图
在这里插入图片描述
通常Grid的划分行和列的线是看不见的如果需要让划分的线显示出来可以将ShowGridLines的属性设置为true。

<Grid ShowGridLines="True">
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Width="100" Height="100" Content="按钮1"/>
    <Button Grid.Row="0" Grid.Column="1" Width="100" Height="100" Content="按钮2"/>
    <Button Grid.Row="1" Grid.Column="0" Width="100" Height="100" Content="按钮3"/>
    <Button Grid.Row="1" Grid.Column="1" Width="100" Height="100" Content="按钮4"/>
</Grid>

效果如图
在这里插入图片描述
上面设置的行和列的高宽都是等比例划分的，这样显然很难适应实际的业务需求，Grid面板提供三种尺寸设置方式：
一：绝对设置尺寸，直接设置行和列的宽高。
二：自动设置尺寸，每行每列刚好够放下其他控件。
三：按比例设置尺寸，按比例将空间分割到一组行和列中。
通过设置ColumnDefinition对象的Width属性和RowDefinition对象的Height属性来设置单元格的宽高。
方式一绝对设置尺寸

<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition Height="150" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Width="100" Height="100" Content="按钮1"/>
    <Button Grid.Row="0" Grid.Column="1" Width="100" Height="100" Content="按钮2"/>
    <Button Grid.Row="1" Grid.Column="0" Width="100" Height="100" Content="按钮3"/>
    <Button Grid.Row="1" Grid.Column="1" Width="100" Height="100" Content="按钮4"/>
</Grid>

效果如图
在这里插入图片描述
方式二自动设置尺寸
将RowDefinition 对象的Height属性设置为auto或者将ColumnDefinition对象的Width属性设置为auto，就可以更具区域内的内容大小自动调整为刚刚好放下的状态。

<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition Height="auto" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Width="100" Height="100" Content="按钮1"/>
    <Button Grid.Row="0" Grid.Column="1" Width="100" Height="100" Content="按钮2"/>
    <Button Grid.Row="1" Grid.Column="0" Width="100" Height="100" Content="按钮3"/>
    <Button Grid.Row="1" Grid.Column="1" Width="100" Height="100" Content="按钮4"/>
</Grid>

效果如图
在这里插入图片描述
方式三按比例设置尺寸
在使用按比例设置尺寸需要使用到*号，星号前面的数字代表着权重，例如下面的代码，将第一行的高设置为第二行的两倍，将第一列的宽设置为第二列的3倍。

<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition Height="2*" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Width="100" Height="100" Content="按钮1"/>
    <Button Grid.Row="0" Grid.Column="1" Width="100" Height="100" Content="按钮2"/>
    <Button Grid.Row="1" Grid.Column="0" Width="100" Height="100" Content="按钮3"/>
    <Button Grid.Row="1" Grid.Column="1" Width="100" Height="100" Content="按钮4"/>
</Grid>

效果如图
在这里插入图片描述
这个倍数也可以是小数

<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition Height="2.5*" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Width="100" Height="100" Content="按钮1"/>
    <Button Grid.Row="0" Grid.Column="1" Width="100" Height="100" Content="按钮2"/>
    <Button Grid.Row="1" Grid.Column="0" Width="100" Height="100" Content="按钮3"/>
    <Button Grid.Row="1" Grid.Column="1" Width="100" Height="100" Content="按钮4"/>
</Grid>

效果如图
在这里插入图片描述
Grid的创建的单元格还可以合并，也就是跨行和跨列，只需要使用附加属性RowSpan和ColumnSpan。下面的代码将第3个按钮的改成占两列。

<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition Height="2.5*" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Width="100" Height="100" Content="按钮1"/>
    <Button Grid.Row="0" Grid.Column="1" Width="100" Height="100" Content="按钮2"/>
    <Button Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"   Content="按钮3"/>
    <!--<Button Grid.Row="1" Grid.Column="1" Width="100" Height="100" Content="按钮4"/>-->
</Grid>

效果如图
在这里插入图片描述
下面代码将第一个按钮改成占两行

<Grid>
    <!--定义行-->
    <Grid.RowDefinitions>
        <RowDefinition Height="2.5*" />
        <RowDefinition />
    </Grid.RowDefinitions>
    <!--定义列-->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button Grid.RowSpan="2" Content="按钮1"/>
    <Button Grid.Row="0" Grid.Column="1" Width="100" Height="100" Content="按钮2"/>
    <!--<Button Grid.Row="1" Grid.Column="0" Grid.RowSpan="2"   Content="按钮3"/>-->
    <Button Grid.Row="1" Grid.Column="1" Width="100" Height="100" Content="按钮4"/>
</Grid>

效果如图
在这里插入图片描述
分割窗口
Grid想要分割窗口需要使用到GridSplitter类，他一般位于需要分割窗口的中间，例如下面代码GridSplitter 放在第二列的位置。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="2*"/>
        
    </Grid.ColumnDefinitions>
    <TextBlock Background="Red" FontSize="28" Foreground="White" TextWrapping="Wrap" Text="11111111111111111111111111111111111111111111111111111111111111111"/>
    <GridSplitter Grid.Column="1" Width="15" HorizontalAlignment="Center"/>
    <TextBlock Grid.Column="2" Background="Blue" FontSize="28" Foreground="White" TextWrapping="Wrap" Text="333333333333333333333333333333333333333333333333333333333"/>
</Grid>

效果如图
在这里插入图片描述
上面的拖拽是尺寸立马变换，没有预览。
想要加入预览效果只需要将ShowsPreview属性设置为"True"。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="auto"/>
        <ColumnDefinition Width="2*"/>
        
    </Grid.ColumnDefinitions>
    <TextBlock Background="Red" FontSize="28" Foreground="White" TextWrapping="Wrap" Text="11111111111111111111111111111111111111111111111111111111111111111"/>
    <GridSplitter ShowsPreview="True" Grid.Column="1" Width="15" HorizontalAlignment="Center"/>
    <TextBlock Grid.Column="2" Background="Blue" FontSize="28" Foreground="White" TextWrapping="Wrap" Text="333333333333333333333333333333333333333333333333333333333"/>
</Grid>

效果如图，可以看到尺寸没有立马变化，而是多了一条预览线。
在这里插入图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布