Grid 网格布局

最新推荐文章于 2024-06-19 23:31:32 发布

与你相遇Summer

最新推荐文章于 2024-06-19 23:31:32 发布

阅读量294

点赞数

分类专栏： WPF

本文链接：https://blog.csdn.net/weixin_44546563/article/details/90612697

版权

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

摘要由CSDN通过智能技术生成

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