Prevent content from resizing when text becomes bold - xaml

Question

In my app, I have a tabbed layout (PivotHeaderItem) similar to the Windows Store app. Also similar to the Windows Store app, I have set the Selected tab's text to become bold. However, when the text becomes bold, the item's width becomes slightly bigger, causing the other tabs to shift slightly; I'm wanting to prevent this from happening.
I'm using my own FormsPivot.HeaderTemplate, which is here (in my custom TabbedPageRenderer):
private Windows.UI.Xaml.DataTemplate GetStyledHeaderTemplateDesktop(TabbedPage element)
{
var sb = new StringBuilder();
sb.Append("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"");
sb.Append(" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\">");
sb.Append("<TextBlock Text=\"{Binding Title}\" Padding=\"12 0 12 0\" FontFamily=\"{ThemeResource ContentControlThemeFontFamily}\" FontSize=\"16\" />");
sb.Append("</DataTemplate>");
return (Windows.UI.Xaml.DataTemplate)XamlReader.Load(sb.ToString());
}
As for how I set the text to Bold, in my UWP project's App.xaml file, I added the default style for the PivotHeaderItem, and then added the following code to the VisualState's Storyboard for the Selected, SelectedPressed, and SelectedHovered states:
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="FontWeight" >
<DiscreteObjectKeyFrame KeyTime="0" Value="SemiBold" />
</ObjectAnimationUsingKeyFrames>

Answer 1

However, when the text becomes bold, the item's width becomes slightly bigger, causing the other tabs to shift slightly; I'm wanting to prevent this from happening.
To avoid the item's width from resizing, you can give the ContentPresenter witch is in the default style for the PivotHeaderItem a fixed Width to include the header item content.
<ContentPresenter x:Name="ContentPresenter" Width="96"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
OpticalMarginAlignment="TrimSideBearings" />
Similar principle, you can also give a border to contain the ContentPresenter then configure the border with a appropriate Width.
<Border BorderBrush="Red" BorderThickness="5" Width="96" >
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
FontSize="{TemplateBinding FontSize}"
FontFamily="{TemplateBinding FontFamily}"
FontWeight="{TemplateBinding FontWeight}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
OpticalMarginAlignment="TrimSideBearings" />
</Border>

Answer 2

Breeze Liu - MSFT's solution works, however I didn't want to specify a fixed width (forgot to mention that in the OP).
What I decided to do was to update the HeaderItemTemplate to include two TextBlock objects; one for the text that would change from bold/not bold, and another with the same text, but is always bold, as well as having an opacity of 0. I put them into a grid so the TextBlocks would sit on top of one another. Because the invisible (Opacity = 0) TextBlock underneath is always bold, the width will not change when the visible TextBlock becomes bold. A bit hacky, but it gets the job done...
private Windows.UI.Xaml.DataTemplate GetStyledHeaderTemplateDesktop(TabbedPage element)
{
var sb = new StringBuilder();
sb.Append("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\"");
sb.Append(" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\">");
sb.Append("<TextBlock Text=\"{Binding Title}\" Padding=\"12 0 12 0\" FontFamily=\"{ThemeResource ContentControlThemeFontFamily}\" FontSize=\"16\" />");
sb.Append("<TextBlock Text=\"{Binding Title}\" Padding=\"12 0 12 0\" FontFamily=\"{ThemeResource ContentControlThemeFontFamily}\" FontSize=\"16\" FontWeight=\"SemiBold\" Opacity=\"0\" />");
sb.Append("</DataTemplate>");
return (Windows.UI.Xaml.DataTemplate)XamlReader.Load(sb.ToString());
}