Draggable StackPanel Windows Phone 8.1

Question

I'm developing a Windows Phone 8.1 app with a MapControl as the main focal point of my app. I basically want to integrate a similar experience design wise as the Nokia Here Maps App.

The bottom black Frame can be pulled upwards to reveal its content.

How am I able to do this?

enter image description here

EDIT

I now have:

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

in my constructor The eventhandler

 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");
            }

        }

My 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>

The storyboard

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

But the panel does some jumpy unpredictable moves.

fex fex · Accepted Answer · 2015-03-21T21:17:04

Set RenderTransform = new TranslateTransform() for your StackPanel, handle Page ManipulationDelta event and there change your (StackPanel.RenderTransform as TranslateTransform).Y value. Use Storyboard (animation on RenderTransform) to achieve effect of pulling up/down on touch release.

You should do something like this: (pseudocode)

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;
}

You should also register to ManipulationCompleted event and there run close/open animation.

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;
}

Check DoubleAnimation.EasingFunction - to achieve same animation effect like in Here Drive (animated open/close).

Implementing good panel takes time. Initially it should have Opacity = 0, IsHitTest = false (because it can blink on page start - before RenderTransform is set) - you should also register to SizeChanged event in StackPanel to ensure that TranslateTransform is set correctly (sometimes you can get StackPanel.ActualHeight value of 0 - most likely in release build because they're faster).

Draggable StackPanel Windows Phone 8.1

EDIT

1 Answers