C# WPF入门学习主线篇（十六）—

C# WPF入门学习主线篇（十六）—— Grid布局容器

news2024/11/26 14:47:07

C# WPF入门学习主线篇（十六）—— Grid布局容器

欢迎来到C# WPF入门学习系列的第十六篇。在前几篇文章中，我们已经探讨了 Canvas、StackPanel、WrapPanel 和 DockPanel 布局容器及其使用方法。本篇博客将介绍另一种功能强大且灵活的布局容器——Grid。通过本文，您将学习如何使用 Grid 来创建复杂且灵活的用户界面布局，并了解 Grid 的常见属性和应用场景。

什么是Grid布局容器？

Grid 是WPF中最常用的布局容器之一，用于创建基于行和列的布局。Grid 允许开发者定义任意数量的行和列，并将子控件放置在这些行列的交点上。它非常适合用于创建复杂的用户界面布局，因为它提供了对控件位置和大小的精确控制。

Grid的常见属性

Grid 有几个重要的属性和附加属性，可以帮助开发者灵活地控制子控件的排列方式：

RowDefinitions: 定义 Grid 的行集合。
ColumnDefinitions: 定义 Grid 的列集合。
Grid.Row: 附加属性，指定子控件所在的行。
Grid.Column: 附加属性，指定子控件所在的列。
Grid.RowSpan: 附加属性，指定子控件跨越的行数。
Grid.ColumnSpan: 附加属性，指定子控件跨越的列数。

使用Grid布局容器的示例

基本使用示例

以下是一个简单的XAML代码示例，展示了如何使用 Grid 创建一个包含三行两列的布局：

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid Example" Height="350" Width="525">
    <Grid>
        <!-- 定义三行两列的 Grid 布局 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <!-- 将控件放置在 Grid 的特定行和列中 -->
        <TextBlock Text="Label 1" Grid.Row="0" Grid.Column="0" Margin="5"/>
        <TextBox Grid.Row="0" Grid.Column="1" Margin="5"/>
        <TextBlock Text="Label 2" Grid.Row="1" Grid.Column="0" Margin="5"/>
        <TextBox Grid.Row="1" Grid.Column="1" Margin="5"/>
        <Button Content="Submit" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Margin="5" HorizontalAlignment="Center"/>
    </Grid>
</Window>

动态设置Grid的示例

在后台代码中，您可以动态设置或修改 Grid 的行和列定义，并添加子控件：

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // 动态创建一个 Grid 并设置其属性
            Grid dynamicGrid = new Grid
            {
                Background = new SolidColorBrush(Colors.LightGray)
            };

            // 动态创建行和列定义
            dynamicGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });
            dynamicGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
            dynamicGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });

            dynamicGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Auto) });
            dynamicGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });

            // 动态创建控件并设置其 Grid 位置
            TextBlock label1 = new TextBlock { Text = "Dynamic Label 1", Margin = new Thickness(5) };
            Grid.SetRow(label1, 0);
            Grid.SetColumn(label1, 0);

            TextBox textBox1 = new TextBox { Margin = new Thickness(5) };
            Grid.SetRow(textBox1, 0);
            Grid.SetColumn(textBox1, 1);

            TextBlock label2 = new TextBlock { Text = "Dynamic Label 2", Margin = new Thickness(5) };
            Grid.SetRow(label2, 1);
            Grid.SetColumn(label2, 0);

            TextBox textBox2 = new TextBox { Margin = new Thickness(5) };
            Grid.SetRow(textBox2, 1);
            Grid.SetColumn(textBox2, 1);

            Button submitButton = new Button { Content = "Dynamic Submit", Margin = new Thickness(5), HorizontalAlignment = HorizontalAlignment.Center };
            Grid.SetRow(submitButton, 2);
            Grid.SetColumn(submitButton, 0);
            Grid.SetColumnSpan(submitButton, 2);

            // 将控件添加到 Grid
            dynamicGrid.Children.Add(label1);
            dynamicGrid.Children.Add(textBox1);
            dynamicGrid.Children.Add(label2);
            dynamicGrid.Children.Add(textBox2);
            dynamicGrid.Children.Add(submitButton);

            // 将动态创建的 Grid 添加到窗口的内容中
            this.Content = dynamicGrid;
        }
    }
}