网格可能是最复杂的面板类型。一个 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 是第二列,依此类推)。我也可以在第一个按钮上使用这个属性,但它会自动分配给第一列和第一行,这正是我们在这里想要的。
如您所见,控件占用了所有可用空间,这是网格排列其子控件时的默认行为。它通过将其子控件上的 HorizontalAlignment 和 VerticalAlignment 设置为 Stretch 来实现此目的。
在某些情况下,您可能希望它们只占用所需的空间和/或控制它们在网格中的放置方式。最简单的方法是直接在要操作的控件上设置 HorizontalAlignment 和 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下载: