可拖动堆栈面板 Windows Phone 8.1

Question

我正在开发一个 Windows Phone 8.1 应用程序，其中 MapControl 作为我应用程序的主要焦点。我基本上想集成与诺基亚 Here 地图应用程序类似的体验设计。

底部的黑色框架可以向上拉以显示其内容。

我怎样才能做到这一点？

编辑

我现在有：

ExtraInfo.RenderTransform = new TranslateTransform();
            ExtraInfo.ManipulationDelta += OnManipulationDelta;
            ExtraInfo.ManipulationMode = Windows.UI.Xaml.Input.ManipulationModes.TranslateY;

在我的构造函数中事件处理程序

 private void OnManipulationDelta(object sender, Windows.UI.Xaml.Input.ManipulationDeltaRoutedEventArgs e)
        {
            try
            {
                Storyboard myStoryboard = (Storyboard)this.Resources["TestStoryboard"];

                TranslateTransform myTranslate = new TranslateTransform();
                myTranslate.Y = e.Delta.Translation.Y;
                ExtraInfo.RenderTransform = myTranslate;

                Storyboard.SetTarget(myStoryboard.Children[0] as DoubleAnimation, ExtraInfo);

                myStoryboard.Begin();
            }
            catch (Exception)
            {
                Debug.WriteLine("Animation called");
            }

        }

我的XAML

<Grid>
        <StackPanel>
            <Maps:MapControl Height="{Binding ActualHeight, ElementName=pageRoot}" x:Name="Map" LandmarksVisible="False" ZoomLevel="{Binding zoomlevel, Mode=TwoWay, FallbackValue=8}" MapServiceToken="#######" TrafficFlowVisible="True">

                <Image x:Name="NewCheckImage" Visibility="Collapsed" Maps:MapControl.Location="{Binding Center, ElementName=Map}" Maps:MapControl.NormalizedAnchorPoint=".5,.5"></Image>
            </Maps:MapControl>
            <StackPanel x:Name="ExtraInfo" Height="{Binding ActualHeight, ElementName=pageRoot}" Background="Black" Margin="0,-250,0,0" Canvas.ZIndex="1">
                <StackPanel.RenderTransform>
                    <TranslateTransform X="0" Y="0">
                    </TranslateTransform>
                </StackPanel.RenderTransform>
            </StackPanel>
        </StackPanel>
    </Grid>

故事板

<Page.Resources>
    <Storyboard x:Key="TestStoryboard">
        <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" 
                     To="0">
        </DoubleAnimation>
    </Storyboard>
</Page.Resources>

但是面板做了一些不可预测的跳跃动作。

Answer 1

为您的 StackPanel 设置 RenderTransform = new TranslateTransform()，处理 Page ManipulationDelta 事件并更改您的 (StackPanel.RenderTransform as TranslateTransform).Y 值。使用Storyboard（RenderTransform上的动画）实现触摸释放时拉动up/down的效果。

你应该这样做：（伪代码）

void OnStackPanelLoaded(..)
{
    StackPanel.VerticalAlingment = VerticalAlingment.Bottom;
    StackPanel.RenderTransform = new TranslateTransform(0, StackPanel.ActualHeight); 
   // translate stackpanel out of page, be sure stackpanel has bottom alingment of grid
}

void OnManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs args)
{
    var stackPanelTransform = MyStackPanel.RenderTransform as TranslateTransform;

    stackPanelTransform.Y += args.Delta.Translation.Y;
}

您还应该注册 ManipulationCompleted 活动，那里有运行 close/open 动画。

void OnManipulationCompleted(object sender, ManipulationCompletedEventArgs args)
{
     // you can also add additional logic here to reverse open/close logic
     // for example: if user touch translation delta is too small then instead of opening panel - close it like in Here 
     if (IsPanelOpened())
        Resources["ClosePanelStoryboard"].BeginStoryboard();
     else
        Resources["OpenPanelStoryboard"].BeginStoryboard();

}

bool IsPanelOpened()
{
    var translateTransform = myStackPanel.RenderTransform as TranslateTransform;

    return translateTransform.Y > double.Epsilon;
}

选中 DoubleAnimation.EasingFunction - 以实现与 Here Drive 相同的动画效果（动画 open/close）。

实现好的面板需要时间。最初它应该有 Opacity = 0，IsHitTest = false（因为它可以在页面开始时闪烁 - 在设置 RenderTransform 之前） - 你还应该注册到 StackPanel 中的 SizeChanged 事件以确保 TranslateTransform 设置正确（有时你可以得到 StackPanel.ActualHeight 值为 0 - 最有可能在发布版本中，因为它们更快）。

可拖动堆栈面板 Windows Phone 8.1

Draggable StackPanel Windows Phone 8.1

c#

xaml

here-api

windows-phone-8.1

编辑