Jak szybko wyrównać kontrolki w oknie WPF?

Question

Zauważyłem, że projektant WPF wykonuje bardzo kiepskie zadanie polegające na dopasowywaniu elementów sterujących w porównaniu do projektanta Windows Forms.

W oknie poniżej nie mogę wyrównać każdej etykiety, aby jej tekst znajdował się w tym samym wierszu co tekst w polu tekstowym obok. Pierwsza etykieta jest poprawnie wyrównana, ale projektant WPF nie daje mi żadnych linii snap do prawidłowego wyrównania drugiego i trzeciego.

Ponadto nie mogę wyrównać przycisku z etykietami. Linia przyciągania umieszcza przycisk o kilka pikseli w lewo w porównaniu z tekstem etykiety.

Nie mogłem znaleźć szybkiego sposobu ręcznego wyrównania, wpisując kod XAML. Umieszczenie kontrolek w siatce i ustawienie marginesu każdej kontrolki jest czasochłonne.

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

Znasz szybki sposób, aby dostosować kontrole w oknach WPF?

Answer 1

Pomyślałem, że mogę uniknąć wyrównania z ręcznie kodowanym XAML. Co skończyło się, jest to (style mogą być ponownie wykorzystane w innych oknach):

<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

Użyj siatki, aby rozmieścić kontrolki, a następnie upewnij się, że nie masz dopełnienia na elementach sterujących ... chyba że chcesz trochę dopełnienia i upewnij się, że wszystkie są wyrównane.

Szybkie Google Search powrócił podstawowy poradnik:

Introduction to the WPF Grid Control

Answer 3

Najlepszym sposobem jest użycie siatki lub DockPanel.
W większości przypadków marginesy nie są wymagane.

Answer 4

Użyj odpowiedniej kontrolki panelu (StackPanel, DockPanel, itp.) Dla żądanego wyrównania, zamiast używać domyślnej siatki. Kontrolka Grid ułatwia rozpoczęcie przeciągania kontrolek do okna, gdziekolwiek chcesz (bez bycia tak niestrukturalnym, jak płótno), ale nie ma żadnych założeń na temat tego, jaki układ faktycznie próbujesz zbudować.

Jeśli układ, który próbujesz zaprojektować, jest w rzeczywistości "siatką" (lub tabelą, np. Wierszami i kolumnami), sugeruję użycie formantu UniformGrid (dla równomiernie rozmieszczonych wierszy i kolumn) lub siatki z ustawieniem wysokość/szerokość na wiersz/kolumnę i marginesy dla wszystkich elementów ustawionych na 0 (aby całkowicie wypełnić swoją komórkę).

Answer 5

ja napisałem panel niestandardowy układ, który oznacza „formy” (grupy dwóch kolumnach, wszystkie etykiety samej wielkości, wszystkie kontrolują ten sam rozmiar, wszystko wyrównane itd.), jest na moim blogu pod adresem: http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

Został zaprojektowany tak, aby był szybki i łatwy w użyciu podczas edycji XAML, nawet go nie wypróbowałam w projektancie.