In Silverlight, how can I get an animation from the template and use it through C# code?

Question

I have a control template that looks like as follows:

<ControlTemplate x:Key="anchorButton" TargetType="Button">
            <Grid x:Name="CommonGrid" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                <Image x:Name="CommonPic" Source="anchor.png" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Opacity="1"/> 
                <Image x:Name="CommonPicSelected" Source="anchorSelected.png" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Opacity="0"/> 
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused"/>
                        <VisualState x:Name="Unfocused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CommonPic" Storyboard.TargetProperty="(UIElement.Opacity)">
                                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>    
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CommonPicSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
                                    <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>                            
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed"/>
                        <VisualState x:Name="Disabled"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </ControlTemplate>

While in application, I can change the images when I mouseOver the button, but what I need to do is to set this through code (I'm calling a javascript, when I mouseOver the row, the respective point in my Silverlight app should be highlighted).

The link to javascript is already done:

 [ScriptableMember]
 public void UpdateText(int result)
 {
     for (int i = 0; i < 4; i++)
     {
         ButtonBase button = (ButtonBase)VisualTreeHelper.GetChild(RegionCanvas, i);

         if (button.DataContext.ToString().Equals("" + result))
         {
             HtmlPage.Window.Invoke("highlightRow", button.DataContext);
         }
         else
         {
             HtmlPage.Window.Invoke("unHighlightRow", button.DataContext);
         }
    }
}

I wanted to use that animation set in the visual state and use inside the code shown above. Is that possible? How? If it is not, is there any other way to make it work?

Answer 1

Sure, this is entirely possible.

Answer 2

Have you tried googling?

http://weblogs.asp.net/mschwarz/archive/2007/06/01/call-scribtable-methods-from-javascript-with-silverlight.aspx

http://msdn.microsoft.com/en-us/library/cc221414%28VS.95%29.aspx

Answer 3

You just need to name the StoryBoard on XAML:

<Storyboard x:Name="storyboard">
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CommonPic" Storyboard.TargetProperty="(UIElement.Opacity)">
                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="CommonPicSelected" Storyboard.TargetProperty="(UIElement.Opacity)">
                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>

And then you can call the Begin method from the code:

storyboard.Begin();