博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Windows Phone笔记(2)方向处理之动态布局
阅读量:6995 次
发布时间:2019-06-27

本文共 3993 字,大约阅读时间需要 13 分钟。

1.动态布局

  默认情况下,Windows Phone应用程序在竖屏模式(垂直方向)下运行,当手机改变方向时我们的应用程序也应该能够根据方向的改变做出相应的布局调整。运行之前创建的HelloWindowsPhone项目程序,改变模拟器中屏幕的的方向:

我们发现页面并没有做出相应的改变。让页面根据自动改变很简单。只需要把MainPage.xaml中的PhoneApplicationPage标记的SupportedOrientations属性值更改为:PortraitOrLandscape即可,SupportedOrientations支持三个枚举值:Landscape(水平方向)Portrait(竖直方向)PortraitOrLandscape(根据手机具体方向自动调整)。

  重新编译运行后,旋转模拟器我们会发现,页面方向也会自动根据方向改变进行调整。

这些对方向改变程序而做出的响应体现了Silverlight的动态布局。所以得页面元素都改变了位置,并且有的元素还改变的自身的大小。在处理动态布局中最重要的两个属性是:HorizontalAlignment(水平对齐方式)VerticalAlignment(垂直对齐方式) 。

下面通过在一个Grid中放置9个TextBlock元素用来学习HorizontalAlignment和VerticalAlignment的9种不同组合下的使用方法。

MainPage.xaml
1 
15 16
17
18
19
20
21
22
23
24
25
26
27 28 29

运行程序,旋转模拟器方向:

我们可以看出Windows Phone 中有三种可能的方向:纵向(竖屏)和横向(向左或向右,横屏)。

从前面给出的代码中我们发现有一个Margin属性这个属性在Silverlight布局中同样很重要,有个CSS开发经验的都知道Margin用来设置一个元素所有外边距的宽度。如果指这种一个值例如:"Margin=100"那么这个值将应用于四个边,如果是两个值如:"Margin=100,200"那么第一个值应用于左右,第二个值应用于上下,如果为四个值例如前面示例给出代码中的"Margin="12,0,0,12""那么应用的顺序为左、上、右、下。Margin属性是由FrameworkElement定义的;在实际的应用中,几乎每个元素都会有一个非零的Margin属性用来防止页面间的元素过于拥挤。

通过修改前面给出的代码我们进一步观察Margin在布局的中作用。 

MainPage.xaml
1 
15 16
17
18
19
20
21
22
23
24
25
26
27 28 29

继续运行程序,我们可以看到通过Margin我们可以进一步控制页面元素所在的位置。

 

2.方向事件

  从前面我们可以看出屏幕布局是自动切换的,但是当我们在手机屏幕发生改变时需要做一些额外工作的时候该如何处理呢?那么我们就可以通过屏幕方向改变时会触发的OrientationChanged事件来编写代码处理这些额外的工作。

下面我们重新创建一个新的Silverlight for Windows Phone的项目,这个程序有三个Button元素和一张图片,当屏幕为竖屏的时候图片在上面,三个按钮在图片的下面,当屏幕为横屏的时候按钮就在图片的右边。在PhoneApplicationPage标记中增加一个"OrientationChanged=PhoneApplicationPage_OrientationChanged"的声明,下面是MainPage.xaml的代码:

MainPage.xaml
1 
16 17
18
19
20
21
22
23
24
25
26
27 28
29
30
31
32
33
34
35
36
37
38 39

 

这里是后台OrientationChanged事件的C#代码 

MainPage.xaml.cs
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Phone.Controls; namespace SilverlightOrientationDisplay {
public partial class MainPage : PhoneApplicationPage {
// 构造函数 public MainPage() {
InitializeComponent(); } private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) {
if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait)) {
Grid.SetRow(buttonList, 1); Grid.SetColumn(buttonList, 0); } else {
Grid.SetRow(buttonList, 0); Grid.SetColumn(buttonList, 1); } } } }

运行效果如下:

竖屏,按钮始终在图片下方

 

横屏,按钮始终在图片右边。

当然除了像我们前面这样,直接在Xaml中PhoneApplicationPage标记中声明方向改变事件之外还可以通过重写基类PhoneApplicationPage的虚方法OnorientationChanged来实现相同的效果。该虚方法是protected的。

  好了,让我们来回顾前面介绍的内容:把MainPage.xaml中的PhoneApplicationPage标记的SupportedOrientations属性值更改为:PortraitOrLandscape页面即可实现屏幕的自动切换。Margin在页面布局中非常重要,用来设置一个元素所有外边距的宽度。当屏幕方向发生改变时会触发OrientationChanged事件,通过为事件添加相应代码或者重新此方法以实现相应的效果。

参考资料:

  

   

作者:

出处:

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  Windows Phone开发者交流群:79339880,欢迎大家来一起讨论交流,共同学习进步。

你可能感兴趣的文章
Cortex系列ARM核心及体系结构介绍
查看>>
栈帧的含义和作用
查看>>
使用fprof基本步骤
查看>>
EL表达式语言及EL函数库 知识详解 学习笔记
查看>>
spring源码解读-xml中配置一个bean到容器的生产一个bean实例都经历了那些过程
查看>>
php instanceof 与 is_a()区别
查看>>
Struts1 标签库
查看>>
错误: 代理抛出异常错误: java.net.MalformedURLException: L...
查看>>
kafka php接口规则
查看>>
推荐android studio一个插件,可以将布局分组的
查看>>
电话来电界面内容
查看>>
android点滴24:使用TabHost时各种蛋疼的错误
查看>>
数值型
查看>>
Hadoop集群搭建(-v1.2.1)
查看>>
图像处理库的比较:OpenCV,FreeImage,CImg,CxImage
查看>>
内网可以访问外网,外网不能访问内网的ACL解决方法
查看>>
java实现将xml数据插入到oracle数据库的表中
查看>>
ios程序发布到AppStore
查看>>
C#/VB.NET对EXCEL图片添加超链接
查看>>
UITableView 编辑和删除行
查看>>