Comment puis-je aligner rapidement les contrôles dans une fenêtre WPF?

Question

J'ai remarqué que le concepteur WPF fait un très mauvais travail sur l'alignement des contrôles, par rapport au concepteur Windows Forms.

Dans la fenêtre ci-dessous, je n'arrive pas à aligner chaque étiquette, de sorte que son texte se trouve sur la même ligne que le texte dans la zone de texte à côté. La première étiquette est correctement alignée, mais le concepteur WPF ne me donne pas de lignes d'alignement pour aligner correctement le deuxième et le troisième.

En outre, je ne peux pas aligner le bouton avec les étiquettes. La ligne d'accrochage place le bouton à quelques pixels vers la gauche par rapport aux textes d'étiquettes.

Je ne pouvais pas trouver un moyen rapide de faire cet alignement manuellement, en écrivant le code XAML, soit. Mettre les contrôles dans une grille et régler la marge de chaque contrôle prend du temps.

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

Est-ce que vous connaissez un moyen rapide d'aligner les contrôles dans les fenêtres WPF?

Answer 1

Je pensais que je peux éviter de faire l'alignement avec XAML codé à la main. Ce que je fini avec, est ce (les styles peuvent être réutilisés dans d'autres fenêtres):

<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

Utilisez une grille pour disposer vos contrôles, puis assurez-vous que vous n'avez aucun rembourrage sur les contrôles ... à moins bien sûr que vous voulez un rembourrage et vous assurer qu'ils sont tous égaux.

Un rapide Google recherche a donné un tutoriel de base:

Introduction to the WPF Grid Control

Answer 3

La meilleure façon est d'utiliser la grille ou DockPanel.
Dans la plupart des cas, les marges ne sont pas requises.

Answer 4

Utilisez un contrôle Panel approprié (StackPanel, DockPanel, etc.) pour l'alignement souhaité, plutôt que d'utiliser la grille par défaut. Le contrôle Grid facilite le déplacement des contrôles sur la fenêtre où vous voulez (sans être aussi déstructuré que le Canvas), mais ne fait aucune hypothèse sur le type de mise en page que vous essayez de construire. Si la mise en page que vous essayez de concevoir est, en fait, une «grille» (ou une table, par exemple des lignes et des colonnes), je suggère soit d'utiliser le contrôle UniformGrid (pour les lignes et les colonnes régulièrement espacées) avec hauteur/largeur définie par ligne/colonne et les marges sur tous les éléments mis à 0 (pour remplir entièrement sa cellule).

Answer 5

J'ai écrit un panneau personnalisé qui ne « Dimensionnement » (groupes de deux colonnes, toutes les étiquettes de même taille, tout est de la même taille, tout aligné, etc.), il est sur mon blog à: http://www.nbdtech.com/Blog/archive/2010/07/27/easy-form-layout-in-wpf-part-1-ndash-introducing-formpanel.aspx

Il est conçu pour être rapide et facile à utiliser lors de l'édition de XAML, je ne l'ai même pas essayé dans le concepteur.