Grid 网格布局

最新推荐文章于 2024-11-25 20:32:08 发布

与你相遇Summer

最新推荐文章于 2024-11-25 20:32:08 发布

阅读量369

点赞数

CC 4.0 BY-SA版权

分类专栏： WPF

本文链接：https://blog.youkuaiyun.com/weixin_44546563/article/details/90612697

WPF 专栏收录该内容

11 篇文章

订阅专栏

Grid是一种网格布局，允许在定义的行和列中精确放置控件。它可以定义任意数量的行和列，支持绝对值、相对比例或自动调整的尺寸设定，并能设置元素的跨行、跨列以及对齐方式。这种布局适用于UI框架设计、元素对齐和响应式设计。通过学习和实践，可以创建出复杂的、美观的页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Grid

简介：Grid是网格的意思，这里指“网格布局”，它的子控件被放在一个个实现定义的小格子里面，整齐配列。Grid和其他Panel比较起来，功能最多也最为复杂。
要使用Grid，首先要向RowDefinitions和ColumnDefinitions 属性中添加一定数量的 RowDefinitions和ColumnDefinitions 元素，从而定义行数和列数。
Grid的组成并非简单的添加属性标记来区分行列，这也使得用户在实际应用中可以具体到某一单元格中，所以布局起来效果很好，很精细。
特点：
1、可以定义任意数量的行和列，非常灵活。
2、行的高度和列的宽度可以使用绝对值、相对比例、或自动调整的方式进行精确设定，并可以设置最大和最小值。
3、内部元素可以设置自己所在的行和列，还可以设置自己纵向跨几行，横向跨几列。
4、可以设置Children元素的对齐方向。
Grid适用场合有：
UI布局的大框架设计；
大量UI元素需要成行或者成列对齐的情况；
UI尺寸改变的时候，元素需要保留固有的宽度和高度比例。

通过一段时间的学习，利用学到的Grid面板知识点制作了一个精美的页面，以下是效果图：
在这里插入图片描述
接着是代码：

<Window x:Class="Button.Main"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowStyle="ThreeDBorderWindow"
        WindowStartupLocation="CenterScreen"
        Icon="G:\Hi\Button\Button\Images\png-0011.ico"
        Title="Let's go !" Height="350" Width="525">
<!--自定义样式 设置个Style-->
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="FontFamily" Value="楷体"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <!--<Setter Property="Background" Value="Red"/>-->
                    <!--Button 的 IsMouseOver 改变不了Background-->
                    <Setter Property="FontSize" Value="11"/>
                    <Setter Property="Foreground" Value="Yellow"/>
                </Trigger>
            </Style.Triggers>
        </Style>
</Window.Resources>

    <Grid Background="#FFDDDDDD" >
        <Grid.RowDefinitions>
            <!--三行-->
            <RowDefinition Height="2*"/>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="20*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!--五列-->
            <ColumnDefinition Width="27*"/>
            <ColumnDefinition Width="50*"/>
            <ColumnDefinition Width="30*"/>
            <ColumnDefinition Width="18*"/>
            <ColumnDefinition Width="18*"/>
        </Grid.ColumnDefinitions>

        <!--设置第0行的颜色 Grid.ColumnSpan="5"就是跨列5列的意思，并不是从0开始算-->
        <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="5">
            <Grid.Background>
                <LinearGradientBrush>
                    <GradientStop Color="#FFD43CE0" Offset="0.006"/>
                    <GradientStop Color="#FFC64DD0" Offset="0.572"/>
                    <GradientStop Color="#FFCD4FE3" Offset="0.092"/>
                    <GradientStop Color="#FF6C6DE7" Offset="1"/>
                    <GradientStop Color="#FFEB88DA" Offset="0.612"/>
                    <GradientStop Color="#FFE0D53C" Offset="0.754"/>
                    <GradientStop Color="#FF4BE17D" Offset="0.228"/>
                </LinearGradientBrush>
            </Grid.Background>
        </Grid>

        <!--注意Grid.Row；Grid.Column的使用 -->
        <TextBlock Grid.Row="0" Text="東 鋒" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Wheat" FontFamily="楷体"/>

        <!--设置第二行里面的值-->
        <Button Grid.Row="1" Grid.Column="0" Content="G"/>
        <Button Grid.Row="1" Grid.Column="1" Content="o"/>
        <Button Grid.Row="1" Grid.Column="2" Content="!"/>
        <Button Grid.Row="1" Grid.Column="3" Content="!"/>
        <Button Grid.Row="1" Grid.Column="4" Content="!"/>

        <!-- Grid.Row="2" 第3行；Grid.Column="0"第1列 -->
        <Grid Grid.Row="2" Grid.Column="0" PreviewDragOver="Grid_PreviewDragOver" >
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="0.2*"/>
                <RowDefinition Height="5.33*"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Content="更新" MouseDoubleClick="Button_MouseDoubleClick"/>
            <Button Grid.Row="1" Content="维护" />
            <Button Grid.Row="2" Content="事件"/>
            <Button Grid.Row="3" Content="功能" />
            <Button Grid.Row="4" Content="日志" />
            <Button Grid.Row="5" Content="发布时间"/>
            <Button Grid.Row="6" >
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF33BC33" Offset="1"/>
                        <GradientStop Color="#FF42D03E" Offset="1"/>
                        <GradientStop Color="#FE1DABAE" Offset="1"/>
                        <GradientStop Color="#FE47E234" Offset="0.708"/>
                        <GradientStop Color="#FE35DFCA" Offset="0.206"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </Grid>

        <!-- 设置第3行第2列的值-->
        <Grid Grid.Row="2" Grid.Column="1" PreviewDragOver="Grid_PreviewDragOver">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="0.2*"/>
                <RowDefinition Height="5.33*"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Content="全面优化" MouseDoubleClick="Button_MouseDoubleClick" FontFamily="楷体"/>
            <Button Grid.Row="1" Content="二维码难识别问题" />
            <Button Grid.Row="2" Content="双击事件" />
            <Button Grid.Row="3" Content="整体改善" />
            <Button Grid.Row="4" Content="20020"/>
            <Button Grid.Row="5" Content="1997" />
            <Button Grid.Row="6" >
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF33BC33" Offset="1"/>
                        <GradientStop Color="#FF42D03E" Offset="1"/>
                        <GradientStop Color="#FE1DABAE" Offset="1"/>
                        <GradientStop Color="#FE47E234" Offset="0.708"/>
                        <GradientStop Color="#FE35DFCA" Offset="0.206"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </Grid>

<!-- 设置第3行第3列的值-->
        <Grid Grid.Row="2" Grid.Column="2">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="6*"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Grid.RowSpan="3" Content="版本跨越式升级">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF33BC33" Offset="1"/>
                        <GradientStop Color="#FF42D03E" Offset="1"/>
                        <GradientStop Color="#FE1DABAE" Offset="1"/>
                        <GradientStop Color="#FE47E234" Offset="0.708"/>
                        <GradientStop Color="#FE35DFCA" Offset="0.206"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
            <Button Grid.Row="3" Content="Good"  FontFamily="楷体"/>
            <Button Grid.Row="4" Content="界面别具一格" Grid.RowSpan="3" >
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFCE3B9F" Offset="0.003"/>
                        <GradientStop Color="#FF4275ED" Offset="1"/>
                        <GradientStop Color="#FE842FA2" Offset="0.99"/>
                        <GradientStop Color="#FED62ED7" Offset="0.657"/>
                        <GradientStop Color="#FED643C7"/>
                        <GradientStop Color="#FEAA0CCE" Offset="0.327"/>
                        <GradientStop Color="#FEB54EDF" Offset="0.917"/>
                        <GradientStop Color="#FEE160E2"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </Grid>

<!-- 设置第3行第4列的值-->
        <Grid Grid.Row="2" Grid.Column="3">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="6*"/>
            </Grid.RowDefinitions>

            <Button Grid.Row="0" >
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF33BC33" Offset="1"/>
                        <GradientStop Color="#FF42D03E" Offset="1"/>
                        <GradientStop Color="#FE1DABAE" Offset="1"/>
                        <GradientStop Color="#FE47E234" Offset="0.708"/>
                        <GradientStop Color="#FE35DFCA" Offset="0.206"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
            <Button Grid.Row="1" Content="1997 约定 " Grid.RowSpan="2" />
            <Button Grid.Row="3" Content="Time"/>
            <Button Grid.Row="4" Content="1997 约定 " Grid.RowSpan="2" />
            <Button Grid.Row="6" >
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFCE3B9F" Offset="0.003"/>
                        <GradientStop Color="#FF4275ED" Offset="1"/>
                        <GradientStop Color="#FE842FA2" Offset="0.99"/>
                        <GradientStop Color="#FED62ED7" Offset="0.657"/>
                        <GradientStop Color="#FED643C7"/>
                        <GradientStop Color="#FEAA0CCE" Offset="0.327"/>
                        <GradientStop Color="#FEB54EDF" Offset="0.917"/>
                        <GradientStop Color="#FEE160E2"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </Grid>

<!-- 设置第3行第5列的值-->
        <Grid Grid.Row="2" Grid.Column="4">
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="6*"/>
            </Grid.RowDefinitions>
            <Button Grid.Row="0" Grid.RowSpan="2">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF33BC33" Offset="1"/>
                        <GradientStop Color="#FF42D03E" Offset="1"/>
                        <GradientStop Color="#FE1DABAE" Offset="1"/>
                        <GradientStop Color="#FE47E234" Offset="0.708"/>
                        <GradientStop Color="#FE35DFCA" Offset="0.206"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
            <Button Grid.Row="2" Content="充滿驚喜"/>
            <Button Grid.Row="3" Content="!"/>
            <Button Grid.Row="4" Content="期待!"/>
            <Button Grid.Row="5" Grid.RowSpan="2">
                <Button.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFCE3B9F" Offset="0.003"/>
                        <GradientStop Color="#FF4275ED" Offset="1"/>
                        <GradientStop Color="#FE842FA2" Offset="0.99"/>
                        <GradientStop Color="#FED62ED7" Offset="0.657"/>
                        <GradientStop Color="#FED643C7"/>
                        <GradientStop Color="#FEAA0CCE" Offset="0.327"/>
                        <GradientStop Color="#FEB54EDF" Offset="0.917"/>
                        <GradientStop Color="#FEE160E2"/>
                    </LinearGradientBrush>
                </Button.Background>
            </Button>
        </Grid>
    </Grid>
</Window>