SplitView(汉堡菜单)是win10新加的一种控件,顾名思义,其实就是将视图分割成两部分,废话不多说,下面来介绍一下SplitView的基本用法。

首先介绍几个SplitView经常用到的属性。(我直接搬MSDN的。。。

IsPaneOpen Read/write Gets or sets a value that specifies whether the SplitView pane is expanded to its full width.
PaneBackground Read/write Gets or sets the Brush to apply to the background of the Pane area of the control.
CompactPaneLength Read/write Gets or sets the width of the SplitView pane in its compact display mode.
OpenPaneLength Read/write Gets or sets the width of the SplitView pane when it's fully expanded.
DisplayMode Read/write Gets of sets a value that specifies how the pane and content areas of a SplitView are shown.

DisplayMode就是控制SplitView的展开样式,有4个值,Overlay,Inline,CompactOverlay,CompactInline。具体效果可以自行编写查看。此例中pc版设置为CompactOverlay,mobile版设置为Overlay

好的,介绍完毕,那么我们开始实战。首先看看demo运行的效果。

那么接下来我们先看代码布局,我们采用将汉堡Button单独放在SplitView外面。以下是汉堡Button的布局代码,这里说一下,汉堡图标的样式采用字体图标,字体为Segoe MDL2 Assets,更多图标请点此链接->http://modernicons.io/segoe-mdl2/cheatsheet/

        <Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Height="40" Background="LightGray" Orientation="Horizontal">
<Button Background="Transparent" BorderThickness="0" VerticalAlignment="Top" Click="Menu_Click">
<Button.Content>
<TextBlock Text="" FontSize="30" FontFamily="Segoe MDL2 Assets" ></TextBlock>
</Button.Content>
</Button>
<TextBlock Margin="10" VerticalAlignment="Center" FontFamily="40" Text="SplitView Demo"></TextBlock>
</StackPanel>

  接下来当然就是SplitView的代码了。Pane是可隐藏视图,里面采用的ListView控件,Content是主要视图。

<SplitView Grid.Row="1" x:Name="splitView" CompactPaneLength="48" OpenPaneLength="150"
IsPaneOpen="False" PaneBackground="LightGray" DisplayMode="CompactOverlay">
<SplitView.Pane>
<ListView x:Name="hambLv" IsItemClickEnabled="True" ItemClick="hambLv_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="{Binding Symbol}"/>
<TextBlock Margin="18" Text="{Binding Text}" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</SplitView.Pane>
<SplitView.Content>
<TextBlock x:Name="content" FontSize="30"></TextBlock>
</SplitView.Content>
</SplitView>

至此,前台代码完成。


后台代码首先是汉堡Button控制SplitView的展开与收起。

         private void Menu_Click(object sender, RoutedEventArgs e)
{
splitView.IsPaneOpen = !splitView.IsPaneOpen;
}

我们定义一个HambList新类用以封装。

     public class HambList
{
public string Text { get; set; }
public Symbol Symbol { get; set; }
}

然后在页面代码中生成ViewItem,并作为ListView的数据源。

         ObservableCollection<HambList> hambList = new ObservableCollection<HambList>();  //这里注意要引入System.Collections.ObjectModel命名空间;
protected override void OnNavigatedTo(NavigationEventArgs e)
{
hambList.Clear();
hambList.Add(new HambList { Text = "People", Symbol = Symbol.People });
hambList.Add(new HambList { Text = "Phone", Symbol = Symbol.Phone });
hambList.Add(new HambList { Text = "Message", Symbol = Symbol.Message });
hambList.Add(new HambList { Text = "Mail", Symbol = Symbol.Mail });
base.OnNavigatedTo(e);
}
 this.hambLv.ItemsSource = hambList;  //将hambList集合绑定到ListView控件

接下来,我们将List每个项的Text属性显示到Content部分的TextBlock控件里。

         private void hambLv_ItemClick(object sender, ItemClickEventArgs e)
{
content.Text = (e.ClickedItem as HambList).Text;
}

最后,我们判断一下用户设备,如果是mobile就把DisplayMode设置为Overlay。

             ResourceContext resContext = ResourceContext.GetForCurrentView();
string value = resContext.QualifierValues["DeviceFamily"];
if (value == "Mobile")
{
splitView.DisplayMode = SplitViewDisplayMode.Overlay;
}

好了,本文介绍SplitView就此结束。

Demo下载链接:http://pan.baidu.com/s/1dDqHnvr

【Win10开发】关于汉堡菜单-SplitView的用法的更多相关文章

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

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

  2. (UWP开发)在ListView中通过向右滑动展开汉堡菜单

    首先在移动APP开发中,手势滑动已经成为一个必备的技能,无论大大小小的APP都需要拥有手势滑动功能.在Android和iOS操作系统的APP中,手势滑动比较普及.然而由于国内有关UWP应用的教程比较少 ...

  3. 张高兴的 UWP 开发笔记:汉堡菜单进阶

    不同于Windows 8应用,Windows 10引入了"汉堡菜单"这一导航模式.说具体点,就拿官方的天气应用来说,左上角三条横杠的图标外加一个SplitView控件组成的这一导航 ...

  4. 张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

    所谓 UWP 样式的汉堡菜单,我曾在"张高兴的 UWP 开发笔记:汉堡菜单进阶"里说过,也就是使用 Segoe MDL2 Assets 字体作为左侧 Icon,并且左侧使用填充颜色 ...

  5. WPF实现Win10汉堡菜单

    WPF开发者QQ群: 340500857  | 微信群 -> 进入公众号主页 加入组织 前言 有小伙伴提出需要实现Win10汉堡菜单效果. 由于在WPF中没有现成的类似UWP的汉堡菜单,所以我们 ...

  6. 10分钟制作UWP汉堡菜单

    什么是汉堡菜单? 汉堡菜单,指的是一个可以弹出和收回的侧边栏.在UWP和Android应用中,汉堡菜单都非常常见. 首先我们列出所有需要掌握的前置知识: 1,SplitView 2,StackPane ...

  7. 使用MvvmCross框架实现Xamarin.Forms的汉堡菜单布局

    注:本文是英文写的,偷懒自动翻译过来了,原文地址:Implementing MasterDetail layout in Xamarin.Forms by MvvmCross 欢迎大家关注我的公众号: ...

  8. uwp汉堡菜单的实现

    ---恢复内容开始--- 现在uwp上面的汉堡菜单(就是那个三道杠,点击之后会出现菜单)使用的越来越普遍,比如微软自己家的Cortana.现在我使用的实现方法是使用SplitView实现.首先Spli ...

  9. iOS 开发多线程篇—GCD的常见用法

    iOS开发多线程篇—GCD的常见用法 一.延迟执行 1.介绍 iOS常见的延时执行有2种方式 (1)调用NSObject的方法 [self performSelector:@selector(run) ...

随机推荐

  1. [ZigBee] 2、 ZigBee开发环境搭建

    本节介绍ZigBee基本开发环境搭建,附件中有本节介绍的软件下载地址~ 链接:http://pan.baidu.com/s/1bLdqxg 1.IAR Embedded Workbench 的安装 S ...

  2. 使用ViwePager显示图片时如何防止内存泄露。

    内存泄露的检测. 1. 在Android Studio中运行你的应用,然后切换到输出窗口的Android tab. 2. 尽情的玩耍你的应用,最好各个功能都用到,如果是Viewpager,则多滑动一些 ...

  3. django开发个人简易Blog——构建项目结构

    开发之前第一步,就是构造整个的项目结构.这就好比作一幅画,第一步就是描绘轮廓,有了轮廓,剩下的就是慢慢的填充细节.项目结构规划如下图: 项目结构描述: 本项目以fengzhengBlog为根目录. a ...

  4. Linux grep总结(转)

    源自:http://www.cnblogs.com/end/archive/2012/02/21/2360965.html 1.作用Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表 ...

  5. Springlake-02 权限&文档设置&Role设置&Folder设置&登录

    1. 权限 有3个默认的权限用户: 1.System Owner so 管理员权限全部:Type Setup; Group Setup; Form Setup; Role Setup; Share R ...

  6. 转 jsp中 session的简单用法

    Session对象:是用来分别保存每一个用户信息的对象,以便于跟踪用户的操作状态.Session的信息保存在服务端,Session的ID保存在客户机的Cookie中.事实上,在许多服务器上,如果浏览器 ...

  7. rabbitmq消息队列——"Hello World!"

    RabbitMQ 一."Hello World!" 1.简介: RabbitMQ是一种消息中间件,主要思想很简单:接收消息并转发.你可以将它设想为一个邮局:你往里面发送邮件并确保邮 ...

  8. TextView 显示内容时出现 ArrayIndexOutOfBoundsException 的解决方法(Android 4.1)

    很久以前做的表情输入及显示,用的系统的SpannableString,完成后的代码在其他版本的Android手机上没有问题,但是在在4.1和4.1.1的手机上显示时,有概率出现程序崩溃的问题. 下面是 ...

  9. javascript_core_08之闭包、对象、原型

    1.闭包: ①外层函数包裹受保护的变量和操作变量的内层函数: ②外层函数将内层函数返回到外部: ③调用外部函数,获得内层函数的对象: 2.面向对象:用对象描述现实一个具体事物属性和功能,按需调用功能, ...

  10. mysql创建数据库

    mysql创建数据库 创建utf8编码的数据库 CREATE DATABASE IF NOT EXISTS my_db default character set utf8 COLLATE utf8_ ...