c# - mouseenter 和 mouseleave 上的动画控制

Question

我制作了一个用户控件，当用户用鼠标进入这个控件时，我想隐藏某个面板，并将其替换为另一个。

我也想要一个 SlideIn 过渡，但我无法让它正常工作。

代码：

<UserControl x:Name="UserControl">

<UserControl.Resources>

    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="UsercontrolMouseEnter"/>
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeave">
            <ei:GoToStateAction TargetObject="{Binding ElementName=UserControl}" StateName="UsercontrolMouseLeave"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <UserControl.Background>
        <StaticResource ResourceKey="DarkGrey"/>
    </UserControl.Background>

    <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Transparent">

        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager> 

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="UsercontrolVisualStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5" To="UsercontrolMouseEnter">
                        <ei:ExtendedVisualStateManager.TransitionEffect>
                            <ee:SlideInTransitionEffect/>
                        </ei:ExtendedVisualStateManager.TransitionEffect>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="UsercontrolMouseEnter">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UserStatusPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="UserActionsPanel">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="UsercontrolMouseLeave"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid x:Name="UserCallAlarmPanel" Grid.Column="0" Grid.RowSpan="2" 
        Background="{Binding CallStatus, Converter={StaticResource CallStatusBackgroundConverter}}" >
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <WrapPanel x:Name="ExtraCallPanel" Grid.Row="0" Style="{StaticResource SelectedAction}" VerticalAlignment="Center"
            Visibility="{Binding HasCalls, Converter={StaticResource BoolToVis}}" >
            <WrapPanel Background="Transparent" >
                <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                    <ContentControl Content="{DynamicResource calls_icon}"/>
                </Viewbox>
            </WrapPanel>
        </WrapPanel>

         <WrapPanel x:Name="ExtraAlarmPanel" Grid.Row="1" Style="{StaticResource SelectedAction}" VerticalAlignment="Center"
            Visibility="{Binding HasCalls, Converter={StaticResource BoolToVis}}" >
            <WrapPanel Background="Transparent" >
                <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                    <ContentControl Content="{DynamicResource alarm_icon}"/>
                </Viewbox>
            </WrapPanel>
        </WrapPanel>
    </Grid>

    <Border BorderBrush="{x:Null}" Margin="10,0,0,0" Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Center">
        <TextBlock x:Name="UserNameLabel" TextWrapping="Wrap" Text="{Binding Name}" Margin="0,5,0,0" 
            FontSize="16" VerticalAlignment="Center" Style="{StaticResource WhiteSegoeText}" />
    </Border>

    <Border x:Name="UserStatusPanel" BorderBrush="{x:Null}" Margin="10,0,0,0" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Center">
        <TextBlock x:Name="UserStatusLabel" TextWrapping="Wrap" Text="{Binding UserStatus}" 
            FontSize="13" VerticalAlignment="Center" Style="{StaticResource WhiteSegoeText}"  />
    </Border>

    <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}}" >
        <Viewbox StretchDirection="DownOnly" Stretch="Uniform">
            <Image x:Name="UserStatusIcon" Source="{Binding Status, Converter={StaticResource StatusIconConverter}}" />
        </Viewbox>
    </WrapPanel>

    <Grid x:Name="UserActionsPanel" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Center" Visibility="Collapsed" >
        <Grid.Resources>
            <Style TargetType="{x:Type WrapPanel}" BasedOn="{StaticResource SelectedAction}">
                <Setter Property="Margin" Value="5,0,5,0" />
            </Style> 
        </Grid.Resources>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <WrapPanel x:Name="MessageActionPanel" Grid.Column="0" MouseLeftButtonDown="Iconpanel1_MouseLeftButtonDown">
            <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                <ContentControl x:Name="MessageAction" Content="{StaticResource action_message}" />
            </Viewbox>
        </WrapPanel>

        <WrapPanel x:Name="ChatActionPanel" Grid.Column="1" MouseLeftButtonDown="Iconpanel2_MouseLeftButtonDown">
            <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                <ContentControl x:Name="ChatAction" Content="{StaticResource action_chat}" />
            </Viewbox>
        </WrapPanel>

        <WrapPanel x:Name="CallActionPanel" Grid.Column="2" MouseLeftButtonDown="Iconpanel3_MouseLeftButtonDown">
            <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                <ContentControl x:Name="CallAction" Content="{StaticResource action_call_icon}" />
            </Viewbox>
        </WrapPanel>

        <WrapPanel x:Name="SipCallActionPanel" Grid.Column="3" MouseLeftButtonDown="Iconpanel4_MouseLeftButtonDown">
            <Viewbox StretchDirection="DownOnly" Stretch="Uniform" >
                <ContentControl x:Name="SipCallAction" Content="{StaticResource action_sipcall_icon}" />
            </Viewbox>
        </WrapPanel>
    </Grid>
</Grid>
</UserControl>

但是这段代码在鼠标输入时将整个用户控件从左向右滑动。
我需要进行哪些更改才能使其只有 UserStatusPanel 和 UserActionsPanel 动画？