XAML学习笔记——Layout(四)

SplitView

  SplitView简介

  在学习SplitView之前,我们需要明确它的重要性。SplitView在UWP中有很重要的地位,它是UWP响应式布局主要技术,更是作为非常多UWP项目的核心布局。现在绝大部分win10应用的主框架布局都为SplitView,先看一个在win10中常见的系统设置窗口:

  截图中,主窗体被分为两部分,一部分为用紫色画笔标记的部分,用来放置系统设置项;其余部分为主窗口,用来显示对应设置项的具体设置内容,像这种将主窗口分成两个视图的布局方式即为分屏式布局——SplitView

  分屏式布局方式的提出,解决了由于传统水平式导航栏受到屏幕尺寸限制而导致不能完全显示的问题。如果将图中的设置项以导航的样式在顶部一字排开,在很多移动终端就很难排开。为了解决这个问题,SplitView将整个布局面板分成两个部分,专门将其中的一部分用来实现导航布局(SplitView.Pane),这部分实质上为一个布局面板,用于导航项目的布局(实际也可以干别的用。。比如放logo)另一部分则为内容窗口(SplitView.Content)用来显示主要内容,从代码角度看基本架构如下:

1  <SplitView>
2             <SplitView.Pane>
3                 <TextBlock Text="SplitView.Pane"/>
4             </SplitView.Pane>
5             <SplitView.Content>
6                 <TextBlock Text="SplitView.Content"/>
7             </SplitView.Content>
8 </SplitView>

  要实现一个完整的分屏布局还需要其他技术的支持,本篇随笔先介绍SplitView最基本内容,综合应用会后续介绍。。

  常用属性及应用

  1.IsPaneOpen和DisplayMode

  在简单介绍SplitView之后,我们来介绍一些SplitView 的常用属性及其应用。针对Pane和Content的显示方式,SplitView提供了一系列属性进行控制,其中最常用的同时也是

必须要掌握的两个属性,即为IsPaneOpen和DisplayMode:

  • IsPaneOpen控制Panel的显隐状态,True为显示状态,False为隐藏状态。
  • DisplayMode控制Panel展示时的状态和与Content的交互关系(此处词穷)用一张图片说明:)图中紫色的部分为Panel,蓝色的部分为Content,白色的双向箭头代表Content中的内容。

  图片放的很大,因为这两个属性的应用这是本篇随笔的核心。。

  以最后一组为例:

  当IsPaneOpen=“True”、DisplayMode=“CompactOverlay”时,Pane面板会浮动在Content内容上方,并且留出一部分,一般放置导航项的图标。

  当IsPaneOpen=“False”、DisplayMode=“CompactOverlay”时,即将Pane关闭时,Pane面板完全隐藏,只剩下预留部分(图标)。以win10的天气预报应用为例:

  IsPaneOpen=“False”时:

  IsPaneOpen=“True”时:

(本来想要等到晴天再截个图,无奈总也不晴。。)

  我们需要一个按钮(菜单项、“汉堡按钮”或者其他的东东),来控制Pane面板的显隐状态。但是这个东东并没有内置在SplitView中,需要我们自己写代码实现。这部分内容也同样会在后续专题中介绍。

  2.OpenPaneLength、PanePlacement和PaneBackground

  SplitView中还专门为Pane设定了一些属性,这些属性很好理解,在此列举一下:

  OpenPaneLength属性用来设置pane展开时的长度。

  PanePlacement属性用来设置Pane的显示位置(左侧or右侧)。

  PaneBackground属性用来设置Pane的背景色。

  

  关于SplitView中最基本的内容先介绍到这里,具体的例子准备以后写个专题篇单独介绍。。

时间: 2024-11-03 01:19:03

XAML学习笔记——Layout(四)的相关文章

XAML学习笔记——Layout(二)

本篇随笔将简单介绍两种基本的布局——Grid布局和VariableSizedWrapGrid布局. Grid布局 顾名思义,Grid布局将布局容器以行和列的分割方法拆分成若干单元格,然后通过指定子元素所属单元格的行编号(Grid.Row)与列编号(Grid.Column)的方式将一个或多个子元素排列在指定的单元格中,从而以表格的形式排列子元素.从功能和设计方式上讲,Grid布局排列子元素的行为和HTML中的 table 类似,但是使用方式更加灵活.Grid布局在开发过程中多用于表单的开发设计,并

Android学习笔记(四七):Content Provider初谈和Android联系人信息

Content Provider 在数据处理中,Android通常使用Content Provider的方式.Content Provider使用Uri实例作为句柄的数据封装的,很方便地访问地进行数据的增.删.改.查的操作.Android并不提供所有应用共享的数据存储,采用content Provider,提供简单便捷的接口来保持和获取数据,也可以实现跨应用的数据访问.简单地说,Android通过content Provider从数据的封装中获取信息. Content provider使用Uri

【转】 Pro Android学习笔记(四十):Fragment(5):适应不同屏幕或排版

目录(?)[-] 设置横排和竖排的不同排版风格 改写代码 对于fragment,经常涉及不同屏幕尺寸和不同的排版风格.我们在基础小例子上做一下改动,在横排的时候,仍是现实左右两个fragment,在竖排时,如下图显示: 屏幕上只显示一个fragment,点击列表上的数目,进入到简介的activity.下面介绍实现的方式. 设置横排和竖排的不同排版风格 在 Pro Android学习笔记(四):了解Android资源(下)的“资源和配置的变更”中,我们介绍了如何同资源文件夹名设置不同资源.缺省的l

《iOS应用逆向工程》学习笔记(四)iOS程序类型

越狱iOS中最常见的程序有Application, Dynamic Library和Daemon三类. 1.Application 除了传统意义上的App外,越狱iOS平台上还有两种App形式的存在:WeeApp(依附于NotificationCenter的App)和PreferenceBundle(依附于Settings的App),常见于Cydia平台. 普通App的bundle中存放的是可执行程序和所需资源,而framework的bundle中存放的是动态链接库. 主要关注App中的三个部分

疯狂Android讲义 - 学习笔记(四)

Android应用通常有多个Activity,多个Activity组成Activity栈,当前活动的Activity位于栈顶.Activity相当于Java Web开发的Servlet.当Activity处于Android应用运行时,同样受系统控制.有生命周期. 4.1 建立.配置和使用Activity 4.1.1 Activity 建立自己的Activity需要集成Activity基类,在不同的应用场景,有时也能集成Activity的子类. Activity间接或直接继承了Context.Co

《CSS网站布局实录》学习笔记(四)

第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一般采用横向导航. 纵向导航:纵向导航更倾向于表达产品的分类. 下拉导航:主要用于功能复杂的网站. 总的来说,导航的核心目标就是设计一个简单.快捷的操作入口,帮助用户快速地到达网站中的 内容.这里将使用CSS来对这3种常见的导航进行设计. 4.1.1 横向导航 假设目前有6个频道,如果用传统的表格式布

mysql学习笔记 第四天

mysql引擎: archive(档案)[数据插入以后不能被修改,只读] blackhole[这种写操作是删除数据,读操作是返回空白记录] CSV[在储存数据时以逗号作为数据项之间的分隔符] example[示例(存根)储存引擎] Falcon[用来进行处理事务的储存类型] federated[用来访问远程数据表的储存引擎] InnoDB[具备外键支持功能的事务处理引擎] memory[内存里的数据表] merge[用来管理多个MyISAM数据表构成的数据表集合(merg-myisam)] my

最大熵学习笔记(四)模型求解

  生活中我们经常听到人们说"不要把鸡蛋放到一个篮子里",这样可以降低风险.深究一下,这是为什么呢?其实,这里边包含了所谓的最大熵原理(The Maximum Entropy Principle).本文为一则读书笔记,将对最大熵原理以及由此导出的最大熵模型进行介绍,重点给出其中所涉及数学公式的理解和详细推导. 相关链接 最大熵学习笔记(零)目录和引言 最大熵学习笔记(一)预备知识 最大熵学习笔记(二)最大熵原理 最大熵学习笔记(三)最大熵模型 最大熵学习笔记(四)模型求解 最大熵学习笔

Docker学习笔记(四)走进docker的世界

Docker学习笔记(四)走进docker的世界 一个容器实际上是运行在宿主机上的一个进程. 只不过在启动这个进程之前进行了一些特殊处理,让这个容器进入了一个全新的虚拟环境,与宿主机的环境分开, 所以这个进程及其子进程认为自己运行在一个独立的世界里面. #查看进程 sudo docker run -d cyf:sshd /usr/sbin sshd -D ps axf 可以看到在宿主机里面的5948这个sshd进程 下面进入docker容器查看 sudo docker-enter.sh 6867