title: Draggable StackPanel Windows Phone 8.1
body: <p>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.</p>
  
  <p>The bottom black Frame can be pulled upwards to reveal its content.</p>
  
  <p>How am I able to do this?</p>
  
  <p><img src="https://i.stack.imgur.com/bV9R1.png" alt="enter image description here"></p>
  
  <h2>EDIT</h2>
  
  <p>I now have:</p>
  
  <pre><code>ExtraInfo.RenderTransform = new TranslateTransform();
              ExtraInfo.ManipulationDelta += OnManipulationDelta;
              ExtraInfo.ManipulationMode = Windows.UI.Xaml.Input.ManipulationModes.TranslateY;
  </code></pre>
  
  <p>in my constructor
  The eventhandler</p>
  
  <pre><code> 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");
              }
  
          }
  </code></pre>
  
  <p>My XAML</p>
  
  <pre><code>&lt;Grid&gt;
          &lt;StackPanel&gt;
              &lt;Maps:MapControl Height="{Binding ActualHeight, ElementName=pageRoot}" x:Name="Map" LandmarksVisible="False" ZoomLevel="{Binding zoomlevel, Mode=TwoWay, FallbackValue=8}" MapServiceToken="#######" TrafficFlowVisible="True"&gt;
  
                  &lt;Image x:Name="NewCheckImage" Visibility="Collapsed" Maps:MapControl.Location="{Binding Center, ElementName=Map}" Maps:MapControl.NormalizedAnchorPoint=".5,.5"&gt;&lt;/Image&gt;
              &lt;/Maps:MapControl&gt;
              &lt;StackPanel x:Name="ExtraInfo" Height="{Binding ActualHeight, ElementName=pageRoot}" Background="Black" Margin="0,-250,0,0" Canvas.ZIndex="1"&gt;
                  &lt;StackPanel.RenderTransform&gt;
                      &lt;TranslateTransform X="0" Y="0"&gt;
                      &lt;/TranslateTransform&gt;
                  &lt;/StackPanel.RenderTransform&gt;
              &lt;/StackPanel&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
  </code></pre>
  
  <p>The storyboard</p>
  
  <pre><code>&lt;Page.Resources&gt;
      &lt;Storyboard x:Key="TestStoryboard"&gt;
          &lt;DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)" 
                       To="0"&gt;
          &lt;/DoubleAnimation&gt;
      &lt;/Storyboard&gt;
  &lt;/Page.Resources&gt;
  </code></pre>
  
  <p>But the panel does some jumpy unpredictable moves.</p>