クリック時にテキストが太字になったときにラジオボタンの幅を拡大しないようにするには

Question

私はこれらの2つのラジオボタンを持っており、クリックするとラジオボタン内のテキストを太字にしています。この場合、ラジオボタンの幅は数ピクセル増加します。どうしたらこのことが起こらないようにすることができますか？この例では、ラジオボタン内の "Content"はハードコードされていますが、将来はハードコーディングされません。したがって、ボタンに設定幅を指定することはオプションではありません。どのように私はこれを達成することができるかに関する任意のアイデア？

<Page 
x:Class="ButtonTest.MainPage" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:ButtonTest" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d"> 
<Page.Resources> 
    <Style x:Key="RadioButtonStyle" TargetType="RadioButton"> 
     <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}" /> 
     <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}" /> 
     <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}" /> 
     <Setter Property="HorizontalAlignment" Value="Left" /> 
     <Setter Property="VerticalAlignment" Value="Center" /> 
     <Setter Property="HorizontalContentAlignment" Value="Left" /> 
     <Setter Property="VerticalContentAlignment" Value="Top" /> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
     <Setter Property="MinWidth" Value="0" /> 
     <Setter Property="UseSystemFocusVisuals" Value="True" /> 
     <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" /> 
     <Setter Property="Padding" Value="16,12" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="RadioButton"> 
        <Grid x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal" /> 
           <VisualState x:Name="PointerOver"> 
            <VisualState.Setters> 
             <Setter Target="ContentPresenter.Foreground" Value="Purple" /> 
            </VisualState.Setters> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="CheckStates"> 
           <VisualState x:Name="Checked"> 
            <VisualState.Setters> 
             <Setter Target="FocusContentPresenter.FontWeight" Value="Bold" /> 
             <Setter Target="ContentPresenter.FontWeight" Value="Bold" /> 
             <Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" /> 
             <Setter Target="ContentPresenter.(UIElement.Opacity)" Value="0" /> 
            </VisualState.Setters> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TopBorder"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unchecked" /> 
           <VisualState x:Name="Indeterminate" /> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid Height="32" VerticalAlignment="Top"> 
          <Border x:Name="TopBorder" BorderBrush="#FF054EEA" BorderThickness="0,5,0,0" HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="82" Margin="15,1,-77,0" Visibility="Collapsed"></Border> 
         </Grid> 
         <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" /> 
         <ContentPresenter x:Name="FocusContentPresenter" Opacity="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid Margin="13,183,231,411"> 
     <RadioButton Content="RadioButton" x:Name="Radio1" GroupName="Menu" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}"/> 
    </Grid> 
    <Grid Margin="13,257,227,341"> 
     <RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}" /> 
    </Grid> 
</Grid> 

Answer 1

ちょうどあなたのContentPresenterの隣にこの目に見えないのTextBlockを配置します。

<TextBlock Text="{TemplateBinding Content}" 
      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
      TextWrapping="Wrap" 
      Opacity="0" 
      IsHitTestVisible="False" 
      FontWeight="Bold" 
      Margin="{TemplateBinding Padding}" />