如何在UWP中实现StackPanel鼠标悬停展开动画（默认隐藏于Grid）

嘿，这个效果在UWP里实现其实挺顺手的，咱们可以借助VisualStateManager来控制动画和状态切换，下面是完整的实现步骤，包你能搞定：

先搭好XAML布局 #

首先咱们构建页面的核心容器，用Grid当载体，里面放默认显示的「Text 1」，还有初始藏在Grid下方的StackPanel（里面放「Text 3」）。我给StackPanel加了个平移变换，用来控制它的弹出/隐藏：

<Grid x:Name="HoverContainer" Width="200" Height="60" Background="LightGray"
      PointerEntered="HoverContainer_PointerEntered"
      PointerExited="HoverContainer_PointerExited">
    <!-- 默认显示的文本 -->
    <TextBlock x:Name="DefaultText" Text="Text 1" FontSize="18" 
               HorizontalAlignment="Center" VerticalAlignment="Center"/>
    
    <!-- 悬停时才显示的面板，初始在容器下方藏着 -->
    <StackPanel x:Name="HoverPanel" Background="LightBlue" Width="200" Height="60"
                HorizontalAlignment="Left" VerticalAlignment="Top">
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="PanelTransform" Y="60"/> <!-- 初始下移容器高度，刚好完全隐藏 -->
        </StackPanel.RenderTransform>
        <TextBlock Text="Text 3" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </StackPanel>

    <!-- 定义视觉状态，控制动画和元素显隐 -->
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="HoverStates">
            <!-- 默认状态：面板隐藏，显示Text 1 -->
            <VisualState x:Name="NormalState">
                <Storyboard>
                    <!-- 面板下移回隐藏位置，带平滑动画 -->
                    <DoubleAnimation Storyboard.TargetName="PanelTransform" Storyboard.TargetProperty="Y"
                                     To="60" Duration="0:0:0.3" EasingFunction="CubicEase"/>
                    <!-- 显示默认文本 -->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DefaultText" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            
            <!-- 悬停状态：面板弹出，显示Text 3 -->
            <VisualState x:Name="PointerOverState">
                <Storyboard>
                    <!-- 面板上移到容器内，平滑过渡 -->
                    <DoubleAnimation Storyboard.TargetName="PanelTransform" Storyboard.TargetProperty="Y"
                                     To="0" Duration="0:0:0.3" EasingFunction="CubicEase"/>
                    <!-- 隐藏默认文本 -->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DefaultText" Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

两种方式触发状态切换 #

方式一：写点简单的后台C#代码 #

在页面的后台代码里，处理Grid的指针进入和离开事件，切换对应的视觉状态就行：

private void HoverContainer_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    VisualStateManager.GoToState(HoverContainer, "PointerOverState", true);
}

private void HoverContainer_PointerExited(object sender, PointerRoutedEventArgs e)
{
    VisualStateManager.GoToState(HoverContainer, "NormalState", true);
}

方式二：纯XAML实现（不用写后台） #

如果你不想碰后台代码，可以先安装Microsoft.Xaml.Behaviors.Uwp.Managed这个NuGet包，然后用交互触发器绑定事件：

<!-- 先添加命名空间到根元素 -->
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"

<Grid x:Name="HoverContainer" Width="200" Height="60" Background="LightGray">
    <!-- 布局和视觉状态部分和上面一样 -->
    
    <!-- 用交互触发器绑定指针事件，自动切换状态 -->
    <interactivity:Interaction.Behaviors>
        <core:EventTriggerBehavior EventName="PointerEntered">
            <core:GoToStateAction StateName="PointerOverState"/>
        </core:EventTriggerBehavior>
        <core:EventTriggerBehavior EventName="PointerExited">
            <core:GoToStateAction StateName="NormalState"/>
        </core:EventTriggerBehavior>
    </interactivity:Interaction.Behaviors>
</Grid>

效果说明 #

• 默认情况下，HoverPanel会下移整个Grid的高度，完全藏在下方，此时只显示「Text 1」。
• 鼠标悬停到Grid上时，面板会平滑向上滑入容器内，同时「Text 1」隐藏，显示「Text 3」。
• 鼠标离开后，面板又平滑滑回隐藏位置，恢复显示「Text 1」。

内容的提问来源于stack exchange，提问作者Boommer