How can I anchor a textbox in wpf?

I have a window with tabs. On one of the tabs, I have a layout like below. (In fact it is more complicated, I have 4 text boxes in a row, and I have more rows.) How can I make the 3rd textbox have the width of the label + the width of the text box above, that is, to have them properly aligned ? The problem is that WPF widens the 3rd textbox, when I type text into it. Using hardcoded numbers for the sizes defeats the whole purpose of WPF. I could do that way 10 times faster in Windows Forms than in WPF.

Is there a better way, than using a grid for each set of consecutive small text boxes, having to skip the large ones from the grid, because putting them in messes up everything.

<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: Here is the solution based on Julien Lebosquain's answer:

<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>

---

I think you got it backwards. It's not the largest textbox that messes up everything. It's the fact that the small textboxes have a fixed size that makes them not behave like the largest one. You've got a contradiction here: the use of a stack panel which means "takes the width of my children", Width=Auto that has the same behavior, but you don't want your stack panel to grow.

Somewhere higher in the visual tree, you need to either specify a width or use a control whose sizing behavior is to take the whole space, like Grid.

Personally, I'll go with this solution:

• Use only one inner grid, the small textboxes not having a fixed size anymore, and the large textbox having Grid.ColumnSpan="2".
• Apply Width="Auto" to the first column and Width="*" to the second.
• Replace the existing StackPanel with a Grid having the first column fixed or star-sized (so that it will scale when the window is resized). Put your inner grid in this first column.

---

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

---

I would have one grid with 4 rows. And have a ColumnSpan on the 3rd row. It also means that you don't need the 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>

---

Just remove Alignment properties:

HorizontalAlignment="Center" VerticalAlignment="Center" 

For example textbox would be:

<TextBox x:Name="txtMyName1" Margin="3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<TextBox x:Name="txtMyName2" Margin="3" />