Friday, September 7, 2012

Silverlight Animation style From Resource File

Silverlight Animation style From Resource File

I want to animate button shadow effect color when mouse enter border. I try this code and is not working for me. And I don't know where is the problem is?

    <Style x:Name="HeaderButton" TargetType="Button">     <Setter Property="Template">         <Setter.Value>             <ControlTemplate TargetType="Button">                 <Border x:Name="Border" BorderBrush="#FF550211" BorderThickness="0" CornerRadius="4">                     <Border.Triggers>                         <EventTrigger RoutedEvent="Border.MouseEnter">                             <BeginStoryboard>                                 <Storyboard>                                     <ColorAnimation Storyboard.TargetProperty="Color" Storyboard.TargetName="MenuButtonShadow"                                                     From="#FFFFFFFF" To="#FF000000" Duration="0:0:0.3"></ColorAnimation>                                 </Storyboard>                             </BeginStoryboard>                         </EventTrigger>                     </Border.Triggers>                     <Border.Background>                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">                             <GradientStop Color="#FFAF1232" Offset="0" />                             <GradientStop Color="#FFB60329" Offset="1" />                         </LinearGradientBrush>                     </Border.Background>                     <ContentPresenter Margin="8, 0" VerticalAlignment="Center" HorizontalAlignment="Center" />                 </Border>             </ControlTemplate>         </Setter.Value>     </Setter>     <Setter Property="Effect">         <Setter.Value>             <DropShadowEffect x:Name="MenuButtonShadow" ShadowDepth="0" BlurRadius="4"></DropShadowEffect>         </Setter.Value>     </Setter>     <Setter Property="Foreground" Value="White"></Setter>     <Setter Property="Margin" Value="4"></Setter> </Style> 

Answers & Comments...

Answer: 1

From MSDN:

In Silverlight, the only event that you can use for an EventTrigger is the Loaded event. For other events, you should declare a storyboard in the Resources property, provide a Name value for the storyboard, and write an event handler that calls the Begin method on the named storyboard.

I imagine you could do something like this in your XAML (though I haven't tested it):

<Storyboard x:Name="MenuButtonShadowStoryboard">     <ColorAnimation Storyboard.TargetProperty="Color" Storyboard.TargetName="MenuButtonShadow"                     From="#FFFFFFFF" To="#FF000000" Duration="0:0:0.3">     </ColorAnimation> </Storyboard>  <ControlTemplate TargetType="Button">     <Border x:Name="Border" MouseEnter="Border_MouseEnter">         <!-- omitted for brevity -->     </Border> </ControlTemplate> 

And then your event handler would call the Begin method on the storyboard:

private void Border_MouseEnter(object sender, MouseEventArgs e) {     MenuButtonShadowStoryboard.Begin(); } 

You'll probably want to add something similar for the MouseLeave event, which makes the color go back to #FFFFFFFF.

by : Andrewhttp://stackoverflow.com/users/674077




No comments:

Post a Comment

Send us your comment related to the topic mentioned on the blog