title: WPF fix Grid position inside a Button
body: <p>A <code>Button</code> contains a <code>Grid</code>. The structure is like the follows:</p>
  
  <pre><code>&lt;Button&gt;
      &lt;Grid&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="3*"/&gt;
              &lt;ColumnDefinition Width="*"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="*" /&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;Viewbox Grid.Column="0"&gt;
              &lt;TextBlock&gt;&lt;/TextBlock&gt;
          &lt;/Viewbox&gt;
  
          &lt;Viewbox Grid.Column="1"&gt;
              &lt;TextBlock&gt;&lt;/TextBlock&gt;
          &lt;/Viewbox&gt;
      &lt;/Grid&gt;
  &lt;/Button&gt;
  </code></pre>
  
  <p>The problem is that the <code>TextBlock</code>s position aren't fixed, so you can see the following situation, where the gridline is moved to the right when the text on left becomes longer. How to make the <code>TextBlock</code>s position fixed inside the grid cell (so the middle grid line stays regardless of the text length)?</p>
  
  <p><img src="https://i.stack.imgur.com/8JX53.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>EDIT: The above XAML will fix the positons of the TextBlocks as it is, but will not work when the <code>Grid</code> is inside a button. Images below of a Grid with blue background on a silver button: we can see the grid line changes as the text changes (while the ratio stays the same?) primarily because the Grid occupies different region of the Button.</p>
  
  <p>So guess my real question is: How to make the <code>Grid</code> occupy the entire Button? (if the grid stays fixed, so does its grid line.)</p>
  
  <p><img src="https://i.stack.imgur.com/R8wtM.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/m3Gmm.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>EDIT2:
  Below is the code that generates the Button, Grid, Viewbox, TextBlock structure represented by the above XAML. This code generates the <code>Button</code>s as shown below, where the green <code>Grid</code> does not stretch to the entire blue <code>Button</code> and its occupied area differs based on its content. Setting Grid's properties as <code>g.HorizontalAlignment = HorizontalAlignment.Stretch;
      g.VerticalAlignment = VerticalAlignment.Stretch;</code> doesn't work.</p>
  
  <p><img src="https://i.stack.imgur.com/FTz9o.png" alt="enter image description here"></p>
  
  <pre><code>Button b = new Button();
  b.Background = Brushes.DeepSkyBlue;
  
  Grid g = new Grid();
  g.Name = "grid";
  g.ShowGridLines = true;
  g.Background = Brushes.LimeGreen;
  g.HorizontalAlignment = HorizontalAlignment.Stretch;
  g.VerticalAlignment = VerticalAlignment.Stretch;
  
  //create columns
  for (int i = 0; i &lt; 2; i++)
  {
      int len = i == 0 ? 3 : 1;
      ColumnDefinition cd = new ColumnDefinition();
      cd.Width = new GridLength(len, GridUnitType.Star);
      g.ColumnDefinitions.Add(cd);
  }
  
  
  //viewbox col 0
  Viewbox vb = new Viewbox();
  TextBlock tb1 = new TextBlock();
  vb.Child = tb1;
  Grid.SetRow(vb, 0);
  Grid.SetColumn(vb, 0);
  g.Children.Add(vb);
  
  //viewbox col 1
  Viewbox vb2 = new Viewbox();
  TextBlock updown = new TextBlock();
  vb2.Child = updown;
  //specify the Marlett Font
  updown.Style = (Style)Application.Current.FindResource("updownBlock");
  Grid.SetRow(vb2, 0);
  Grid.SetColumn(vb2, 1);
  g.Children.Add(vb2);
  
  //add grid to button
  b.Content = g;
  </code></pre>