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

Posted 2023-02-22

【中文标题】无法将 MahApps ToggleSwitch 中的 ContentControl 设置为粗体

【英文标题】：Unable to get ContentControl in MahApps ToggleSwitch to be bold

【发布时间】：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。

啊！您可以发布为答案，我将标记为答案。感谢您的时间和回答爱图书馆！

【参考方案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"