WPF 入门教程Grid

网格可能是最复杂的面板类型。一个 Grid 可以包含多个行和列。您可以为每一行定义一个高度，为每一列定义一个宽度，以像素的绝对数量、可用空间的百分比或作为自动，其中行或列将根据内容。当其他面板无法完成工作时使用网格，例如，当您需要多列并且经常与其他面板结合使用时。

在最基本的形式中，Grid 将简单地采用您放入其中的所有控件，拉伸它们以使用最大的可用空间并将其放置在彼此的顶部：

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

最后一个控件获得了顶部位置，这意味着您甚至看不到第一个按钮。不过在大多数情况下并不是非常有用，所以让我们尝试划分空间，这正是网格做得很好的地方。我们通过使用 ColumnDefinitions 和 RowDefinitions 来做到这一点。在第一个示例中，我们将坚持使用列：

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
	</Grid>
</Window>

在这个例子中，我们简单地将可用空间分成两列，它们将使用“星形宽度”（这将在后面解释）平均共享空间。在第二个按钮上，我使用所谓的附加属性将按钮放置在第二列（0 是第一列，1 是第二列，依此类推）。我也可以在第一个按钮上使用这个属性，但它会自动分配给第一列和第一行，这正是我们在这里想要的。

如您所见，控件占用了所有可用空间，这是网格排列其子控件时的默认行为。它通过将其子控件上的 Horizo​​ntalAlignment 和 VerticalAlignment 设置为 Stretch 来实现此目的。

在某些情况下，您可能希望它们只占用所需的空间和/或控制它们在网格中的放置方式。最简单的方法是直接在要操作的控件上设置 Horizo​​ntalAlignment 和 VerticalAlignment。这是上述示例的修改版本：

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

从生成的屏幕截图中可以看出，第一个按钮现在位于顶部并居中。第二个按钮位于中间，与右侧对齐。

推荐一款WPF MVVM框架开源项目：Newbeecoder.UI

Newbeecoder.UI开源项目

Demo下载：

Newbeecoder.UI开源项目https://share.weiyun.com/py6W1dcK