UWP开发入门(一)——SplitView

简介: 原文:UWP开发入门(一)——SplitView  接下来会写一个UWP(Universal Windows Platform)开发入门的系列,自己学习到哪里,有什么心得总结,就会写到哪里。本篇对适用于顶层导航的SplitView控件展开讨论。
原文: UWP开发入门(一)——SplitView

  接下来会写一个UWPUniversal Windows Platform)开发入门的系列,自己学习到哪里,有什么心得总结,就会写到哪里。本篇对适用于顶层导航的SplitView控件展开讨论。

  首先SplitViewWin10 UWP新增的控件,以前虽然可以通过DockPanel模拟出类似的效果,但又哪里及得上M$原生支持的SplitView快捷方便呢。

  至于为什么说SplitView适合顶层导航,可以参考目前尚为数不多的UWP APP,比如微博、QQ和网易等Win10 APP,基本都是通过SplitView将主界面分成左右两块PaneContent,在屏幕宽度减至一定程度,自动隐藏Pane,仅显示Content。又或者将导航菜单至于Pane中,通过汉堡菜单来控制是否显示,诸如此类。

  SplitView的类定义这里就不贴了,即使去除InheritedProtected的成员,也稍嫌有些多了。我们先从用法着手,再一点一点深入介绍比较重要的属性。

<SplitView IsPaneOpen="True"
           DisplayMode="Inline"
           OpenPaneLength="296">
    <SplitView.Pane>
        <TextBlock Text="Pane"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </SplitView.Pane>

    <Grid>
        <TextBlock Text="Content"
                   FontSize="24"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"/>
    </Grid>
</SplitView>

  这段XAML是图省事从MSDN上拷下来的,显示的效果呢如下图:

  简单的分析一下,SplitViewChildren一般有两个,默认左边Pane和右边Content。Pane的显示由IsPaneOpen这个属性决定,所以binding用在这里就对了。然后通过汉堡菜单来修改这个bindingbool值,你懂的。

  各位是不是觉得本篇实在太水了……别着急啊还没讲完呢……我们接下来看DisplayMode这个属性:

  这个属性是一个枚举值,各位英文不好的童鞋,你们有福了,在UWP文档匮乏更不会有中文的情况下,将有同样英文不好的我给你们翻译(圣光庇佑你们……)

Member

Value

Description

Overlay

0

1.Pane显示的时候浮在Content上面

2.隐藏的时候完全消失

3.点击非Pane区域会导致Pane隐藏

Inline

1

1.Pane显示的时候会将Content一屁股挤到旁边去

2.隐藏时无隐无踪

3.你点不点他,他还在那里……

CompactOverlay

2

1.根据CompactPaneLength的长度设置,死皮赖脸会露一点点出来

2.其他行为与Overlay保持一致

3.适用于导航菜单由图标+文字组成,展开显示全部,隐藏仅显示图标

CompactInline

3

1.你懂的

  属性CompactPaneLength,刚刚提到,给你的图标留点空间就行。

  属性OpenPaneLength,这个属性很有意思也很重要。如果你不去设置这个值,你会发现系统会自动计算。结果就是在PCPad上,足够空间的情况下,OverlayPane不会遮挡整个Content,会以一个美观的比列呈现。但UWP程序运行在Phone上时,Pane会完全的遮住Content,辣总感觉你自己体会。老司机这里一段话省了你多少时间啊QAQ(记得评论里感谢我)

  属性PanePlacement,这个没啥讲的,就是控制Pane显示在左边还是右边。

  最后以一个呆魔(Demo)截图作为结束:

  汉堡菜单,List导航栏,Pivot分类应有尽有,只在GayHub

  https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/XamlPivot

  另外本文参考:

  https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.splitview.aspx

目录
相关文章
|
关系型数据库 MySQL Go
MySQL数据库安装(超详细完整步骤)
MySQL数据库安装(超详细完整步骤)
1963 1
|
Java 中间件 Serverless
CSE:阿里在线应用如何演进成Serverless架构
**Cloud Service Engine**,简称**CSE**,是中间件部门研发的面向通用Serverless计算的中间件产品,目标是具备AWS Lambda的各种优势,同时可以解决AWS Lambda的关键技术缺陷。 AWS Lambda如果用于核心业务,可能会有以下缺陷:(仅代表个人观点) * 要求用户以Function为单位开发,全新的开发框架,云厂商强绑定。社区主
3555 0
|
C# 开发者 Windows
WPF 应用程序开发:一分钟入门
本文介绍 Windows Presentation Foundation (WPF),这是一种用于构建高质量、可缩放的 Windows 桌面应用程序的框架,支持 XAML 语言,方便 UI 设计与逻辑分离。文章涵盖 WPF 基础概念、代码示例,并深入探讨常见问题及解决方案,包括数据绑定、控件样式与模板、布局管理等方面,帮助开发者高效掌握 WPF 开发技巧。
384 65
|
11月前
|
人工智能 自然语言处理 搜索推荐
Open Notebook:开源 AI 笔记工具,支持多种文件格式,自动转播客和生成总结,集成搜索引擎等功能
Open Notebook 是一款开源的 AI 笔记工具,支持多格式笔记管理,并能自动将笔记转换为博客或播客,适用于学术研究、教育、企业知识管理等多个场景。
865 0
Open Notebook:开源 AI 笔记工具,支持多种文件格式,自动转播客和生成总结,集成搜索引擎等功能
|
11月前
|
存储 缓存 算法
【C语言】内存管理函数详细讲解
在C语言编程中,内存管理是至关重要的。动态内存分配函数允许程序在运行时请求和释放内存,这对于处理不确定大小的数据结构至关重要。以下是C语言内存管理函数的详细讲解,包括每个函数的功能、标准格式、示例代码、代码解释及其输出。
407 6
|
JavaScript 前端开发 索引
JS - includes 方法和 map 方法使用方式
这篇文章介绍了JavaScript中数组的`includes`方法和`map`方法的用法,包括它们的语法、参数说明和具体的示例代码。`includes`方法用于判断数组是否包含特定元素,而`map`方法用于对数组中的每个元素执行操作并返回新数组。
501 1
|
应用服务中间件 API 数据库
Docker 安装 KONG 带你玩转 API 网关
**摘要:** 在微服务架构中,API网关Kong作为流行开源选择,提供身份验证、安全和流量控制等功能。通过Docker部署Kong简单高效。步骤包括:创建Docker网络,部署PostgreSQL数据库,初始化Kong数据库,启动Kong容器,并检查运行状态。此外,安装Konga管理界面便于直观管理Kong。使用Docker命令行,逐步设置环境变量和网络连接,即可完成安装。当不再需要时,可清理相关容器和网络。Kong结合Konga,为API管理提供强大且用户友好的解决方案。
1164 1
|
敏捷开发 开发者
Code Review 全面审查清单
Code Review 全面审查清单
1072 0
Code Review 全面审查清单
|
存储 SQL 运维
揭秘如何通过日志服务实现个人敏感信息保护
【2月更文挑战第3天】阿里云日志服务SLS(Simple Log Service)为保护个人敏感信息提供了全面的数据安全策略。在数据采集阶段,客户端可以对包含敏感信息的日志进行AES加密后上报至SLS中心Logstore,利用HTTPS加密链路保障传输安全。在存储环节,SLS支持对敏感字段进行专门的脱敏处理,如替换、哈希或截断等手段,确保原始敏感信息不被明文暴露。对于需要使用日志数据的业务方,SLS允许在分发前对敏感数据进行解密并再次脱敏,以满足合规性和安全性要求。通过精细的权限管理和审计功能,SLS可记录所有访问和操作日志,确保任何对敏感数据的操作都可追溯。
|
机器学习/深度学习 搜索推荐 数据管理
语义检索系统:基于Milvus 搭建召回系统抽取向量进行检索,加速索引
语义检索系统:基于Milvus 搭建召回系统抽取向量进行检索,加速索引
语义检索系统:基于Milvus 搭建召回系统抽取向量进行检索,加速索引