可拖动 StackPanel Windows Phone 8.1

Question

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

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

我怎么能做到这一点？

编辑

我现在有：

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上的动画）实现触摸释放时上拉/下拉的效果。

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

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 事件并在那里运行关闭/打开动画。

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 中相同的动画效果（动画打开/关闭）。

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