从屏幕底部滑动时，任务栏应该可见 - UWP [关闭]答案

【问题标题】：when swiping from bottom of screen, taskbar should be visible - UWP [closed]从屏幕底部滑动时，任务栏应该可见 - UWP [关闭]
【发布时间】：2021-12-18 00:43:12
【问题描述】：

我正在开发一个应用程序，它有一个类似 stackpanel 的任务栏，其中，当我从屏幕底部滑动时，任务栏 stackpanel 必须来自屏幕下方，就像在苹果 ipad 中一样，请帮助我，在此先感谢。

【问题讨论】：

标签： c# xaml uwp

【解决方案1】：

当从屏幕底部滑动时，任务栏应该是可见的 - UWP

根据您的要求，您需要检测任务栏的ManipulationDelta 事件，如果 Cumulative.Translation.Y 超过您的阈值，则调用双动画来向下或向上移动任务栏。 p>

例如

private bool _isSwiped;
private void StackPanel_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    if (e.IsInertial && !_isSwiped)
    {
        var swipedDistance = e.Cumulative.Translation.Y;

        if (Math.Abs(swipedDistance) <= 2) return;

        if (swipedDistance > 0)
        {
            Debug.WriteLine("down Swiped");
            DownAnimiation.Begin();
        }
        else
        {
            UpAnimation.Begin();
            Debug.WriteLine("up Swiped");            
        }
        _isSwiped = true;
    }
}

private void StackPanel_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    _isSwiped = false;
}

Xaml 代码

<Grid>
    <Grid.Resources>
        <Storyboard x:Name="DownAnimiation">
            <DoubleAnimation
                Storyboard.TargetName="BottomPanel"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                To="93"
                Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <BackEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="UpAnimation">
            <DoubleAnimation
                Storyboard.TargetName="BottomPanel"
                Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                To="0"
                Duration="0:0:0.5">
                <DoubleAnimation.EasingFunction>
                    <BackEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Grid.Resources>

    <StackPanel
        x:Name="BottomPanel"
        Height="95"
        Margin="5"
        VerticalAlignment="Bottom"
        Background="PaleGreen"
        CornerRadius="5"
        ManipulationCompleted="StackPanel_ManipulationCompleted"
        ManipulationDelta="StackPanel_ManipulationDelta"
        ManipulationMode="TranslateY,TranslateInertia,System">
        <StackPanel.RenderTransform>
            <CompositeTransform />
        </StackPanel.RenderTransform>
    </StackPanel>
</Grid>

【讨论】：

看来你的问题描述的不是很清楚，你可以尝试添加一些图片或截图。