UWP开发：如何实现从屏幕底部滑动唤起类taskbar的StackPanel交互效果

1. 基础布局配置 #

首先调整XAML结构，给目标StackPanel设置默认屏幕外偏移，开启手势监听权限：

<Page ...>
    <Grid>
        <!-- 页面其他业务内容 -->
        <StackPanel x:Name="Taskbar" 
                    Height="80" 
                    VerticalAlignment="Bottom"
                    Background="{ThemeResource SystemControlAcrylicElementBrush}"
                    ManipulationMode="TranslateY"
                    RenderTransformOrigin="0.5,0.5">
            <StackPanel.RenderTransform>
                <!-- 默认Y偏移等于自身高度，完全隐藏在屏幕外 -->
                <TranslateTransform x:Name="TaskbarTransform" Y="80"/>
            </StackPanel.RenderTransform>
            <!-- 任务栏内部自定义控件 -->
        </StackPanel>
    </Grid>
</Page>

2. 后台手势逻辑实现 #

2.1 基础变量定义 #

// 标记任务栏当前展开状态
private bool _isTaskbarOpen = false;
// 触发状态切换的最小滑动距离，可根据需求调整
private const double _minSwipeThreshold = 30;

2.2 注册手势事件 #

public MainPage()
{
    this.InitializeComponent();
    // 开启页面垂直方向手势监听
    this.ManipulationMode = ManipulationModes.TranslateY;
    this.ManipulationDelta += OnPageManipulationDelta;
    this.ManipulationCompleted += OnPageManipulationCompleted;
}

2.3 实时跟随滑动逻辑 #

private void OnPageManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    // 计算滑动后的任务栏偏移值
    var newY = TaskbarTransform.Y - e.Delta.Translation.Y;
    // 限制偏移范围：0为完全展开，等于自身高度为完全收起
    newY = Math.Clamp(newY, 0, Taskbar.ActualHeight);
    TaskbarTransform.Y = newY;
}

2.4 滑动结束状态判断 #

private void OnPageManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    var totalSwipeY = e.Cumulative.Translation.Y;
    // 向上滑动超过阈值，且当前为收起状态：执行展开
    if (totalSwipeY < -_minSwipeThreshold && !_isTaskbarOpen)
    {
        AnimateTaskbar(0);
        _isTaskbarOpen = true;
    }
    // 向下滑动超过阈值，且当前为展开状态：执行收起
    else if (totalSwipeY > _minSwipeThreshold && _isTaskbarOpen)
    {
        AnimateTaskbar(Taskbar.ActualHeight);
        _isTaskbarOpen = false;
    }
    // 未达到阈值，回弹到原有状态
    else
    {
        AnimateTaskbar(_isTaskbarOpen ? 0 : Taskbar.ActualHeight);
    }
}

3. 平滑过渡动画实现 #

private void AnimateTaskbar(double targetY)
{
    var animation = new DoubleAnimation
    {
        To = targetY,
        // 动画时长和iPad交互效果对齐
        Duration = TimeSpan.FromMilliseconds(250),
        // 缓动函数模拟原生弹性效果
        EasingFunction = new CubicEase { EasingMode = EasingMode.EaseOut }
    };
    Storyboard.SetTarget(animation, TaskbarTransform);
    Storyboard.SetTargetProperty(animation, nameof(TranslateTransform.Y));
    var storyboard = new Storyboard();
    storyboard.Children.Add(animation);
    storyboard.Begin();
}

可选优化点 #

• 限制触发区域：可在ManipulationStarted事件中判断触摸起始点是否处于屏幕底部10~20px的触发区内，不符合则直接中断手势处理，和iPad的触发逻辑完全对齐，避免全页面滑动都唤起任务栏。
• 适配多分辨率：所有偏移值都用Taskbar.ActualHeight动态获取，不要写死固定数值，适配不同设备的缩放比例。
• 补充鼠标交互：可额外监听屏幕底部区域的鼠标悬停事件，实现鼠标靠近自动唤起的效果，和触摸逻辑分开处理即可。

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