Unable to get ContentControl in MahApps ToggleSwitch to be bold

Question

I have taken and created a new Style for MahApps ToggleSwitch. After modifying it looks like below. I have it set to alternate between Yes and No instead of On and Off. I have also changed the size and coloring for ThumbIndicatorBrush.

I am trying to bold the 'No'

Here is the style I created below.

<Style x:Key="RuleItemToggleButtonControlTemplate" TargetType="{x:Type controls:ToggleSwitch}">
    <Setter Property="ContentPadding" Value="0,0,4,0"/>
    <Setter Property="controls:ControlsHelper.HeaderFontSize" Value="{DynamicResource ToggleSwitchHeaderFontSize}"/>
    <Setter Property="controls:ControlsHelper.HeaderMargin" Value="0,0,0,5"/>
    <Setter Property="FontFamily" Value="{DynamicResource ToggleSwitchFontFamily}"/>
    <Setter Property="FontSize" Value="{DynamicResource ToggleSwitchFontSize}"/>
    <Setter Property="Foreground" Value="{DynamicResource TextBrush}"/>
    <Setter Property="HeaderFontFamily" Value="{DynamicResource ToggleSwitchHeaderFontFamily}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="IsTabStop" Value="True"/>
    <Setter Property="OffSwitchBrush" Value="{DynamicResource GrayBrush4}"/>
    <Setter Property="OnSwitchBrush" Value="{DynamicResource AccentColorBrush}"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type controls:ToggleSwitch}">
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Header"/>
                                    <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Content"/>
                                    <DoubleAnimation Duration="0" To="0.75" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Switch"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Background="Transparent">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition x:Name="firstCol" Width="*"/>
                            <ColumnDefinition x:Name="secCol" Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ContentControl x:Name="Header" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" ContentStringFormat="{TemplateBinding HeaderStringFormat}" FontWeight="{TemplateBinding controls:ControlsHelper.HeaderFontWeight}" FontSize="{TemplateBinding controls:ControlsHelper.HeaderFontSize}" FontFamily="{TemplateBinding HeaderFontFamily}" IsTabStop="False" Margin="{TemplateBinding controls:ControlsHelper.HeaderMargin}"/>
                        <ContentControl x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="{TemplateBinding ContentPadding}" Grid.Row="1"
                                        Grid.Column="0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <controls:ToggleSwitchButton x:Name="Switch" BorderThickness="1"  Height="22" Width="40" Background="{TemplateBinding Background}" Grid.Column="1" FocusVisualStyle="{x:Null}" IsChecked="{Binding IsChecked, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}" OffSwitchBrush="{TemplateBinding OffSwitchBrush}" OnSwitchBrush="{TemplateBinding OnSwitchBrush}" Grid.Row="1" Style="{TemplateBinding ToggleSwitchButtonStyle}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ThumbIndicatorWidth="{TemplateBinding ThumbIndicatorWidth}" ThumbIndicatorDisabledBrush="{TemplateBinding ThumbIndicatorDisabledBrush}" ThumbIndicatorBrush="{TemplateBinding ThumbIndicatorBrush}" VerticalAlignment="Center"></controls:ToggleSwitchButton>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsChecked" Value="True"/>
                            <Condition Property="Content" Value="{x:Null}"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Content" TargetName="Content" Value="Yes"/>
                        <Setter Property="ThumbIndicatorBrush" Value="{StaticResource AccentColorBrush}"/>
                        <Setter TargetName="Switch" Property="BorderBrush" Value="{StaticResource AccentColorBrush}"></Setter>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsChecked" Value="False"/>
                            <Condition Property="Content" Value="{x:Null}"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Content" TargetName="Content" Value="No"/>
                        <Setter Property="ThumbIndicatorBrush" Value="{StaticResource ControlBorderBrush}"></Setter>
                        <Setter TargetName="Switch" Property="BorderBrush" Value="{StaticResource ControlBorderBrush}"/>
                    </MultiTrigger>
                    <DataTrigger Binding="{Binding Header, RelativeSource={RelativeSource Self}}" Value="{x:Null}">
                        <Setter Property="Visibility" TargetName="Header" Value="Collapsed"/>
                    </DataTrigger>
                    <Trigger Property="ContentDirection" Value="RightToLeft">
                        <Setter Property="ContentPadding" Value="4,0,0,0"/>
                        <Setter Property="Grid.Column" TargetName="Content" Value="1"/>
                        <Setter Property="Grid.Column" TargetName="Switch" Value="0"/>
                        <Setter Property="Width" TargetName="firstCol" Value="Auto"/>
                        <Setter Property="Width" TargetName="secCol" Value="*"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ThumbIndicatorBrush" Value="{DynamicResource BlackBrush}"/>
    <Setter Property="ThumbIndicatorDisabledBrush" Value="{DynamicResource GrayBrush4}"/>
    <Setter Property="ThumbIndicatorWidth" Value="13"/>
    <Setter Property="ToggleSwitchButtonStyle" Value="{DynamicResource MahApps.Metro.Styles.ToggleSwitchButton}"/>
    <Setter Property="Validation.ErrorTemplate" Value="{DynamicResource ValidationErrorTemplate}"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>

I have tried setting the font-weight to bold for the ContentControl named 'Content' with no luck. I even tried taking the ContentControl out and using a TextBlock and adjusting the text property instead of content property and it still doesn't honor the font-weight. I also tried getting it to be bold on the default template and was unable to do. Anyone know how I can get that to be bold?

Answer 1

The ToggleSwitch from MahApps uses a default font for the header and the content. The content uses the ToggleSwitchFontFamily which is 'Segoe UI Semibold, Segoe UI, Lucida Sans Unicode, Verdana'. So the content will uses the Segoe UI Semibold which is already bold.