Comment ancrer une zone de texte dans wpf?

Question

J'ai une fenêtre avec des onglets. Sur l'un des onglets, j'ai une disposition comme ci-dessous. (En fait c'est plus compliqué, j'ai 4 zones de texte dans une rangée, et j'ai plus de lignes.) Comment puis-je faire la 3ème zone de texte avoir la largeur de l'étiquette + la largeur de la zone de texte ci-dessus, c'est les avoir correctement alignés? Le problème est que WPF élargit la 3ème zone de texte, quand je tape du texte dedans. L'utilisation de nombres codés en dur pour les tailles défait tout le but de WPF. Je pourrais le faire 10 fois plus vite dans Windows Forms que dans WPF. Y a-t-il un meilleur moyen, que d'utiliser une grille pour chaque ensemble de petites zones de texte consécutives, d'avoir à sauter les grandes de la grille, car les mettre en désordre tout.

alt text http://img28.imageshack.us/img28/3958/wpfanchor.png

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <Style TargetType="{x:Type Label}"> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
     </Style> 
     <Style TargetType="{x:Type TextBox}"> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
      <Setter Property="Margin" Value="3"/> 
     </Style> 
     <Style x:Key="SmallTextBox" TargetType="{x:Type TextBox}" 
       BasedOn="{StaticResource {x:Type TextBox}}"> 
      <Setter Property="Width" Value="50"/> 
     </Style> 
    </Window.Resources> 

    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" 
       Width="{Binding ElementName=grid,Path=ActualWidth}" 
       Grid.IsSharedSizeScope="True"> 
     <Grid Name="grid" HorizontalAlignment="Left"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" SharedSizeGroup="c1"/> 
       <ColumnDefinition Width="Auto" SharedSizeGroup="c2"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 

      <Label Content="Foo:"/> 
      <TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/> 
      <Label Grid.Row="1" Content="Foobar:"/> 
      <TextBox Grid.Row="1" Grid.Column="1" 
        Style="{StaticResource SmallTextBox}"/> 
     </Grid> 

     <TextBox Grid.Row="1"/> 

     <Grid Name="grid2" HorizontalAlignment="Left"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto" SharedSizeGroup="c1"/> 
       <ColumnDefinition Width="Auto" SharedSizeGroup="c2"/> 
      </Grid.ColumnDefinitions> 

      <Label Content="Bar:"/> 
      <TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/> 
     </Grid> 
    </StackPanel> 
</Window> 

EDIT: Voici la solution basée sur la réponse de Julien Lebosquain:

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525"> 
    <Window.Resources> 
     <Style TargetType="{x:Type Label}"> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
     </Style> 
     <Style TargetType="{x:Type TextBox}"> 
      <Setter Property="VerticalAlignment" Value="Center"/> 
      <Setter Property="Margin" Value="3"/> 
     </Style> 
     <Style x:Key="SmallTextBox" TargetType="{x:Type TextBox}" 
       BasedOn="{StaticResource {x:Type TextBox}}"> 
      <Setter Property="Width" Value="50"/> 
     </Style> 
    </Window.Resources> 

    <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left" 
       Width="{Binding ElementName=grid,Path=ActualWidth}"> 
     <Grid Name="grid"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 

      <Label Content="Foo:"/> 
      <TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/> 
      <Label Grid.Row="1" Content="Foobar:"/> 
      <TextBox Grid.Row="1" Grid.Column="1" 
        Style="{StaticResource SmallTextBox}"/> 
      <TextBox Grid.Row="2" Grid.ColumnSpan="2"/> 
      <Label Grid.Row="3" Content="Bar:"/> 
      <TextBox Grid.Row="3" Grid.Column="1" 
        Style="{StaticResource SmallTextBox}"/> 
     </Grid> 
    </StackPanel> 
</Window> 

Answer 1

<TextBox Grid.Row="1" Grid.ColumnSpan="2" /> 

Answer 2

j'aurais une grille avec 4 lignes. Et avoir un ColumnSpan sur la 3ème rangée. Cela signifie également que vous n'avez pas besoin de SharedSizeGroups.

<Grid Name="grid" HorizontalAlignment="Left"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 

     <Label Content="Foo:"/> 
     <TextBox Grid.Column="1" Style="{StaticResource SmallTextBox}"/> 
     <Label Grid.Row="1" Content="Foobar:"/> 
     <TextBox Grid.Row="1" Grid.Column="1" 
       Style="{StaticResource SmallTextBox}"/> 

     <TextBox Grid.Row="2" Grid.ColumnSpan="2" /> 

     <Label Content="Bar:"/> 
     <TextBox Grid.Row="3" Grid.Column="1" Style="{StaticResource SmallTextBox}"/> 
    </Grid> 

Answer 3

Je pense que vous l'avez obtenu à l'envers. Ce n'est pas la plus grande zone de texte qui gâche tout. C'est le fait que les petites zones de texte ont une taille fixe qui les empêche de se comporter comme la plus grande. Vous avez une contradiction ici: l'utilisation d'un panneau de pile qui signifie "prend la largeur de mes enfants", Width=Auto qui a le même comportement, mais vous ne voulez pas que votre panneau de pile se développe.

Quelque part plus haut dans l'arborescence visuelle, vous devez spécifier une largeur ou utiliser un contrôle dont le comportement de dimensionnement doit prendre tout l'espace, comme Grid.

Personnellement, je vais avec cette solution:

• Utilisez uniquement une grille intérieure, les petites zones de texte ne pas avoir une taille fixe plus, et la grande zone de texte ayant Grid.ColumnSpan="2".
• Appliquez Width="Auto" à la première colonne et Width="*" à la seconde.
• Remplacez le StackPanel existant par un Grid dont la première colonne est fixe ou en étoile (de sorte qu'elle évolue lorsque la fenêtre est redimensionnée). Mettez votre grille intérieure dans cette première colonne.