ControlTemplate 与 VisualState ColorAnimation 绑定到附加属性

Question

我想在按钮的 ControlTemplate VisualStateManager 中绑定一个附加属性。

下面是属性的代码和按钮样式的 XAML。我没有错误或警告，但是当我将鼠标悬停在按钮上或按下按钮时，它不会改变颜色。

这有什么问题？我查看了以下示例，但到目前为止它们还没有起作用：

How to use Attached property within a style?

Problem reading AttachedProperty in ControlTemplate

这里是属性：

using System.Windows;
using System.Windows.Media;

namespace company.project.Utilities.AttachedBehaviors
{
    public class Attached : DependencyObject
    {
        // Attached properties...
        #region MouseOverColor Property

        public static readonly DependencyProperty MouseOverColorProperty = DependencyProperty.RegisterAttached(
              "MouseOverColor",
              typeof(Color),
              typeof(Attached)
            );

        public static void SetMouseOverColor(UIElement element, Color value)
        {
            element.SetValue(MouseOverColorProperty, value);
        }

        public static Color GetMouseOverColor(UIElement element)
        {
            return (Color)element.GetValue(MouseOverColorProperty);
        }

        #endregion

        #region PressedColor Property

        public static readonly DependencyProperty PressedColorProperty = DependencyProperty.RegisterAttached(
              "PressedColor",
              typeof(Color),
              typeof(Attached)
            );

        public static void SetPressedColor(UIElement element, Color value)
        {
            element.SetValue(PressedColorProperty, value);
        }

        public static Color GetPressedColor(UIElement element)
        {
            return (Color)element.GetValue(PressedColorProperty);
        }

        #endregion
    }
}

风格如下：

xmlns:attached="clr-namespace:company.project.Utilities.AttachedBehaviors;assembly=company.project.Utilities"

<Style x:Key="DialogButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource StandardButtonStyle}">
    <Setter Property="Background" Value="{StaticResource ElectroTekGrayBrush}" />
    <Setter Property="attached:Attached.MouseOverColor" Value="{StaticResource ElectroTekGreen}" />
    <Setter Property="attached:Attached.PressedColor" Value="{StaticResource ElectroTekLightGray}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border" To="{Binding Path=(attached:Attached.MouseOverColor), RelativeSource={RelativeSource AncestorType=Button}}" Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Border" To="{Binding Path=(attached:Attached.PressedColor), RelativeSource={RelativeSource AncestorType=Button}}" Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border Name="Border" Background="{TemplateBinding Background}" CornerRadius="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=(@VALUE/2)}" IsHitTestVisible="True">
                        <Grid>
                            <TextBlock x:Name="TextBlock" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" />
                        </Grid>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="TextBlock" Property="Cursor" Value="Hand" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这是按钮：

<Button Style="{StaticResource DialogButton}" />

Answer 1

好吧，我认为@King King 关于 To 和 From 属性是正确的，只是使用触发器实现了相同的功能。如果有人需要，这里是样式。

<Style x:Key="DialogButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource StandardButtonStyle}">
    <Setter Property="Background" Value="{StaticResource ElectroTekGrayBrush}" />
    <Setter Property="attached:Attached.MouseOverColor" Value="{StaticResource ElectroTekGreen}" />
    <Setter Property="attached:Attached.PressedColor" Value="{StaticResource ElectroTekOrange}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Border Name="border" Background="{TemplateBinding Background}" CornerRadius="{Binding RelativeSource={RelativeSource Self}, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=(@VALUE/2)}" IsHitTestVisible="True" Cursor="Hand">
                        <TextBlock x:Name="TextBlock" Text="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="15" Cursor="Hand" />
                    </Border>
                </Grid>
                <ControlTemplate.Resources>
                    <SolidColorBrush x:Key="MouseOverBrush" Color="{Binding Path=(attached:Attached.MouseOverColor), RelativeSource={RelativeSource AncestorType=Button}}" />
                    <SolidColorBrush x:Key="PressedBrush" Color="{Binding Path=(attached:Attached.PressedColor), RelativeSource={RelativeSource AncestorType=Button}}" />
                </ControlTemplate.Resources>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True" SourceName="border">
                        <Setter Property="Background" Value="{StaticResource MouseOverBrush}" TargetName="border" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{StaticResource PressedBrush}" TargetName="border" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>