实验指导书《3G应用开发》实验5.docVIP

实验5：WindowsPhone的屏幕方向感应 一．实验目的 通过本实验使学生掌握WindowsPhone的屏幕感应、各种布局容器的使用、控件位置的设计。 二．实验类型 设计型 三．实验学时 2学时 四．实验原理及知识点 利用Canvas控件设计绝对定位布局 利用StackPanel控件设计堆栈布局 利用Grid控件设计网格布局 屏幕方向感应的事件处理 五．实验环境 硬件设备要求：PC及其联网环境 软件设备要求：Windows操作系统；Eclipse；Android SDK。 六．实验内容 利用Canvas控件设计绝对定位布局：竖屏时将4个图片以斜排的方式，从左上角排列到右下角；横屏时将4个图片以牛角的方式，从左到右排列成两排 利用StackPanel控件设计堆栈布局：竖屏时将5个图片以竖排的方式，从上到下，水平居中排列；横屏时将5个图片以横排的方式，从左到右，垂直居中排列 利用Grid控件设计网格布局：竖屏时将1个图片和4个按钮以竖排的方式，从上到下，水平居中排列；横屏时将1个图片置于左侧，4个按钮在右侧依旧以竖排的方式，从上到下，水平居中排列 七．实验步骤 坐标定位Canvas 创建C#语言的Silverlight For Windows Phone的项目，选择Windows Phone应用程序，项目名称PhoneLayout，目标版本7.1。 在MainPage.xaml文件中将Name=ApplicationTitle的TextBlock的Text属性修改为屏幕方向感应和界面布局的设计Name= PageTitle 的TextBlock的Text属性修改为Canvas。 在Name=ContentPanel的Grid定义Canvas标签，然后在其中定义4个Image标签： Canvas Image Name=Image1 Source=Images\Logo\Love1.png Canvas.Left=0 Canvas.Top=0/ Image Name=Image2 Source=Images\Logo\Love2.png Canvas.Left=120 Canvas.Top=120/ Image Name=Image3 Source=Images\Logo\Love3.png Canvas.Left=240 Canvas.Top=240/ Image Name=Image4 Source=Images\Logo\Love4.png Canvas.Left=360 Canvas.Top=360/ /Canvas 将phone标签的SupportedOrientations属性修改为PortraitOrLandscape 在MainPage.xaml.cs文件中向MainPage的构造函数中注册屏幕方向感应的事件： public MainPage() { InitializeComponent(); this.OrientationChanged += new EventHandlerOrientationChangedEventArgs (MainPage_OrientationChanged); } 在MainPage_OrientationChanged方法中根据参数e的Orientation属性，判断屏幕方向的改变，并修改Canvas中控件的位置： void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e) { if (e.Orientation == PageOrientation.Landscape || e.Orientation == PageOrientation.LandscapeLeft || e.Orientation == PageOrientation.LandscapeRight) { Canvas.SetTop(Image3, 120); Canvas.SetTop(Image4, 0); } else { Canvas.SetTop(Image3, 240); Canvas.SetTop(Image4, 360); } } 堆栈面板StackPanel