Facebook like settings pane with gestures – windows phone

In my last post I showed you how to mimic the settings pane used in the Facebook app on windows phone through use of Visual States ( read it here… ).
But that solution was not 100% the same as in the Facebook app, it missed drag gestures.

So, let’s add those :)

First you’ll need to add the Windows Phone Toolkit nuget ( http://phone.codeplex.com/ )! Because it has a GestureListener, that you can hook up in XAML to almost any control. It will give you events for all possible windows phone gestures.

   1: <Grid x:Name="Container" Background="Transparent">

   2:     <toolkit:GestureService.GestureListener>

   3:         <toolkit:GestureListener DragDelta="GestureListener_OnDragDelta" DragCompleted="GestureListener_OnDragCompleted" />

   4:     </toolkit:GestureService.GestureListener>

You’ll notice that with this, we are hooking into the DragDelta and DragCompleted events. We are going to use these events to animate our page.

In the OnDragDelta event we will check to see if there has been a Horizontal gesture detected and if so, depending on what pane is already open, show the animation on screen! Take a look at the code below and you’ll notice some tricks to get this done! Basically we calculate how far the user is dragging the content and if he get’s passed DragDistanceToOpen ( or ToClose ), we will start the rest of the animation.

If the user stops the drag gesture before reaching the given distance variable, we animate the screen to the given distance… ( through use of the SetHorizontalOffset method )

   1: private void GestureListener_OnDragDelta(object sender, DragDeltaGestureEventArgs e)

   2: {

   3:     if (e.Direction == System.Windows.Controls.Orientation.Horizontal && e.HorizontalChange > 0 && !_isSettingsOpen)

   4:     {

   5:         double offset = _feRoot.GetHorizontalOffset().Value + e.HorizontalChange;

   6:         if (offset > _dragDistanceToOpen)

   7:             this.OpenSettings();

   8:         else

   9:         {

  10:             _feRoot.SetHorizontalOffset(offset);

  11:             _feSettings.SetHorizontalOffset(offset);

  12:         }

  13:     }


  15:     if (e.Direction == System.Windows.Controls.Orientation.Horizontal && e.HorizontalChange < 0 && _isSettingsOpen)

  16:     {

  17:         double offsetRoot = _feRoot.GetHorizontalOffset().Value + e.HorizontalChange;

  18:         double offsetSettings = _feSettings.GetHorizontalOffset().Value + e.HorizontalChange;

  19:         if (offsetRoot < _dragDistanceToClose)

  20:             this.CloseSettings();

  21:         else

  22:         {

  23:             _feRoot.SetHorizontalOffset(offsetRoot);

  24:             _feSettings.SetHorizontalOffset(offsetSettings);

  25:         }

  26:     }

  27: }

All this does is just animating the screen ‘while’ dragging.

Now next, we use the OnDragCompleted to finalize our animation, it’s almost the same code as above. The only difference now is that if the user has stopped his gesture and he has not passed the given distance, we will now reset the content to it’s original position. Giving us a ‘snap back’ animation.

   1: private void GestureListener_OnDragCompleted(object sender, DragCompletedGestureEventArgs e)

   2: {

   3:     if (e.Direction == System.Windows.Controls.Orientation.Horizontal && e.HorizontalChange > 0 && !_isSettingsOpen)

   4:     {

   5:         if (e.HorizontalChange < _dragDistanceToOpen)

   6:             this.ResetLayoutRoot();

   7:         else

   8:             this.OpenSettings();

   9:     }


  11:     if (e.Direction == System.Windows.Controls.Orientation.Horizontal && e.HorizontalChange < 0 && _isSettingsOpen)

  12:     {

  13:         if (e.HorizontalChange > _dragDistanceNegative)

  14:             this.ResetLayoutRoot();

  15:         else

  16:             this.CloseSettings();

  17:     }

  18: }

To do the actual animation of the pages, we use the Animate method on the given grids ( RootGrid and SettingGrid ), here the OpenSettings example…

   1: private void OpenSettings()

   2: {

   3:     var trans = _feRoot.GetHorizontalOffset().Transform;

   4:     trans.Animate(trans.X, 380, TranslateTransform.XProperty, 300, 0, new CubicEase

   5:         {

   6:             EasingMode = EasingMode.EaseOut

   7:         });


   9:     trans = _feSettings.GetHorizontalOffset().Transform;

  10:     trans.Animate(trans.X, 480, TranslateTransform.XProperty, 300, 0, new CubicEase

  11:     {

  12:         EasingMode = EasingMode.EaseOut

  13:     });


  15:     _isSettingsOpen = true;

  16: }

Now… if you’ll try this in your code you will see that some methods are missing! This because we are using some extension methods. I’m not taking credit for this, they are created by Colin Eberhardt, you can follow him on twitter https://twitter.com/ColinEberhardt or take a look at his blog http://www.scottlogic.com/blog/ceberhardt/ !

The extension methods used are: SetHorizontalOffset, GetHorizontalOffset and Animate the actual code is in the example provided below.

So with all this in place you will get a nice settings pane example with drag gestures enabled, just like the facebook app… if they do it the same way? I doubt it ;)


Everything is up on my github, just take a look here https://github.com/Depechie/SettingsPageAnimation




  1. Hello!
    Great tutorial, but I have a question. Do you know how to put the right panel? I try to add third grid with Margin=”480,0,0,0″ but this panel is not visible

  2. Hello, thank you for the solution!

    But can we add another settings panel from the right?

    Thanks in advance

  3. If I implement sliding menu like this will my app pass windows phone 8 certification process and appear on store ?
    Do you have some app on store that has menu like this ?

    Great article.

  4. Greate but there is a problem, when app is in landscape mode, have a black space beside the bar. Can you fix it?

  5. For everyone who has some problems with the design or layout – this is true!
    It was a quick fix that is in no way finished!
    So my suggestion – go take a look at this fine control on codeplex: http://slideview.codeplex.com/ by Cyril Cathala

  6. Great article and resources, but I can’t find the GetHorizontalOffset method as part of FrameworkElement. Is this method no longer available in Windows phone 8? If not, how can I get the necessary value to compute the offset.

  7. How would you do this on WP 8.1? There are several similar blogs / solutions as this one but no solutions to be found for WP 8.1.

Leave a Reply

Your email address will not be published. Required fields are marked *