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 ...
最新文章
- 大国AI竞赛中国忙赶超,但美国仍主导全球AI芯片设计
- JAVA---AWT 图形绘制
- BZOJ3559 : [Ctsc2014]图的分割
- [Android] 使用Include布局+Fragment滑动切换屏幕
- [zz]c++ list sort方法
- sql语句练习(三):LeetCode
- tcl/tk demo
- MFC操作多个安卓设备(发送指令)
- 关于fsockopen pfsockopen函数被禁用的解决方法
- Bug错误一:报this.setData is not a function错误
- VBA 声明 Option Explicit,让代码更规范
- 翻译java代码软件_apk源代码翻译器|安卓软件apk源代码翻译器下载_V1.0_9号软件下载...
- 手把手教您怎么编写第一个单片机程序
- 网络文学格局已定?未必
- win7计算机还原点建立,win7系统每次启动自动创建还原点的处理技巧
- 将Unity场景以Wavefront Obj格式导出
- uboot分析:uboot的启动过程分析
- adb不是内部或外部命令,AndroidStudio中ADB命令不能用的问题
- 服务器r720按f几重装系统,联想拯救者r720按哪个键进入bios设置
- LiteOS 消息队列