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

目录
相关文章
|
3月前
|
Java 开发工具
鸿蒙Flutter实战:02-Windows环境搭建踩坑指南
本指南介绍如何搭建鸿蒙Flutter开发环境,包括下载Flutter SDK、配置环境变量(如FLUTTER_STORAGE_BASE_URL、PUB_HOSTED_URL、DEVECO_SDK_HOME等)和检查工具版本。还提到避免项目路径过深、与SDK同盘存放等注意事项,以及解决VsCode无法识别设备的方法。
79 0
|
5月前
|
开发者 iOS开发 C#
Uno Platform 入门超详细指南:从零开始教你打造兼容 Web、Windows、iOS 和 Android 的跨平台应用,轻松掌握 XAML 与 C# 开发技巧,快速上手示例代码助你迈出第一步
【8月更文挑战第31天】Uno Platform 是一个基于 Microsoft .NET 的开源框架,支持使用 C# 和 XAML 构建跨平台应用,适用于 Web(WebAssembly)、Windows、Linux、macOS、iOS 和 Android。它允许开发者共享几乎全部的业务逻辑和 UI 代码,同时保持原生性能。选择 Uno Platform 可以统一开发体验,减少代码重复,降低开发成本。安装时需先配置好 Visual Studio 或 Visual Studio for Mac,并通过 NuGet 或官网下载工具包。
492 0
|
8月前
|
前端开发 Linux iOS开发
【Flutter前端技术开发专栏】Flutter在桌面应用(Windows/macOS/Linux)的开发实践
【4月更文挑战第30天】Flutter扩展至桌面应用开发,允许开发者用同一代码库构建Windows、macOS和Linux应用,提高效率并保持平台一致性。创建桌面应用需指定目标平台,如`flutter create -t windows my_desktop_app`。开发中注意UI适配、性能优化、系统交互及测试部署。UI适配利用布局组件和`MediaQuery`,性能优化借助`PerformanceLogging`、`Isolate`和`compute`。
476 0
【Flutter前端技术开发专栏】Flutter在桌面应用(Windows/macOS/Linux)的开发实践
|
开发框架 前端开发 JavaScript
疯狂吐槽 MAUI 以及 MAUI 入坑知识点
窗口 窗口管理 如何限制一次只能打开一个程序 MAUI 程序安装模式 为 MAUI Blazor 设置语言 坑 ① 坑 ② 坑 ③ 配置 MAUI 项目使用管理员权限启动 问题背景 定制编译过程 MAUI 实现前后端分离开发 背景 先搞前端 创建 MAUI Blazor 项目 C# 自动化生成证书、本地安装证书、解决信任证书问题 背景 写代码 在 ASP.NET Core 中使用
2268 0
|
API 图形学 Android开发
Unity跨平台UI解决方案:可能是最全的FairyGUI系列教程-第七天
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
1063 0
|
算法 图形学
Unity 开发入门指南
学习 Unity 开发接近一年了,从开始对 Unity 一无所知,到现在能模仿制作出一个完整游戏,对个人成长来说,也算是一个不大不小的里程碑。这篇是对自己学习的总结与回顾,希望对 Unity 初学者有所帮助。
1333 0
|
图形学
Unity教程:GUI 界面开发
UI概述: UI永远是显示在屏幕的最前面上,不受变形、碰撞、光照的影响GUI概述:GUI是Graphical User Interface的缩写。Unity的图形界面系统能容易和快速创建出各种交互界面。
2361 0
|
C# Android开发 iOS开发
c#开发移动APP-Xamarin入门剖析
原文:c#开发移动APP-Xamarin入门剖析   剖析应用程序     Phoneword这个项目是.net标准库项目,它包含所有的共享代码和共享UI。   Phoneword.Android这个项目包含Android特定的代码,是Android应用程序的入口点。
1362 0
|
C# Android开发 Windows
c#开发移动APP-Xamarin入门
原文:c#开发移动APP-Xamarin入门   如果您在.net环境下做开发,并且对WPF技术有一定了解及应用,同时也想进入移动App开发领域,推荐使用Xamarin开发移动应用   关于Xamarin不做介绍,网上很多,这里主要涉及的是一些来自微软官网文章的翻译,希望能够帮助有需要的小伙伴,有...
2003 0

热门文章

最新文章