无法将 MahApps ToggleSwitch 中的 ContentControl 设置为粗体答案

【问题标题】：Unable to get ContentControl in MahApps ToggleSwitch to be bold无法将 MahApps ToggleSwitch 中的 ContentControl 设置为粗体
【发布时间】：2019-07-24 21:26:43
【问题描述】：

我为 MahApps ToggleSwitch 采用并创建了一个新样式。修改后如下图。我将其设置为在 Yes 和 No 之间交替，而不是 On 和 Off。我还更改了 ThumbIndicatorBrush 的大小和颜色。

我想加粗“否”

这是我在下面创建的样式。

<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>

我已经尝试将字体粗细设置为粗体没有运气的 ContentControl 命名为“内容”。我什至尝试取出 ContentControl 并使用 TextBlock 并调整 text 属性而不是 content 属性，但它仍然不遵守字体粗细。我还尝试让它在默认模板上加粗，但无法做到。有人知道我怎样才能让它变得大胆吗？

【问题讨论】：

MahApps 的 ToggleSwitch 使用默认字体作为标题和内容。内容使用“Segoe UI Semibold, Segoe UI, Lucida Sans Unicode, Verdana”的 ToggleSwitchFontFamily。所以内容将使用已经加粗的Segoe UI Semibold。
啊！您可以发布为答案，我将标记为答案。感谢您的时间和回答爱图书馆！

标签： wpf mahapps.metro wpf-style

【解决方案1】：

MahApps 的 ToggleSwitch 使用默认字体作为标题和内容。内容使用“Segoe UI Semibold, Segoe UI, Lucida Sans Unicode, Verdana”的 ToggleSwitchFontFamily。所以内容会使用已经加粗的Segoe UI Semibold。

【讨论】：

【解决方案2】：

@punker76 的回答是正确的。我问这个问题的原因是是/否与 Metroheaders 字体和字体粗细不匹配。在他的回答中，他提出的其中一件事引发了我的思考过程。因为它是不同的字体和半粗体。我没有意识到这是一种不同的字体，这让我觉得它只是不是粗体，但它是一种不同的字体，这就是为什么它看起来与 MetroHeaders 不同的原因，而这正是我真正追求的。所以我所做的就是使用 TextElement.FontFamily 和 TextElement.FontWeight 附加属性并将它们附加到控件以获取我正在寻找的外观。

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

【讨论】：