实验5：WindowsPhone的屏幕方向感应

一．实验目的

通过本实验使学生掌握WindowsPhone的屏幕感应、各种布局容器的使用、控件位置的设计。

二．实验类型

设计型

三．实验学时

2学时

四．实验原理及知识点

1. 利用Canvas控件设计绝对定位布局

2. 利用StackPanel控件设计堆栈布局

3. 利用Grid控件设计网格布局

4. 屏幕方向感应的事件处理

五．实验环境

1. 硬件设备要求：PC及其联网环境

2. 软件设备要求：Windows操作系统；Eclipse；Android SDK。

六．实验内容

1. 利用Canvas控件设计绝对定位布局：竖屏时将4个图片以斜排的方式，从左上角排列到右下角；横屏时将4个图片以牛角的方式，从左到右排列成两排

2. 利用StackPanel控件设计堆栈布局：竖屏时将5个图片以竖排的方式，从上到下，水平居中排列；横屏时将5个图片以横排的方式，从左到右，垂直居中排列

…… 此处隐藏0字 ……

3. 利用Grid控件设计网格布局：竖屏时将1个图片和4个按钮以竖排的方式，从上到下，水平居中排列；横屏时将1个图片置于左侧，4个按钮在右侧依旧以竖排的方式，从上到下，水平居中排列

七．实验步骤

1. 坐标定位Canvas

1) 创建C#语言的Silverlight For Windows Phone的项目，选择Windows Phone应用程序，项目名称PhoneLayout，目标版本7.1。

2) 在MainPage.xaml文件中将Name="ApplicationTitle"的<TextBlock>的Text属性修改为"屏幕方向感应和界面布局的设计"；将Name=" PageTitle "的<TextBlock>的Text属性修改为"Canvas"。

3) 在Name="ContentPanel"的<Grid>定义<Canvas>标签，然后在其中定义4个<Image>标签： <Canvas>

<Image Name="Image1" Source="ImagesLogoLove1.png" Canvas.Left="0" Canvas.Top="0"/> <Image Name="Image2" Source="ImagesLogoLove2.png" Canvas.Left="120" Canvas.Top="120"/> <Image Name="Image3" Source="ImagesLogoLove3.png" Canvas.Left="240" Canvas.Top="240"/> <Image Name="Image4" Source="ImagesLogoLove4.png" Canvas.Left="360" Canvas.Top="360"/> </Canvas>

4) 将<phone>标签的SupportedOrientations属性修改为PortraitOrLandscape