c# - WPF ToggleButton 状态在鼠标悬停后重置为正常且未选中状态

Question

我已经对 ToggleButton 进行了扩展。它继承自 ToggleButton，我添加了一些依赖属性。我希望标签和文本在鼠标悬停时以及 IsChecked 为真时突出显示。

期望的结果

• 正常状态:深色文字
• 鼠标悬停:浅色文本
• 勾选:浅色文字

它在正常状态下和鼠标悬停时工作正常。当我切换按钮时，当我从中移除鼠标时它仍然突出显示。但是当我再次悬停时，文本又变黑了，就像没有被选中一样。我究竟做错了什么？ (如果我删除鼠标悬停状态，切换时文本仍然突出显示)是否因为鼠标悬停和选中位于不同的视觉状态组中？

这是我在 generic.xaml 中的代码

<Style TargetType="{x:Type view:ExtendedToggleButton}">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="{DynamicResource LineBrush}" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type view:ExtendedToggleButton}">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <!--<ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{DynamicResource BackgroundMouseOverColor}"/>-->
                                    <ColorAnimation Duration="0" Storyboard.TargetName="LabelControl" Storyboard.TargetProperty="(Label.Foreground).(SolidColorBrush.Color)" To="{DynamicResource TitleColor}"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="TextControl" Storyboard.TargetProperty="(Label.Foreground).(SolidColorBrush.Color)" To="{DynamicResource DetailTextColor}"/>

                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{DynamicResource BackgroundMousePressedColor}"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="LabelControl" Storyboard.TargetProperty="(Label.Foreground).(SolidColorBrush.Color)" To="{DynamicResource TitleColor}"/>
                                    <ColorAnimation Duration="0" Storyboard.TargetName="TextControl" Storyboard.TargetProperty="(Label.Foreground).(SolidColorBrush.Color)" To="{DynamicResource DetailTextColor}"/>

                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused" />
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Background" Background="Transparent" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                        <Grid Background="{TemplateBinding Background}"  Margin="1">

                        </Grid>
                    </Border>
                    <StackPanel>
                        <WrapPanel Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                            <TextBlock x:Name="LabelControl" Margin="0 0 10 0" FontSize="14" Foreground="{DynamicResource DescreteTitleBrush}" Text="{TemplateBinding Label}" />
                            <TextBlock x:Name="TextControl" Margin="5 2 0 0" FontSize="12" Foreground="{DynamicResource DarkDetailTextBrush}" TextWrapping="Wrap" Text="{TemplateBinding Text}" />
                        </WrapPanel>
                        <ContentPresenter 
                                  x:Name="contentPresenter"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"/>
                    </StackPanel>
                    <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我已经尝试将触发器添加到 ControlTemplate，但它没有帮助。

<ControlTemplate.Triggers>
    <Trigger Property="IsChecked" Value="True">
        <Setter TargetName="LabelControl" Property="Foreground" Value="{DynamicResource TitleBrush}" />
    </Trigger>
</ControlTemplate.Triggers>

Answer 1

我解决了这个问题，跳过了 VisualStateManager，而是使用了名为 TitleBrush 和 DescriptionBrush 的附加依赖属性。我使用 TemplateBinding 绑定(bind)了 TextBlocks 的前景，然后我使用 IsChecked 和 IsMouseOver 的触发器设置了 TitleBrush 和 DescriptionBrush。

<Style TargetType="{x:Type view:ExtendedToggleButton}">
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="BorderBrush" Value="{DynamicResource LineBrush}" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type view:ExtendedToggleButton}">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To=".55"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked"/>
                            <VisualState x:Name="Unchecked"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused" />
                            <VisualState x:Name="Unfocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Background" Background="Transparent" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                        <Grid Background="{TemplateBinding Background}"  Margin="1">

                        </Grid>
                    </Border>

                    <StackPanel>
                        <WrapPanel Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                            <TextBlock x:Name="LabelControl" Margin="0 0 10 0" FontSize="14" Foreground="{TemplateBinding TitleBrush}" Text="{TemplateBinding Label}" />
                            <TextBlock x:Name="TextControl" Margin="5 2 0 0" FontSize="12" Foreground="{TemplateBinding DescriptionBrush}" TextWrapping="Wrap" Text="{TemplateBinding Text}" />

                        </WrapPanel>
                        <ContentPresenter 
                                  x:Name="contentPresenter"
                                  Content="{TemplateBinding Content}"
                                  ContentTemplate="{TemplateBinding ContentTemplate}"/>
                    </StackPanel>
                    <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" Opacity="0" IsHitTestVisible="false" />
                </Grid>

                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="TitleBrush" Value="{DynamicResource DescreteTitleBrush}" />
                        <Setter Property="DescriptionBrush" Value="{DynamicResource DarkDetailTextBrush}" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="TitleBrush" Value="{DynamicResource TitleBrush}" />
                        <Setter Property="DescriptionBrush" Value="{DynamicResource DetailTextBrush}" />
                    </Trigger>

                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="TitleBrush" Value="{DynamicResource TitleBrush}" />
                        <Setter Property="DescriptionBrush" Value="{DynamicResource DetailTextBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style> 

这是依赖属性之一

public const string DescriptionBrushPropertyName = "DescriptionBrush";

public Brush DescriptionBrush
{
    get
    {
        return (Brush)GetValue(DescriptionBrushProperty);
    }
    set
    {
        SetValue(DescriptionBrushProperty, value);
    }
}

public static readonly DependencyProperty DescriptionBrushProperty = DependencyProperty.Register(
    DescriptionBrushPropertyName,
    typeof(Brush),
    typeof(ExtendedToggleButton),
    new UIPropertyMetadata(new SolidColorBrush(Colors.White)));