JMIII
JMIII

Reputation: 404

Unable to get ContentControl in MahApps ToggleSwitch to be bold

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.

enter image description here

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?

Upvotes: 0

Views: 854

Answers (2)

JMIII
JMIII

Reputation: 404

@punker76's answer is correct. The reason I asked the question is the yes/no did not match the metroheaders font and font weight. In his answer one of the things he brought up triggered my thought process for a work around. As it was a different font and semibold. I did not realize it was a different font which made me think it just wasn't bold but it was a different font and that is why it did not look the same as the MetroHeaders which is what I was really after. So what I did was use the TextElement.FontFamily and TextElement.FontWeight attached properties and attached them to the control to get look I was looking for.

TextElement.FontFamily="{TemplateBinding controls:ControlsHelper.HeaderFontFamily}"
TextElement.FontWeight="Bold"

Upvotes: 0

punker76
punker76

Reputation: 14611

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.

Upvotes: 3

Related Questions