时间戳

首页 > 解决方案 > 无法将 MahApps ToggleSwitch 中的 ContentControl 设置为粗体

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

问题描述

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

我尝试将名为“Content”的 ContentControl 的字体粗细设置为粗体，但没有成功。我什至尝试取出 ContentControl 并使用 TextBlock 并调整 text 属性而不是 content 属性，但它仍然不尊重字体粗细。我还尝试让它在默认模板上加粗，但无法做到。有谁知道我怎样才能让它变得大胆？

标签： wpfmahapps.metrowpf-style

解决方案

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

推荐阅读