Setting TargetName of PointAnimation to name of resource throws InvalidOperationException (XAML/Silverlight)
I have a Button
control for which I'm defining a custom template. Using some Storyboard
's I can successfully manipulate control properties, named transforms and effects with Dou开发者_如何学CbleAnimation
's; the problem has arisen, when using a PointAnimation
, that an InvalidOperationException
is thrown as, per VS: Cannot resolve TargetName OverlayEllipse.
The animation is initiated in code, simply:
private void Button_MouseEnter(object sender, MouseEventArgs e)
{
PopUpStoryboard.Begin();
}
And the relevant XAML:
<Button ...>
<Button.Resources>
<RadialGradientBrush
x:Name="OverlayBrush" ...>
<RadialGradientBrush.GradientStops>
...
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
<Storyboard x:Name="PopUpStoryboard">
...
<PointAnimation
Storyboard.TargetName="OverlayEllipse"
Storyboard.TargetProperty="(Shape.Fill)(RadialGradientBrush.GradientOrigin)"
Duration="0:0:.1"
To="0.9,1.2"/>
</Storyboard>
<Button.Resources>
<Button.Style>
<Style TargetType="Button">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
...
<Ellipse x:Name="OverlayEllipse" Fill="{StaticResource OverlayBrush}"/>
...
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
The Ellipse
can resolve the resource, obviously, as it displays just fine and the exception is thrown directly from the Storyboard.Begin
call. How can I correct what I have in order for the Storyboard
to be able to resolve to resource by name?
I had thought of using StaticResource
binding, however, that won't work considering it refers directly to the object, not its name. I just tried to set the Target
, as opposed to TargetName
, using the StaticResource
binding - this gives me a build error (strangely enough?) stating: The property 'Target' does not exist on the type 'PointAnimation' in the namespace http://schemas.microsoft.com/winfx/2006/xaml/presentation'.
Thanks.
Instead of targeting the resource, still target the property on the control (the Ellipse). Add (Shape.Fill)
to target the GradientOrigin
.
<PointAnimation
Storyboard.TargetName="OverlayEllipse"
Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)"
Duration="0:0:.1"
To="0.9,1.2"/>
Edit: Here's a complete sample button style.
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.Resources>
<RadialGradientBrush x:Key="Brush1" GradientOrigin="0.5,0.5">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</RadialGradientBrush>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
<PointAnimation Duration="0" To="0,0.5" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)" Storyboard.TargetName="BackgroundGradient" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
<Grid Background="{TemplateBinding Background}" Margin="1">
<Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
<Rectangle x:Name="BackgroundGradient" Fill="{StaticResource Brush1}">
</Rectangle>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
精彩评论