可拖动的StackPanel Windows Phone 8.1

Question

我正在开发一个带有MapControl的Windows Phone 8.1应用程序作为我应用程序的主要焦点。我基本上想要像诺基亚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

为RenderTransform = new TranslateTransform()设置StackPanel，处理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 - 最有可能在发布版本中，因为它们更快）。