UWP 制作汉堡菜单及添加滑动手势

1.汉堡菜单界面：

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SplitView Name="MySplit">
            <SplitView.Pane>
                <TextBlock Text="汉堡菜单" VerticalAlignment="Center"/>
            </SplitView.Pane>
            <SplitView.Content>
                <TextBlock Text="内容" VerticalAlignment="Center"/>
            </SplitView.Content>
        </SplitView>
        <!--那个汉堡键-->
        <Button Name="Humberger" VerticalAlignment="Top" 
                            Width="48" Height="48" 
                            Background="Transparent"
                            Content="" 
                            FontFamily="Segoe MDL2 Assets" 
                            FontSize="18"
                            BorderThickness="0"
                            Click="Humberger_Click"/>
    </Grid>

给菜单键添加逻辑：

//汉堡菜单点击事件
private void Humberger_Click(object sender, RoutedEventArgs e)
{
    MySplit.IsPaneOpen = !MySplit.IsPaneOpen;
}

2.滑动事件：

首先定义一个全局变量x用来存储位移量：

private double x = 0;                       //用来接收手势水平滑动的长度 

然后在页面构造函数里面加入下面三行：

this.ManipulationMode = ManipulationModes.TranslateX;            //设置这个页面的手势模式为横向滑动
this.ManipulationCompleted += The_ManipulationCompleted;         //订阅手势滑动结束后的事件 
this.ManipulationDelta += The_ManipulationDelta;                 //订阅手势滑动事件

对应事件的处理：

//手势滑动中
private void The_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
	x += e.Delta.Translation.X;     //将滑动的值赋给x 
}


//手势滑动结束
private void The_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
	if (x > 100)              //判断滑动的距离
	MySplit.IsPaneOpen = true;    //打开汉堡菜单
	if (x < -100)
	MySplit.IsPaneOpen = false;
	x = 0;                         //清零x，不然x会累加
}

3.完整代码

界面

<Page
    x:Class="Humberger.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Humberger"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">


    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SplitView Name="MySplit">
            <SplitView.Pane>
                <TextBlock Text="汉堡菜单" VerticalAlignment="Center"/>
            </SplitView.Pane>
            <SplitView.Content>
                <TextBlock Text="内容" VerticalAlignment="Center"/>
            </SplitView.Content>
        </SplitView>
        <!--那个汉堡键-->
        <Button Name="Humberger" VerticalAlignment="Top" 
                            Width="48" Height="48" 
                            Background="Transparent"
                            Content="" 
                            FontFamily="Segoe MDL2 Assets" 
                            FontSize="18"
                            BorderThickness="0"
                            Click="Humberger_Click"/>
    </Grid>
</Page>

逻辑：

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;


//“空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 上有介绍


namespace Humberger
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        private double x = 0;                       //用来接收手势水平滑动的长度 


        public MainPage()
        {
            this.InitializeComponent();


            this.ManipulationMode = ManipulationModes.TranslateX;            //设置这个页面的手势模式为横向滑动
            this.ManipulationCompleted += The_ManipulationCompleted;         //订阅手势滑动结束后的事件 
            this.ManipulationDelta += The_ManipulationDelta;                 //订阅手势滑动事件


        }


        //手势滑动中
        private void The_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
        {
            x += e.Delta.Translation.X;     //将滑动的值赋给x 
        }


        //手势滑动结束
        private void The_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
        {
            if (x > 100)                    //判断滑动的距离
                MySplit.IsPaneOpen = true;    //打开汉堡菜单
            if (x < -100)
                MySplit.IsPaneOpen = false;   //关闭汉堡菜单
            x = 0;  //清零x，不然x会累加
        }


        //汉堡菜单点击事件
        private void Humberger_Click(object sender, RoutedEventArgs e)
        {
            MySplit.IsPaneOpen = !MySplit.IsPaneOpen;
        }
    }
}

效果如图：

注：滑动手势的处理我是参考了http://www.cnblogs.com/RodChong/p/5509350.html的方法，并在其基础上进行了改进，修复了他的版本反向滑动不能缩回而且位移量会累加导致反向滑动后正向滑动不能划出的问题。