Silverlight Button Style gets stuck on fullscreen

Question

So I have a number of buttons in Silverlight that I've made from images. In each case the button has a regular image and a hover image. I've used Blend to have the hover image fade in over .15 seconds on hover.

The problem with this is that I can't figure out how to access the images anymore, since they are embedded in the style. So, I have a separate style for each button, instead of a single UserControl with two interchangable images.

Also I have a set of two buttons: FullScreen and ExitFullScreen. The hover image gets stuck in this case:

1. Press fullscreen. The exit fullscreen button is now in a different place.
2. Press exit fullscreen. The fullscreen button is back in the original place. The hover animation is displayed, even though the mouse is not over the button.

Code:-

<Style x:Key="ExitFullScreenButton" TargetType="Button">
      <Setter Property="Template">
       <Setter.Value>
        <ControlTemplate TargetType="Button">
         <Grid>
          <VisualStateManager.VisualStateGroups>
           <VisualStateGroup x:Name="FocusStates">
            <VisualState x:Name="Focused"/>
            <VisualState x:Name="Unfocused"/>
           </VisualStateGroup>
           <VisualStateGroup x:Name="CommonStates">
            <VisualStateGroup.Transitions>
             <VisualTransition GeneratedDuration="00:00:00.1500000" To="MouseOver"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="MouseOver">
             <Storyboard>
              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="image" 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>
          <Image Source="Images/ControlBar/exitFullScreenButton.png"/>
          <Image x:Name="image" Opacity="0" Source="Images/ControlBar/exitFullScreenButtonHover.png"/>
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="" ToolTipService.ToolTip="Full Screen"/>
         </Grid>
        </ControlTemplate>
       </Setter.Value>
      </Setter>
     </Style>


<Button x:Name="ExitFullScreenButton" Click="ExitFullScreenButton_Click" Canvas.Top="14"
         Style="{StaticResource ExitFullScreenButton}" 
         Width="32" Content="Button" Visibility="Collapsed"/>

Answer 1

I ended up just making a user control and doing the animation in code.

private Storyboard hoverAnimation = new Storyboard();

private void CreateAnimation()
     {
      SizeChanged += OnSizeChanged;

      Duration duration = new Duration(TimeSpan.FromMilliseconds(150));
      hoverAnimation.Duration = duration;

      DoubleAnimation animation = new DoubleAnimation();
      animation.Duration = duration;
      hoverAnimation.Children.Add(animation);

      Storyboard.SetTarget(animation, HoverIcon);
      Storyboard.SetTargetProperty(animation, new PropertyPath(Image.OpacityProperty));

      animation.To = 1;
     }