Auto-sizing multiple TextBox(es) within a DockPanel

Question

I was hoping someone could help me out here. I have 2 textboxes and a button within a dockpanel and I would like to get the 2 textboxes to stretch and shrink based on window size.

I have a dockpanel which contains a bunch of menu buttons on the left and within this dock I have another dock with 2 textboxs and a button. When I resize the main window, I would like the right dock to shrink the textboxes so that the right dock just doesn't dissapear when hit against the left dock. Does this make sense?

    <DockPanel LastChildFill="False">
        <Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="button1" Content="1" FontSize="10" Foreground="#FF565656" Width="64" Height="40"/>
        <Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="button2"  MinWidth="25" />

        <DockPanel LastChildFill="False" DockPanel.Dock="Right" Margin="5, 0, 5, 0">
                <TextBox DockPanel.Dock="Left" Name="textBoxUsername" Text="" TextWrapping="Wrap" ToolTip="Enter username" FontSize="11" FontWeight="Normal" Height="20" HorizontalAlignment="Left" Width="90" d:LayoutOverrides="GridBox" KeyUp="textBoxUsername_KeyUp" />
                <PasswordBox Margin="5, 0, 0, 0" DockPanel.Dock="Left" Name="textBoxPassword" ToolTip="Enter password" Height="20" d:LayoutOverrides="HorizontalAlignment, GridBox" Width="90" KeyUp="textBoxPassword_KeyUp" />
                <Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="buttonLogin" Content="Login" Height="20" MinWidth="70" Click="buttonLogin_Click" Width="500" />
            </DockPanel>
    </DockPanel>

This currently will just have the right dockpanel dissapear all together when the window is resized below the width of everything in the panel. I would like to have the right panel (the embedded dockpanel) shrink in size. Is this possible without a huge re-write effort? I obviously left a lot of the code out... Any help would be appreciated.

UPDATE

I am getting closer, but still not quite what I was hoping for. I added a grid, this allows the stretching, but I was hoping to leave everything stationary to the right. Meaning, I only want to shrink, not stretch but it be pinned to the right.

Here is the what it looks like now.

 <DockPanel LastChildFill="False">
    <Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="button1" Content="1" FontSize="10" Foreground="#FF565656" Width="64" Height="40"/>
    <Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="button2"  MinWidth="25" />
         <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" MaxWidth="110" />
                    <ColumnDefinition Width="*" MaxWidth="110" />
                    <ColumnDefinition Width="100"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <TextBox Name="textBoxUsername" Text="" TextWrapping="Wrap" ToolTip="Enter username" FontSize="11" FontWeight="Normal" FontStyle="Normal" Foreground="#FF9C9C9C" FontFamily="Arial Unicode MS" Height="20" d:LayoutOverrides="GridBox" KeyUp="textBoxUsername_KeyUp" Margin="5,13,5,0" MaxWidth="110" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
                <PasswordBox Grid.Column="1" Margin="5,13,5,0" Name="textBoxPassword" ToolTip="Enter password" Height="20" d:LayoutOverrides="HorizontalAlignment, GridBox" KeyUp="textBoxPassword_KeyUp" MaxWidth="110" VerticalContentAlignment="Center" />
                <Button Grid.Column="2" DockPanel.Dock="Left" Margin="5,13,5,0" Name="buttonLogin" Content="Login" Template="{StaticResource ButtonControlTemplate2}"  FontFamily="Arial" BorderBrush="{x:Null}" Background="{x:Null}" Height="20" MinWidth="70" Click="buttonLogin_Click" />
            </Grid>
 </DockPanel>

So this is centering everything within the the space it has. As soon as I put the horizontal alignment to "Right", the textboxes get crushed like this

Any thoughts on this?

Answer 1

This is happening because of the precedence of the textbox content. The TextBox's own width will be always equal to its content, so if you want some textboxes to have a different value, you should either set their Width property or set their parent's Width property.

You might me interested in a solution either this:

<TextBox Name="textBoxUsername" Width="100" ... />

Or this:

...
<ColumnDefinition Width="110" />
<ColumnDefinition Width="110" />
<ColumnDefinition Width="100" />
...

Or even this:

<TextBox Name="textBoxUsername" MinWidth="100" ... />

Note the MinWidth property.