Silverlight 4 Foreground ColorAnimation
I am trying to animate the Foreground color of a hyperlinkbutton when the user MouseOver the control. I created a custom style in which I want to animate the Foreground color. The Foreground color is set like so
<Setter Property="Foreground" Value="#FF73A9D8"/>
In the visualStateManager section I have the follow开发者_运维问答ing element for the Color Animation
<ColorAnimation Duration="0:0:0.5"
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
To="Black" />
The problem is that I can not figure out what the value should be Storyboard.TargetName.
The text is set in a ContentPresenter control which does not have a Foreground property
You are correct. There is nowhere to hang the animation inside the control template.
While the HyperlinkButton has a foreground property, which is inherited by its content, the property is not exposed as part of the template.
Your best bet is to create a usercontrol that plays 2 storyboards via MouseEnter/MouseLeave behaviours ("GlowingHyperlinkButton" XAML below). You will of course still need to expose the content via a dependency property:
<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>
Apologies for the horrid choice of colours. Hope this helps :)
精彩评论