如何快速对齐 WPF 窗口中的控件？答案

【问题标题】：How can I quickly align the controls in a WPF window?如何快速对齐 WPF 窗口中的控件？
【发布时间】：2010-11-05 15:55:34
【问题描述】：

我注意到，与 Windows 窗体设计器相比，WPF 设计器在对齐控件方面做得很差。

在下面的窗口中，我无法对齐每个标签，使其文本与旁边文本框中的文本位于同一行。第一个标签正确对齐，但 WPF 设计器没有给我任何对齐线来正确对齐第二个和第三个标签。

另外，我无法将按钮与标签对齐。与标签文本相比，对齐线将按钮向左放置几个像素。

我也找不到手动执行此对齐的快速方法，也无法编写 XAML 代码。将控件放在网格中，并设置每个控件的边距非常耗时。

alt text http://img520.imageshack.us/img520/4843/wpfdesigneralignment.png

您知道在 WPF 窗口中对齐控件的快速方法吗？

【问题讨论】：

标签： c# wpf

【解决方案1】：

使用网格来布置控件，然后确保控件上没有任何填充...当然，除非您想要一些填充并且确保它们都是均匀的。

快速的 Google 搜索返回了一个基本教程：

Introduction to the WPF Grid Control

【讨论】：

+1。使用 Canvas 进行表单布局实际上是您在 WPF 中应该做的最后一件事。除非您绝对需要绝对定位控件。

【解决方案2】：

最好的方法是使用 Grid 或 DockPanel。
在大多数情况下，不需要保证金。

【讨论】：

【解决方案3】：

使用适当的面板控件（StackPanel、DockPanel 等）进行您想要的对齐，而不是使用默认的网格。 Grid 控件使您可以轻松地开始将控件拖动到您想要的任何位置（而不像 Canvas 那样非结构化），但不会对您实际尝试构建的布局类型做出任何假设。

如果您尝试设计的布局实际上是“网格”（或表格，例如行和列），我建议使用 UniformGrid 控件（用于均匀间隔的行和列）或带有每行/列的高度/宽度设置，所有元素的边距设置为 0（以完全填充其单元格）。

【讨论】：

在这种情况下，从截图来看，它似乎是一个网格。 StackPanels 的这种布局并不有趣 :)

【解决方案4】：

我认为我可以避免使用手动编码的 XAML 进行对齐。我最终得到的是这个（样式可以在其他窗口中重复使用）：

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" SizeToContent="WidthAndHeight">
    <Window.Resources>
        <Style x:Key="ControlStyle" TargetType="Control">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>
        <Style BasedOn="{StaticResource ControlStyle}" TargetType="Label">
            <Setter Property="Margin" Value="-4,0,0,0"/>
        </Style>
        <Style BasedOn="{StaticResource ControlStyle}" TargetType="TextBox">
            <Setter Property="Width" Value="120"/>
        </Style>
        <Style BasedOn="{StaticResource ControlStyle}" TargetType="Button">
            <Setter Property="MinWidth" Value="70"/>
        </Style>
        <Style TargetType="Grid">
            <Setter Property="Margin" Value="10,10,10,10"/>
        </Style>
        <Style x:Key="SeparatorColumn" TargetType="ColumnDefinition">
            <Setter Property="Width" Value="10"/>
        </Style>
        <Style x:Key="SeparatorRow" TargetType="RowDefinition">
            <Setter Property="Height" Value="3"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Style="{StaticResource SeparatorColumn}"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Style="{StaticResource SeparatorRow}"/>
            <RowDefinition/>
            <RowDefinition Style="{StaticResource SeparatorRow}"/>
            <RowDefinition/>
            <RowDefinition Style="{StaticResource SeparatorRow}"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Label Grid.Row="0" Grid.Column="0">Label:</Label>
        <TextBox Grid.Row="0" Grid.Column="2">TextBox</TextBox>
        <Label Grid.Row="2" Grid.Column="0">Label:</Label>
        <TextBox Grid.Row="2" Grid.Column="2">TextBox</TextBox>
        <Button Grid.Row="4" Grid.ColumnSpan="3">Button</Button>
        <Label Grid.Row="6" Grid.Column="0">Label:</Label>
        <TextBox Grid.Row="6" Grid.Column="2">TextBox</TextBox>
    </Grid>
</Window>

【讨论】：

您有没有找到更好、更完整的解决方案？

【解决方案5】：

我已经编写了一个自定义面板，它执行“表单布局”（两列组，所有标签相同大小，所有控件相同大小，所有内容对齐等），它在我的博客上：http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

它的设计目的是在编辑 XAML 时快速且易于使用，我什至没有在设计器中尝试过。

【讨论】：