title: Viewbox TabControl sizing gets messed up depending on font size
body: <p>I have a program that lets you edit different properties so that you can edit a different control.</p>
  
  <p>I'm trying to get the layout right for the editor but I can't seem to get it easily.</p>
  
  <p>I have put it in a viewbox so it sizes according to the screen. This is the XAML for the editor:</p>
  
  <pre><code>&lt;Viewbox Grid.Column="0" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center"&gt;
      &lt;TabControl Background="{DynamicResource CustomOrange}"&gt;
          &lt;TabItem Header="Background" Visibility="Visible" FontSize="10"&gt;
              &lt;StackPanel&gt;
                  &lt;DockPanel LastChildFill="False"&gt;
                      &lt;Label Content="Background" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/&gt;
                  &lt;/DockPanel&gt;
                  &lt;DockPanel LastChildFill="False" Margin="2"&gt;
                      &lt;Label Content="Background Image" DockPanel.Dock="Left"/&gt;
                      &lt;Button Content="Find Image" DockPanel.Dock="Right"/&gt;
                  &lt;/DockPanel&gt;
                  &lt;DockPanel LastChildFill="False" Margin="2"&gt;
                      &lt;Label Content="Show Text" DockPanel.Dock="Left"/&gt;
                      &lt;CheckBox Content="Find Image" DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
                  &lt;/DockPanel&gt;
              &lt;/StackPanel&gt;
          &lt;/TabItem&gt;
          &lt;TabItem Header="Button"  Visibility="Visible"&gt;
              &lt;StackPanel&gt;
                  &lt;DockPanel LastChildFill="False"&gt;
                      &lt;Label Content="Background IMAGE" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30"/&gt;
                  &lt;/DockPanel&gt;
                  &lt;DockPanel LastChildFill="False" Margin="2"&gt;
                      &lt;Label Content="Background Image" DockPanel.Dock="Left"/&gt;
                      &lt;Button Content="Find Image" DockPanel.Dock="Right"/&gt;
                  &lt;/DockPanel&gt;
                  &lt;DockPanel LastChildFill="False" Margin="2"&gt;
                      &lt;Label Content="Show Text" DockPanel.Dock="Left"/&gt;
                      &lt;CheckBox Content="Find Image" DockPanel.Dock="Right" HorizontalAlignment="Center" VerticalAlignment="Center"/&gt;
                  &lt;/DockPanel&gt;
              &lt;/StackPanel&gt;
          &lt;/TabItem&gt;
      &lt;/TabControl&gt;
  &lt;/Viewbox&gt;
  </code></pre>
  
  <p>The problem is that the first TabItem looks like this:
  <a href="https://i.stack.imgur.com/lSyt2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lSyt2.png" alt="Background Tab Item"></a></p>
  
  <p>But because I have changed the content of the label, the second TabItem looks like this:
  <a href="https://i.stack.imgur.com/Fehb3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fehb3.png" alt="Button Tab Item"></a></p>
  
  <p>Now, I know there are simpler ways to do this, but the problem is I don't know for sure how many options I am implementing for the user (Width, Height, Location, Font, Background, Content etc).</p>
  
  <p>I have done it before with a grid but the problem is anytime I remove an option then all of them need to be re-done so that they are all in the exact Grid.Row which is why I am using StackPanel for the rows, and I am using the DockPanel so they keep separated horizontally</p>
  
  <p>Thank you!!!</p>