The following forum(s) are migrating to a new home on Microsoft Q&A (Preview): Developing Universal Windows apps!

Ask new questions on Microsoft Q&A (Preview).
Interact with existing posts until December 13, 2019, after which content will be closed to all new and existing posts.

Learn More

 none
[UWP]How to open hamburger menu when I scrol by finger from left border to right RRS feed

  • Question

  • How to open hamburger menu when I scrol by finger from left border to right.

    I tap finger on the left border then move right and hamburger menu will be open


    My .NET Blog with projects and feedback.




    • Edited by SmartWhy Thursday, September 29, 2016 3:18 PM
    • Edited by Barry Wang Tuesday, October 4, 2016 7:46 AM title tag
    Thursday, September 29, 2016 3:18 PM

Answers

  • In your main page (or frame) you have to place a control on the left side, that listens to horizontal manipulation.

    Here's an example using a SplitView as Hamburgen menu:

      <SplitView.Content>
        <Grid>
          <!-- Navigation Frame -->
          <Frame x:Name="SplitViewFrame" />
          <!-- SplitViewOpener -->
          <Grid ManipulationMode="TranslateX"
                ManipulationCompleted="SplitViewOpener_ManipulationCompleted"
                Width="150"
                Background="Transparent"
                HorizontalAlignment="Left"
                VerticalAlignment="Stretch">
          </Grid>
        </Grid>
      </SplitView.Content>

    In the ManipulationCompleted event, you open the menu when you detected a swipe move (horizontal, to the right, and far enough):

    private void SplitViewOpener_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
    {
        if (e.Cumulative.Translation.X > 50)
        {
            MySplitView.IsPaneOpen = true;
        }
    }
    In a similar way you can allow the user to close the menu again. There's a working sample here.

    • Proposed as answer by Barry Wang Tuesday, October 4, 2016 7:46 AM
    • Marked as answer by Barry Wang Friday, October 7, 2016 5:44 AM
    Friday, September 30, 2016 5:42 AM