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

原创 2017年03月02日 17:54:08

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的方法,并在其基础上进行了改进,修复了他的版本反向滑动不能缩回而且位移量会累加导致反向滑动后正向滑动不能划出的问题。

版权声明:本文为博主原创文章,未经博主允许不得转载。

UWP开发,如何做出汉堡菜单

UWP新的设计规范推荐使用汉堡菜单,效果如下: 如何制作这种效果,其实很简单: 添加分屏视图SplitView Pane属性是菜单项 ...
  • bfboys
  • bfboys
  • 2016年09月27日 16:01
  • 843

Win10 UWP 开发系列:使用SplitView实现汉堡菜单及页面内导航

在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便。全景视图因为对设计要求比较高,自己总是做不出好的效果。对于一般的新闻阅读类Ap...
  • igweyou
  • igweyou
  • 2016年01月14日 13:27
  • 1834

【Win10开发】关于汉堡菜单-SplitView的用法

SplitView(汉堡菜单)是win10新加的一种控件,顾名思义,其实就是将视图分割成两部分,废话不多说,下面来介绍一下SplitView的基本用法。 首先介绍几个SplitView经常用到的...
  • bfboys
  • bfboys
  • 2016年09月27日 15:08
  • 236

IOS添加滑动手势

使用手势很简单,分为三步: 1 创建手势识别器对象实例。创建时,指定一个回调方法,当手势开始,改变、或结束时,执行回调方法。 2 设置手势识别器对象实例的相关属性(可选部分...
  • lgx_admin
  • lgx_admin
  • 2016年03月22日 14:11
  • 513

虎嗅APP汉堡菜单逻辑解析

掏出手机,打开虎嗅,开始了软文之旅。虎嗅APP不得不说是我了解互联网世界的一扇窗口。          若干篇咨询过后,停顿下来,闲暇之余,端详这款熟悉而又陌生的面孔。          APP...
  • IT_Surfer
  • IT_Surfer
  • 2015年05月27日 21:34
  • 441

Swift基础--手势识别(双击、捏、旋转、拖动、划动、长按)

// // ViewController.swift // JieUITapGestureRecognizer // // Created by jiezhang on 14-10-4. // ...
  • jwzhangjie
  • jwzhangjie
  • 2014年10月16日 14:42
  • 29960

用UWP编写音乐播放器

一、首先是设计界面:      
  • Wind_white
  • Wind_white
  • 2017年03月18日 20:01
  • 953

UICollectionViewController 实现利用手势滑动选择

代码例子:http://pan.baidu.com/s/1bn06eOf   http://download.csdn.net/detail/qqmcy/6887385 Cell.h ...
  • qqMCY
  • qqMCY
  • 2014年01月27日 14:03
  • 3623

ios学习笔记----实现一个带滑动手势的tabBarViewController,并可自定义tabBar

我又来啦····最近在准备实习,渣渣的工作路程就要开始啦啦啦啦···· 闲话少说,进入正题吧~····之前在做项目的时候很多时候用到tabBarViewController这个东西,ios uikit...
  • KeKeQiaoKeLi
  • KeKeQiaoKeLi
  • 2014年03月04日 21:39
  • 3067

【android开发】手势滑动关闭Activity(随手指消失)的辅助类的实现

【CSDN抽风,把我写一个多小时的东西覆盖了。真的是哔了狗了,自己又没有备份。。。重写吧。。。】这个类主要是实现向右滑动关闭Activity,效果如下: 老套路,先写思路: 1)将Activity...
  • LanTingShuXu
  • LanTingShuXu
  • 2016年12月01日 17:51
  • 1563
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:UWP 制作汉堡菜单及添加滑动手势
举报原因:
原因补充:

(最多只允许输入30个字)