title: Auto-sizing multiple TextBox(es) within a DockPanel
body: <p>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. </p>
  
  <p>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?</p>
  
  <pre><code>    &lt;DockPanel LastChildFill="False"&gt;
          &lt;Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="button1" Content="1" FontSize="10" Foreground="#FF565656" Width="64" Height="40"/&gt;
          &lt;Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="button2"  MinWidth="25" /&gt;
  
          &lt;DockPanel LastChildFill="False" DockPanel.Dock="Right" Margin="5, 0, 5, 0"&gt;
                  &lt;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" /&gt;
                  &lt;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" /&gt;
                  &lt;Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="buttonLogin" Content="Login" Height="20" MinWidth="70" Click="buttonLogin_Click" Width="500" /&gt;
              &lt;/DockPanel&gt;
      &lt;/DockPanel&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>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.</p>
  
  <p>Here is the what it looks like now.</p>
  
  <pre><code> &lt;DockPanel LastChildFill="False"&gt;
      &lt;Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="button1" Content="1" FontSize="10" Foreground="#FF565656" Width="64" Height="40"/&gt;
      &lt;Button DockPanel.Dock="Left" Margin="5, 0, 0, 0" Name="button2"  MinWidth="25" /&gt;
           &lt;Grid&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="*" MaxWidth="110" /&gt;
                      &lt;ColumnDefinition Width="*" MaxWidth="110" /&gt;
                      &lt;ColumnDefinition Width="100"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition Height="Auto"/&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;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" /&gt;
                  &lt;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" /&gt;
                  &lt;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" /&gt;
              &lt;/Grid&gt;
   &lt;/DockPanel&gt;
  </code></pre>
  
  <p>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</p>
  
  <p><img src="https://i.stack.imgur.com/7YKJq.png" alt="enter image description here"></p>
  
  <p>Any thoughts on this?</p>