Windows 8 Metro App开发[8]处理Fullscreen, Snapped和Filled状态
注:本系列学习帖子我在DevDiv.com移动开发社区原创首发
转载请注明出处:BeyondVincent(破船)@DevDiv.com
如果你有什么问题也可以前往交流
下面是首发地址:
[DevDiv原创]Windows 8 Metro App开发Step by Step---(13个学习帖子)
在Windows 8 Metro App中定义了三种视图状态:full screen, snapped, filled。这三种状态在程序中都比较常见,也会经常用到,在这里我就跟大家分享一下相关视图状态的知识点。
通过本次学习,你将掌握以下内容:
1、视图状态的介绍
2、如何在程序中实现三种视图状态的切换
3、最后附上程序运行截图和程序
更多内容请查看下面的帖子
Windows 8 Metro App开发Step by Step
1、视图状态的介绍
在Windows 8 Metro App中,我们可以处理三种视图状态:full screen, snapped, filled。
full screen是Metro App默认的状态,而snapped和fill视图状态只能显示在水平分辨率为1366像素或者更高的屏幕中。因为snapped视图宽度为320像素,可以摆放在屏幕的左边或者右边。剩余的1046像素分别分配为:分割线(22像素)和fill视图,fill视图的水平像素必须为1024或者更高。
如下面的三个图所示:
full screen(程序填满整个屏幕)
snapped(应用程序只占据了整个屏幕的一小部分)
Fill(应用程序占据了snapped宽度剩余的区域)
这样用户就可以同时使用2个应用程序,那么作为开发者,就需要提供相应的布局和用户响应以满足三种视图状态。
下面我就会根据视图状态的变化,在对我的程序进行编程控制,以适应相应的布局和用户响应。
2、如何在程序中实现三种视图状态的切换
a、首先我使用BlankApp创建了一个名为DevDiv_SnapView的工程,并在工程中添加Pages文件夹,然后使用空模版创建了3个xaml文件,分别为:FillView.xaml,FullView.xaml和SnapView.xaml,并把MainPage.xaml也移动到Pages目录中。
b、由于三种视图状态可以显示三种不同的视图,那么我就利用上面创建的三个页面以在不同视图状态进行显示。首先我把这三个视图的布局和内容进行了编写,在这里不是关键的,所以就不上代码了,具体内容可以下载后面我提供的代码附件进行查看。
c、在MainPage.xaml中为了进行相关页面的导航,我使用了一个Frame控件,在MainPage.xaml文件中也可以看到想要的代码。这里不列出来了。
d、监听视图状态改变事件,以进行相应的处理
这一步是最重要的。在此需要监听视图状态的改变,具体代码如下所示[文件MainPage.xaml.cs]:其中SizeChanged += MainView_SizeChanged;是注册事件。
ApplicationView.value是获取当前视图状态的值。值类型定义如下:
摘要:
// 指定可以处理的应用程序视图状态更改集。
[Version(100794368)]
public enum ApplicationViewState
{// 摘要:// 当前应用程序的视图为全屏(没有预期相邻的对齐的应用程序)并且已更改为横向。FullScreenLandscape = 0,//// 摘要:// 当前应用程序视图已缩小到部分屏幕视图作为另一个应用程序对齐的结果。Filled = 1,//// 摘要:// 当前应用程序的视图已对齐。Snapped = 2,//// 摘要:// 当前应用程序的视图为全屏(没有预期相邻的对齐的应用程序)并且已更改为纵向。FullScreenPortrait = 3,
}
下面是文件MainPage.xaml.cs 代码:其中方法MainView_SizeChanged 根据不同的视图状态切换到不同的视图,以为用户提供不同的布局
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;// The Blank Page item template is documented at <a href="\"http://go.microsoft.com/fwlink/?LinkId=234238\"" target="\"_blank\"">http://go.microsoft.com/fwlink/?LinkId=234238</a>namespace DevDiv_SnapView.Pages
{/// <summary>/// An empty page that can be used on its own or navigated to within a Frame./// </summary>public sealed partial class MainPage : Page{public MainPage(){this.InitializeComponent();SizeChanged += MainView_SizeChanged;}void MainView_SizeChanged(object sender, SizeChangedEventArgs e){if (ApplicationView.Value == ApplicationViewState.Filled){MainFrame.Navigate(typeof(FillView));}else if (ApplicationView.Value == ApplicationViewState.Snapped){MainFrame.Navigate(typeof(SnapView));}else if (ApplicationView.Value == ApplicationViewState.FullScreenLandscape){MainFrame.Navigate(typeof(FullView));}else if (ApplicationView.Value == ApplicationViewState.FullScreenPortrait){}}/// <summary>/// Invoked when this page is about to be displayed in a Frame./// </summary>/// <param name="e">Event data that describes how this page was reached.The Parameter/// property is typically used to configure the page.</param>protected override void OnNavigatedTo(NavigationEventArgs e){}}
}
代码编写至此结束,下面我们来运行程序,看看实际效果
3、最后附上程序运行截图和程序
Full视图
Snap视图(左边)
Fill视图(左边)
最后附上代码
DevDiv_SnapView.rar
Windows 8 Metro App开发[8]处理Fullscreen, Snapped和Filled状态相关推荐
- Windows Store apps开发[8]处理Fullscreen, Snapped和Filled状态
注:本系列学习帖子我在DevDiv.com移动开发社区原创首发 转载请注明出处:BeyondVincent(破船)@DevDiv.com 如果你有什么问题也可以前往交流 下面是首发地址: [DevDi ...
- 推荐微软Windows 8 Metro应用开发虚拟实验室
Kevin Fan分享开发经验,记录开发点滴 推荐微软Windows 8 Metro应用开发虚拟实验室 2012-07-19 05:23 by jv9, 1940 阅读, 4 评论, 收藏, 编辑 微 ...
- Windows 8 Metro 应用开发入门
摘 要 随着Windows8的发布,Windows 8 Metro应用程序开发也逐渐得到大家的关注,Visual Studio 2012发布,更是让开发人员蠢蠢欲动!Windows 8 Metro 应 ...
- Windows 8 Metro App学习笔记(九)—磁砖
瓷砖,即桌面显示的Tile,它的创建和生命周期都可以由用户自由创建并可以直接访问一个应用程序,还可以为信息的及时推送带来很多的方便.在Windows 8中,由SecondaryTile对象负责. 首先 ...
- IOS抖音短视频APP开发关于扫描二维码,并根据文本生成二维码
IOS抖音短视频APP开发关于扫描二维码,(根据光线强弱显示隐藏闪光灯)并根据文本生成二维码. WeakSelf; //IOS抖音短视频APP开发构建扫描样式视图 _scanView = [[WSLS ...
- 抖音短视频APP开发如何生成二维码?
授权转载自云豹网络科技的CSDN博客 原文链接:https://blog.csdn.net/yb1314111/article/details/101283985 IOS抖音短视频APP开发关于扫描二 ...
- 【万里征程——Windows App开发】应用栏
基本的用法我们在 [万里征程--Windows App开发]页面布局和基本导航中已经讲过了,这里继续补充关于应用栏的更多用法. Icon 在之前的学习中,我们知道Icon属性中有很多很多系统预定义,但 ...
- 【万里征程——Windows App开发】SemanticZoom视图切换
相信用过Windows Phone或者Windows 8/8.1/10的朋友对下面这张截图肯定不陌生.这就是通过SemanticZoom来实现的,当数据过多时,这种控件尤其适用.它有一个放大视图Zoo ...
- Windows App开发之开发准备
操作系统及SDK 操作系统 显而易见,想要开发Windows App就得在Windows 8/8.1/10上进行,老旧的Windows XP/Vista/7已经不能满足时代的需要了.当然,在Windo ...
最新文章
- 网络推广中移动端优化如何在细节中取胜?
- python 笔记:装饰器
- python dataframe转图片_Python:dataframe转html
- Java注释Override、Deprecated、SuppressWarnings详解
- python中定义变量和数组_Python中的线程和全局变量 - 数组和标准变量之间的区别?...
- 开源个小工具simple-repo
- MySql 清空、删除、截断表时1701错误
- c语言中因式分解的题目,因式分解相关练习题
- 在js中访问html页面,javascript – 在IE9的html页面中访问js里面的全局函数
- CIKM'21「eBay」推荐系统--利用超图对商品的多模态信息建模
- css3网站代码 html5_【实战HTML5与CSS3】用HTML5和CSS3制作页面(上)
- java获取当前日期和时间的二种方法分享
- Hive 与 RDBMS的区别
- 机器学习--支持向量机(一)什么是支持向量机
- 所有锁的unlock要放到try{}finally{}里,不然发生异常返回就丢了unlock了
- 小白教程 微信小程序 官方示例Demo下载及运行
- ROS:launch规范及用法
- python金融分析培训课程_Python金融分析相关书籍推荐
- OpenCV可以识别文字吗?
- oracle全局索引改成本地索引,解析一个通过添加本地分区索引提高SQL性能的案例...
热门文章
- Serverless实践系列(四):网站监控脚本的实现
- LeetCode 417. 太平洋大西洋水流问题 JAVA dfs
- 营收净利同比上涨,甲骨文回“血”了吗??
- 数据资产管理实践白皮书(6.0版)解读
- 【学术相关】没有痛苦的博士求学经历,是不合格的!一位毕业了三十多名博士的中科院博导感言...
- 关于win10安装silverlight成功 之后还是提示要安装的解决方案__2021年9月
- 阿铭Linux培训课视频第四期
- C语言设计一除法器,verilog 除法器
- 量化交易 第一课 简介
- Echarts中太阳图(Sunburst)的实例