如何快速對齊WPF窗口中的控件？

Question

我注意到，與Windows窗體設計器相比，WPF設計器在對齊控件方面做得很差。

在下面的窗口中，我無法對齊每個標籤，以便其文本與旁邊文本框中的文本位於同一行。第一個標籤正確對齊，但WPF設計器不會給我任何捕捉線以正確對齊第二個和第三個。

另外，我無法將按鈕與標籤對齊。與標籤文本相比，捕捉線將按鈕向左放置幾個像素。

我無法找到一種快速的方法來手動執行此對齊操作，編寫XAML代碼。將控件放在網格中，並設置每個控件的邊距是非常耗時的。

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

你知道一個快速的方式對齊的控件在WPF窗口？

Answer 1

我想我可以避免使用手工編碼的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> 

Answer 2

使用網格佈局您的控件，然後確保您沒有任何控件上的填充...除非您需要一些填充並確保它們全部均勻。

快速谷歌搜索返回的基礎教程：

Introduction to the WPF Grid Control

Answer 3

最好的辦法是使用網格或DockPanel中。
在大多數情況下，邊距不是必需的。

Answer 4

使用適當的Panel控件（StackPanel，DockPanel等）進行你想要的對齊，而不是使用默認的Grid。網格控件可以很容易地將控件拖動到任何你想要的窗口上（而不像Canvas那樣非結構化），但不會對你實際嘗試構建什麼樣的佈局做出任何假設。

如果您嘗試設計的佈局實際上是一個「網格」（或表格，例如行和列），我建議使用UniformGrid控件（對於均勻間隔的行和列）或網格將每行/列的高度/寬度設置爲0，並將所有元素的邊距設置爲0（以完全填充其單元格）。

Answer 5

我已經寫了，做「形式佈局」（兩列一組，所有標籤同樣大小的自定義面板，所有控件大小相同，對齊方式等），它位於我的博客上：http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

它被設計爲在編輯XAML時快速且易於使用，我甚至沒有在設計器中嘗試過。