Silverlight 4 前景色动画

Question

我正在尝试在用户鼠标悬停在控件上时，对超链接按钮的前景色进行动画处理。我创建了一个自定义样式，希望能够对前景色进行动画处理。前景色的设置方式如下：

<Setter Property="Foreground" Value="#FF73A9D8"/>

在visualStateManager部分，我有以下元素用于颜色动画。

<ColorAnimation Duration="0:0:0.5" 
              Storyboard.TargetName="contentPresenter" 
              Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" 
              To="Black" />

问题在于我无法确定Storyboard.TargetName应该是什么值。

该文本设置在ContentPresenter控件中，该控件没有Foreground属性。

- John Soer

Answer 1

你是正确的。在控件模板内部没有地方可以挂动画。

虽然HyperlinkButton有一个前景属性，该属性被其内容继承，但该属性不作为模板的一部分公开。

你最好创建一个用户控件，通过MouseEnter/MouseLeave行为播放2个故事板（以下是“GlowingHyperlinkButton” XAML）。当然，你仍然需要通过依赖属性公开内容：

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    mc:Ignorable="d"
    x:Class="SilverlightApplication1.GlowingHyperlinkButton"
    d:DesignWidth="94" d:DesignHeight="16">
    <UserControl.Resources>
        <Storyboard x:Name="MouseEnterStoryboard">
            <ColorAnimation Duration="0:0:0.5" To="#FFDF00EB" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="hyperlinkButton" d:IsOptimized="True"/>
        </Storyboard>
        <Storyboard x:Name="MouseLeaveStoryboard">
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="hyperlinkButton">
                <SplineColorKeyFrame KeyTime="0:0:0.5" Value="#FF49ED28"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <HyperlinkButton x:Name="hyperlinkButton" Content="HyperlinkButton" Foreground="#FF49ED28" d:LayoutOverrides="Width, Height">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseEnter">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource MouseEnterStoryboard}"/>
                </i:EventTrigger>
                <i:EventTrigger EventName="MouseLeave">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource MouseLeaveStoryboard}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </HyperlinkButton>
    </Grid>
</UserControl>

非常抱歉颜色选择不佳。希望这有所帮助 :)

- Gone Coding

---

Silverlight对控件定制的支持令人失望。这是我第二次尝试为控件创建自定义外观，但两次都无法像更改状态时更改前景色这样简单的事情。 - xr280xr