title: Animating control on mousenter and mouseleave
body: <p>I've made a usercontrol and when the user enters this control with his mouse I want to hide a certain panel, and replace it with another.  </p>
  
  <p>I also want a SlideIn transition, but I can't get it to work correctly.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;UserControl x:Name="UserControl"&gt;
  
  &lt;UserControl.Resources&gt;
  
      &lt;i:Interaction.Triggers&gt;
          &lt;i:EventTrigger EventName="MouseEnter"&gt;
              &lt;ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="UsercontrolMouseEnter"/&gt;
          &lt;/i:EventTrigger&gt;
          &lt;i:EventTrigger EventName="MouseLeave"&gt;
              &lt;ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="UsercontrolMouseLeave"/&gt;
          &lt;/i:EventTrigger&gt;
      &lt;/i:Interaction.Triggers&gt;
  
      &lt;UserControl.Background&gt;
          &lt;StaticResource ResourceKey="DarkGrey"/&gt;
      &lt;/UserControl.Background&gt;
  
      &lt;Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent"&gt;
  
          &lt;VisualStateManager.CustomVisualStateManager&gt;
              &lt;ei:ExtendedVisualStateManager/&gt;
          &lt;/VisualStateManager.CustomVisualStateManager&gt; 
  
          &lt;VisualStateManager.VisualStateGroups&gt;
              &lt;VisualStateGroup x:Name="UsercontrolVisualStates"&gt;
                  &lt;VisualStateGroup.Transitions&gt;
                      &lt;VisualTransition GeneratedDuration="0:0:0.5" To="UsercontrolMouseEnter"&gt;
                          &lt;ei:ExtendedVisualStateManager.TransitionEffect&gt;
                              &lt;ee:SlideInTransitionEffect/&gt;
                          &lt;/ei:ExtendedVisualStateManager.TransitionEffect&gt;
                      &lt;/VisualTransition&gt;
                  &lt;/VisualStateGroup.Transitions&gt;
                  &lt;VisualState x:Name="UsercontrolMouseEnter"&gt;
                      &lt;Storyboard&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UserStatusPanel"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                          &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UserActionsPanel"&gt;
                              &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/&gt;
                          &lt;/ObjectAnimationUsingKeyFrames&gt;
                      &lt;/Storyboard&gt;
                  &lt;/VisualState&gt;
                  &lt;VisualState x:Name="UsercontrolMouseLeave"/&gt;
              &lt;/VisualStateGroup&gt;
          &lt;/VisualStateManager.VisualStateGroups&gt;
  
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="30"/&gt;
          &lt;ColumnDefinition Width="*"/&gt;
          &lt;ColumnDefinition Width="50"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="*" /&gt;
          &lt;RowDefinition Height="*" /&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;Grid x:Name="UserCallAlarmPanel" Grid.Column="0" Grid.RowSpan="2" 
          Background="{Binding CallStatus, Converter={StaticResource CallStatusBackgroundConverter}}" &gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="*"/&gt;
              &lt;RowDefinition Height="*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;WrapPanel x:Name="ExtraCallPanel" Grid.Row="0" Style="{StaticResource SelectedAction}" VerticalAlignment="Center"
              Visibility="{Binding HasCalls, Converter={StaticResource BoolToVis}}" &gt;
              &lt;WrapPanel Background="Transparent" &gt;
                  &lt;Viewbox StretchDirection="DownOnly" Stretch="Uniform" &gt;
                      &lt;ContentControl Content="{DynamicResource calls_icon}"/&gt;
                  &lt;/Viewbox&gt;
              &lt;/WrapPanel&gt;
          &lt;/WrapPanel&gt;
  
           &lt;WrapPanel x:Name="ExtraAlarmPanel" Grid.Row="1" Style="{StaticResource SelectedAction}" VerticalAlignment="Center"
              Visibility="{Binding HasCalls, Converter={StaticResource BoolToVis}}" &gt;
              &lt;WrapPanel Background="Transparent" &gt;
                  &lt;Viewbox StretchDirection="DownOnly" Stretch="Uniform" &gt;
                      &lt;ContentControl Content="{DynamicResource alarm_icon}"/&gt;
                  &lt;/Viewbox&gt;
              &lt;/WrapPanel&gt;
          &lt;/WrapPanel&gt;
      &lt;/Grid&gt;
  
      &lt;Border BorderBrush="{x:Null}" Margin="10,0,0,0" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Center"&gt;
          &lt;TextBlock x:Name="UserNameLabel" TextWrapping="Wrap" Text="{Binding Name}" Margin="0,5,0,0" 
              FontSize="16" VerticalAlignment="Center" Style="{StaticResource WhiteSegoeText}" /&gt;
      &lt;/Border&gt;
  
      &lt;Border x:Name="UserStatusPanel" BorderBrush="{x:Null}" Margin="10,0,0,0" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Center"&gt;
          &lt;TextBlock x:Name="UserStatusLabel" TextWrapping="Wrap" Text="{Binding UserStatus}" 
              FontSize="13" VerticalAlignment="Center" Style="{StaticResource WhiteSegoeText}"  /&gt;
      &lt;/Border&gt;
  
      &lt;WrapPanel x:Name="UserStatusIconPanel" Grid.Column="2" Grid.RowSpan="2" Height="50" Width="50" MouseLeftButtonDown="StatusIconContainer_MouseLeftButtonDown" Style="{StaticResource SelectedAction}" 
                 Visibility="{Binding Status, Converter={StaticResource StatusVisibilityConverter}}" &gt;
          &lt;Viewbox StretchDirection="DownOnly" Stretch="Uniform"&gt;
              &lt;Image x:Name="UserStatusIcon" Source="{Binding Status, Converter={StaticResource StatusIconConverter}}" /&gt;
          &lt;/Viewbox&gt;
      &lt;/WrapPanel&gt;
  
      &lt;Grid x:Name="UserActionsPanel" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" Visibility="Collapsed" &gt;
          &lt;Grid.Resources&gt;
              &lt;Style TargetType="{x:Type WrapPanel}" BasedOn="{StaticResource SelectedAction}"&gt;
                  &lt;Setter Property="Margin" Value="5,0,5,0" /&gt;
              &lt;/Style&gt; 
          &lt;/Grid.Resources&gt;
  
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="*" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
              &lt;ColumnDefinition Width="*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;WrapPanel x:Name="MessageActionPanel" Grid.Column="0" MouseLeftButtonDown="Iconpanel1_MouseLeftButtonDown"&gt;
              &lt;Viewbox StretchDirection="DownOnly" Stretch="Uniform" &gt;
                  &lt;ContentControl x:Name="MessageAction" Content="{StaticResource action_message}" /&gt;
              &lt;/Viewbox&gt;
          &lt;/WrapPanel&gt;
  
          &lt;WrapPanel x:Name="ChatActionPanel" Grid.Column="1" MouseLeftButtonDown="Iconpanel2_MouseLeftButtonDown"&gt;
              &lt;Viewbox StretchDirection="DownOnly" Stretch="Uniform" &gt;
                  &lt;ContentControl x:Name="ChatAction" Content="{StaticResource action_chat}" /&gt;
              &lt;/Viewbox&gt;
          &lt;/WrapPanel&gt;
  
          &lt;WrapPanel x:Name="CallActionPanel" Grid.Column="2" MouseLeftButtonDown="Iconpanel3_MouseLeftButtonDown"&gt;
              &lt;Viewbox StretchDirection="DownOnly" Stretch="Uniform" &gt;
                  &lt;ContentControl x:Name="CallAction" Content="{StaticResource action_call_icon}" /&gt;
              &lt;/Viewbox&gt;
          &lt;/WrapPanel&gt;
  
          &lt;WrapPanel x:Name="SipCallActionPanel" Grid.Column="3" MouseLeftButtonDown="Iconpanel4_MouseLeftButtonDown"&gt;
              &lt;Viewbox StretchDirection="DownOnly" Stretch="Uniform" &gt;
                  &lt;ContentControl x:Name="SipCallAction" Content="{StaticResource action_sipcall_icon}" /&gt;
              &lt;/Viewbox&gt;
          &lt;/WrapPanel&gt;
      &lt;/Grid&gt;
  &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>But this code slides the whole usercontrol from left to right on mouse enter.<br>
  What do I need to change to make it so that only the UserStatusPanel and UserActionsPanel animate? </p>