Come posso allineare rapidamente i controlli in una finestra WPF?

Question

Ho notato che il progettista WPF fa un lavoro molto scarso nell'allineare i controlli, rispetto al designer di Windows Form.

Nella finestra di seguito, non riesco ad allineare ogni etichetta, in modo che il suo testo sia sulla stessa riga del testo nella casella di testo accanto. La prima etichetta è allineata correttamente, ma il progettista WPF non mi fornisce linee di allineamento per allineare correttamente la seconda e la terza.

Inoltre, non riesco ad allineare il pulsante con le etichette. La linea di snap mette il pulsante di alcuni pixel verso sinistra rispetto ai testi delle etichette.

Non sono riuscito a trovare un modo rapido per eseguire manualmente questo allineamento, scrivendo il codice XAML. Mettere i controlli in una griglia e impostare il margine di ciascun controllo richiede molto tempo.

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

Sai un modo veloce per allineare i controlli nelle finestre WPF?

Answer 1

Ho pensato di evitare l'allineamento con XAML codificato a mano. Quello che ho finito con, è questo (gli stili possono essere riutilizzati in altre finestre):

<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

Utilizzare una griglia per disporre i controlli quindi assicurarsi di non avere alcuna spaziatura sui controlli ... a meno che, naturalmente, non si voglia un po 'di padding e si assicuri che siano tutti uguali.

Una rapida ricerca di Google ha restituito un tutorial di base:

Introduction to the WPF Grid Control

Answer 3

Il modo migliore è quello di utilizzare Griglia o DockPanel.
Nella maggior parte dei casi i margini non sono richiesti.

Answer 4

Utilizzare un pannello di controllo appropriato (StackPanel, DockPanel, ecc.) Per l'allineamento che si desidera, anziché utilizzare la griglia di default. Il controllo Grid semplifica l'avvio dei controlli di trascinamento sulla finestra dove vuoi (senza essere abbastanza non strutturato come il Canvas), ma non fa alcuna ipotesi sul tipo di layout che stai effettivamente cercando di costruire.

Se il layout che si sta tentando di progettare è, in effetti, una "griglia" (o tabella, ad esempio righe e colonne), suggerisco di utilizzare il controllo UniformGrid (per righe e colonne equidistanti) o la griglia con altezza/larghezza impostata per riga/colonna e margini su tutti gli elementi impostati su 0 (per riempire completamente la sua cella).

Answer 5

ho scritto un pannello personalizzato che fa "layout di forma" (gruppi di due colonne, tutte le etichette stesse dimensioni, tutto controlla le stesse dimensioni, tutto allineato, ecc.), è sul mio blog: http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

È progettato per essere veloce e facile da usare quando si modifica XAML, non l'ho nemmeno provato nel designer.