其他分享
首页 > 其他分享> > WPF高级教程(五)专题:Grid

WPF高级教程(五)专题:Grid

作者:互联网

前言

Grid是WPF中最强大的布局容器,值得我们专门使用一个专题来了解Grid的使用。

使用

行列定义

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
</Grid>

行列宽高设置

行列的宽高有三种设置方式,我们按照推荐使用的顺序进行说明:

可以拖动的分割条 GridSplitter

GridSplitter 使得用户可以动态的调整Grid每行列的尺寸,比如电脑的资源管理器的左右布局。

使用GridSplitter有下面一些指导原则:

属性说明:

设置GridSplitter的方式:

举例说明:

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition MinWidth="50"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
    <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
    <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
    <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
    <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch"
                  HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
</Grid>

两个Grid尺寸联动 共享尺寸组

如果两个Grid,其中一个Grid的一行或者一列尺寸改变的时候,另一个Grid的尺寸也得相应改变,就需要使用到共享尺寸组ShareSizeGroup

使用:

举例说明:

<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="label1"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition MinWidth="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch"
                  HorizontalAlignment="Center" ShowsPreview="True" DragIncrement="30"></GridSplitter>
    </Grid>
    <Grid ShowGridLines="True" Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="label1"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition MinWidth="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
    </Grid>
</Grid>

注意事项和技巧

聂14昊51 发布了25 篇原创文章 · 获赞 13 · 访问量 7642 私信 关注

标签:教程,Right,尺寸,GridSplitter,设置,Grid,WPF,Left
来源: https://blog.csdn.net/nxy_wuhao/article/details/104510526