Windows Phone 8.1 Action Center类页面设计

Question

我正在尝试使用平移变换在用户手指移动时从上到下移动页面表单中的对象。我们应该看到页面内容，因为栏在页面下方并位于底部。

就像 windows 中的操作中心 phone 8.1.

请让我知道我们如何设计的任何想法。谢谢

Answer 1

好问题！

我的第一个想法是做类似 this 的事情。您可以获得触摸输入位置，然后从屏幕顶部移动一个矩形并根据触摸输入的 Y 线向下移动它。

编辑： 好的，这是您可以做的。

创建一个 Canvas 并将其放置在顶部的某个位置（我在折叠状态下将其设置为 14 的高度）。

然后创建一个private void cn_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)事件并设置Canvas的高度。我还包含了一个 float i，如果用户在拉动事件期间松手，它会在稍后弹回或覆盖整个屏幕。

private void cn_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
        {
            cn.Height += e.DeltaManipulation.Translation.Y;
            i = (float)e.CumulativeManipulation.Translation.Y;

        }

就是这样。您还可以添加此事件以使其在用户松开时快速返回或覆盖全屏。

private void cn_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
        {
            if(i < 100)
            {
                cn.Height = 14; 
            }
            else
            {
                cn.Height = Application.Current.Host.Content.ActualHeight;  
            }
        }

当然，您可以添加更流畅的动画，使其慢慢回到折叠视图或填满整个页面。希望对您有所帮助！

Windows Phone 8.1 Action Center类页面设计

Windows Phone 8.1 Action Center like page design

xaml

windows-phone-8.1