【愚公系列】2023年09月 WPF控件专题 Grid控件详解

(文章目录)

前言

WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。

原生控件是由Microsoft提供的内置控件，如Button、TextBox、Label、ComboBox等。这些控件都是WPF中常见的标准用户界面元素。

自定义控件则允许开发人员使用XAML和C#等编程语言来创建个性化的用户界面元素。自定义控件可以根据需求提供更多的功能和自定义化选项，以及更好的用户体验。

一、Grid控件详解

WPF中的Grid控件是一种布局控件，用于实现灵活的网格布局，可以将控件以行和列的形式排列，可以用于创建复杂的用户界面。

Grid控件有以下重要属性：

• RowDefinitions：定义行的高度。
• ColumnDefinitions：定义列的宽度。
• Grid.Row和Grid.Column：指定控件所在的行和列。
• Grid.RowSpan和Grid.ColumnSpan：控件占用的行数和列数。
• Grid.IsSharedSizeScope：指示是否应在网格中共享相同大小的列或行。

以下是一个简单的Grid控件示例：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height=Auto/>
        <RowDefinition Height=Auto/>
        <RowDefinition Height=*/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=Auto/>
        <ColumnDefinition Width=*/>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row=0 Grid.ColumnSpan=2 Text=Header FontSize=20/>
    <Label Grid.Row=1 Grid.Column=0 Content=Name:/>
    <TextBox Grid.Row=1 Grid.Column=1/>
    <Label Grid.Row=2 Grid.Column=0 Content=Address:/>
    <TextBox Grid.Row=2 Grid.Column=1/>
</Grid>

此示例定义了3行和2列的网格，第一行和第二行的高度是自适应的，第三行占据剩余空间。第一行跨越了两列，其中包含一个标题文本块。第二行包含一个标签和一个文本框。第三行也包含一个标签和一个文本框。

1.属性介绍

WPF中Grid控件常用的属性如下：

1. ColumnDefinitions：列定义集合，设置每一列的宽度、最小宽度、最大宽度等。

2. RowDefinitions：行定义集合，设置每一行的高度、最小高度、最大高度等。

3. ShowGridLines：是否显示网格线。

4. Grid.Column：指定子元素在哪一列。

5. Grid.ColumnSpan：指定子元素跨越几列。

6. Grid.Row：指定子元素在哪一行。

7. Grid.RowSpan：指定子元素跨越几行。

8. Grid.IsSharedSizeScope：表示是否启用共享大小。

9. VerticalAlignment：竖直对齐方式。

10. HorizontalAlignment：水平对齐方式。

2.常用场景

WPF中Grid控件是一种非常常用的布局容器，常见的使用场景包括：

1. 网格布局：将控件按照行和列的方式排列，使用Grid控件可以轻松实现网格布局的效果；
2. 自适应布局：Grid控件可以自适应控件的大小和位置，使得布局更加灵活；
3. 复杂布局：可以在Grid控件中嵌套子控件，实现复杂的布局效果，如数据表格、表单等；
4. 控件对齐：可以使用Grid控件中的对齐属性，将控件对齐到指定的位置；
5. 嵌套布局：可以使用多个Grid控件来实现嵌套布局，使得布局更加灵活和多样化。

WPF中Grid控件的应用非常广泛，可以适用于各种布局需求。

3.具体案例

<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>