XAML学习笔记——Layout(四)

摘要:
让我们看看Win10中的一个常见系统设置窗口:它用于显示相应设置项的特定设置内容。这种将主窗口划分为两个视图的布局方法称为拆分视图。本实用新型解决了传统的水平导航条由于屏幕尺寸限制而无法完全显示的问题。为了实现完整的分屏布局,需要其他技术;对于窗格和内容的显示模式,True是显示状态:
SplitView

  SplitView简介

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

XAML学习笔记——Layout(四)第1张

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

XAML学习笔记——Layout(四)第2张

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

  以最后一组为例:

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

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

  IsPaneOpen=“False”时:

XAML学习笔记——Layout(四)第3张

  IsPaneOpen=“True”时:

XAML学习笔记——Layout(四)第4张

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

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

  2.OpenPaneLength、PanePlacement和PaneBackground

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

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

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

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

  

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

免责声明:文章转载自《XAML学习笔记——Layout(四)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇用asp.net开发移动wap网站集成在线wap模拟器OpenGL学习整理------着色器下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

SSIS 处理错误的方法

Package在执行过程中,不可避免地会发生错误,如果处理错误?简单粗暴的做法,是Package直接停止运行。对于一个成熟的ETL工具,这显然不是唯一的错误处理方法。如果在数据流中出现错误,那么数据流组件可以把错误行输出,这只需要在组件的ErrorOutput中进行简单地配置。跟数据流相比,控制流中包含错误处理程序OnError,对错误事件的处理更加复杂和...

自动化运维工具puppet详解(一)

一、puppet 介绍   1、puppet是什么   puppet是一个IT基础设施自动化管理工具,它能够帮助系统管理员管理基础设施的整个生命周期: 供应(provisioning)、配置(configuration)、联动(orchestration)及报告(reporting)。  基于puppet ,可实现自动化重复任务、快速部署关键性应用以及在本...

3.qml-ECMAScript_03(Object基类对象、String对象)

在上章学习了:2.qml-ECMAScript_02(原始值类型、通用转换方法) 本章我们来初步学习ECMAScript的内置对象.Object对象和String对象.   对象创建与回收对象是由 new 运算符加上要实例化的对象的名字创建的,实际对象就是引用值,指向存储对象的内存处 例如,下面的代码创建 Array对象的实例: var arr1 = ne...

按回车Enter键后自动隐藏软键盘

在布局文件中EditText控件中加入属性: android:imeOptions="actionDone"         imeOptions还有很多其他参数,比如搜索,前往...等等,依据需要选择。 一般在xml文件加入了这个属性就可以达到键盘隐藏的效果的,但有些第三方输入法问题,并不一定有效果,这时候可以再试下以下方法。 在代码中: edtiTex...

谈谈- declare-styleable属性

在Android开发中,往往要用到自定义的控件来实现我们的需求或效果。在使用自定义 控件时,难免要用到自定义属性,那怎么使用自定义属性呢? 一、简单使用:   1.在文件res/values/下新建attrs.xml属性文件,中定义我们所需要的属性: <resources><!-- resource是跟标签,可以在里面定义若干个decla...

解决html5 canvas 绘制字体、图片与图形模糊问题

html5 canvas 绘制字体、图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑。当然很多高端台式电脑也有高分辨率高dpi的显示器。 canvas在浏览器中的缩放原理 如果没有设置style那么就以html的属性width,height作为尺寸。 如果设置了style中的width、height,那么...