title: How to apply TextBox Control Template?
body: <p>I'm trying to simplify some code and improve my maintainability. </p>
  
  <p>I was initially seeking a way to have a text box aligned to the left, that can shrink and expand to a maximum value without centering inside a grid cell after reaching the maximum value.</p>
  
  <p>So I started out writing some code like this...</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="200" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;TextBox Text="Some text"
               VerticalAlignment="Center"
               HorizontalAlignment="Stretch"
               Margin="10"
               MaxWidth="150" /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>(Code Listing 1)</strong></p>
  
  <p>And that yields something looking like this...</p>
  
  <p><img src="https://i.stack.imgur.com/pUUs9.png" alt="TextBox in Grid Centered"></p>
  
  <p><strong>(Figure 1)</strong></p>
  
  <p>As you can see, this centers the TextBox with it's max width, but it is aligned in the center of the grid cell.</p>
  
  <p>So then I though maybe if i changed the horizontal alignment of the text box like so...</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="200" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;TextBox  Text="Some text"
                VerticalAlignment="Center"
                HorizontalAlignment="Left"
                Margin="10"
                MaxWidth="100" /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>(Code Listing 2)</strong></p>
  
  <p>But unfortunately, that only yields something looking like this...</p>
  
  <p><img src="https://i.stack.imgur.com/XZcrB.png" alt="Too small TextBox left aligned"></p>
  
  <p><strong>(Figure 2)</strong></p>
  
  <p>Again, this isn't right because, despite all the empty space on the right, the text box is not expanding to its max width of 100 like I want.</p>
  
  <p>Eventually, I found that if put the TextBox inside a nested grid, you will achieve the desired effect.</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="200" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;Grid&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="1*"
                                MaxWidth="120" /&gt;
              &lt;ColumnDefinition Width="0*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;TextBox Text="Some text"
               VerticalAlignment="Center"
               HorizontalAlignment="Stretch"
               Margin="10"
               MaxWidth="100" /&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p><strong>(Code Listing 3)</strong></p>
  
  <p>Which yields this...</p>
  
  <p><img src="https://i.stack.imgur.com/Ak96i.png" alt="Correct looking TextBox"></p>
  
  <p><strong>(Figure 3)</strong></p>
  
  <p>As you can see, the nested grid fills the entire 200 wide space, but the text box fills the left 100, and leaves the empty space on the right. (If this window is re-sizable it will shrink and expand appropriately)</p>
  
  <p>I would like to apply the methods of <em>Code Listing 3</em> to a style or control template, so I can blanket apply it to TextBoxes where this situation is applicable.</p>
  
  <p>In a perfect scenario, I would do something like...</p>
  
  <pre><code>&lt;TextBox Text="Some text"
           VerticalAlignment="Center"
           HorizontalAlignment="Stretch"
           Margin="10"
           MaxWidth="100"
           Style="{StaticResource ExpandingTextBox}" /&gt; 
  </code></pre>
  
  <p><strong>(Code Listing 4)</strong></p>
  
  <p>And achieve the same results as <em>Figure 3</em>.</p>
  
  <p>I tried the following...</p>
  
  <pre><code>&lt;Style TargetType="{x:Type TextBox}"
         x:Key="ExpandingTextBox"&gt;
      &lt;Setter Property="OverridesDefaultStyle"
              Value="True"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="TextBox"&gt;
                  &lt;Grid&gt;
                      &lt;Grid.ColumnDefinitions&gt;
                          &lt;ColumnDefinition Width="1*"
                                            MaxWidth="170" /&gt;
                          &lt;ColumnDefinition Width="0*" /&gt;
                      &lt;/Grid.ColumnDefinitions&gt;
                      &lt;ContentPresenter/&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p><strong>(Code Listing 5)</strong></p>
  
  <p>But that just causes the text box to disappear from my form all together. I'm not very good at writing templates like this, so I'm kind of at a loss.</p>
  
  <p>Also, one thing I just realized is that the width of the nested column = MaxWidth + 2 x Margin. I wouldn't mind setting the column width explicitly in the TextBox declaration, but if it could be automatic, that would be awesome.</p>