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

实验5：WindowsPhone的屏幕方向感应一．实验目的通过本实验使学生掌握WindowsPhone的屏幕感应、各种布局容器的使用、控件位置的设计。二．实验类型设计型三．实验学时2学时四．实验原理及知识点1.利用Canvas控件设计绝对定位布局2.利用StackPanel控件设计堆栈布局3.利用Grid控件设计网格布局4.屏幕方向感应的事件处理五．实验环境1.硬件设备要求：PC及其联网环境2.软件设备要求：Windows操作系统；Eclipse；AndroidSDK。六．实验内容1.利用Canvas控件设计绝对定位布局：竖屏时将4个图片以斜排的方式，从左上角排列到右下角；横屏时将4个图片以牛角的方式，从左到右排列成两排2.利用StackPanel控件设计堆栈布局：竖屏时将5个图片以竖排的方式，从上到下，水平居中排列；横屏时将5个图片以横排的方式，从左到右，垂直居中排列3.利用Grid控件设计网格布局：竖屏时将1个图片和4个按钮以竖排的方式，从上到下，水平居中排列；横屏时将1个图片置于左侧，4个按钮在右侧依旧以竖排的方式，从上到下，水平居中排列七．实验步骤1.坐标定位Canvas1)创建C#语言的SilverlightForWindowsPhone的项目，选择WindowsPhone应用程序，项目名称PhoneLayout，目标版本7.1。2)在MainPage.xaml文件中将Name=ApplicationTitle的TextBlock的Text属性修改为屏幕方向感应和界面布局的设计；将Name=PageTitle的TextBlock的Text属性修改为Canvas。3)在Name=ContentPanel的Grid定义Canvas标签，然后在其中定义4个Image标签：CanvasImageName=Image1Source=Images\Logo\Love1.pngCanvas.Left=0Canvas.Top=0/ImageName=Image2Source=Images\Logo\Love2.pngCanvas.Left=120Canvas.Top=120/ImageName=Image3Source=Images\Logo\Love3.pngCanvas.Left=240Canvas.Top=240/ImageName=Image4Source=Images\Logo\Love4.pngCanvas.Left=360Canvas.Top=360//Canvas4)将phone标签的SupportedOrientations属性修改为PortraitOrLandscape5)在MainPage.xaml.cs文件中向MainPage的构造函数中注册屏幕方向感应的事件：publicMainPage(){InitializeComponent();this.OrientationChanged+=newEventHandlerOrientationChangedEventArgs(MainPage_OrientationChanged);}6)在MainPage_OrientationChanged方法中根据参数e的Orientation属性，判断屏幕方向的改变，并修改Canvas中控件的位置：voidMainPage_OrientationChanged(objectsender,OrientationChangedEventArgse){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);}}2.堆栈面板StackPanel1)在项目中添加新的WindowsPhone纵向页面，名称为PageStackPanel.xaml。2)在PageStackPanel.xaml文件中将Name=ApplicationTitle的TextBlock的Text属性修改为屏幕方向感应和界面布局的设计；将Name=PageTitle的TextBlock的Text属性修改为StackPanel。3)在Name=ContentPanel的Grid定义Canvas标签，然后在其中定义6个Image标签：StackPanelName=StackPanel1ImageSource=Images\Face\1.jpgMargin=20,0,0,0Width=90/ImageSource=Images\Face\2.jpgMargin=20,0,0,0Width=90/ImageSource=Images\Face\3.jpgMargin=20,0,0,0Width=90/ImageSource=Images\Face\4.jpgMargin=20,0,0,0Width=90/ImageSource=Images\Face\5.jpgMargin=20,0,0,0Width=90/ImageSource=Images\Face\6.jpgMargin=20,0,0,0Width=90//StackPanel4)将phone标签的SupportedOrientations属性修改为PortraitOrLandscape5)在PageStackPanel.xaml.cs文件中向PageStackPanel的构造函数中注册屏幕方向感应的事件：publicMainPage(){InitializeComponent();this.OrientationChanged+=newEventHandlerOrientationChangedEventArgs(MainPage_OrientationChanged);}6)在PageStackPanel_OrientationChanged方法中根据参数e的Orientation属性，判断屏幕方向的改变，并修改StackPanel中控件的位置：voidPageStackPanel_OrientationChanged(objectsender,OrientationChangedEventArgse){if(e.Orientation==PageOrientation.Landscape||e.Orientation==PageOrientation.LandscapeLeft||e.Orientation==PageOrientation.LandscapeRight){StackPanel1.Orientation=System.Windows.Controls.Orientation.Horizontal;}else{StackPanel1.Orientation=System.Windows.Controls.Orientation.Vertical;}}7)将WMAppManifest.xml中的DefaultTask标签的NavigationPage属性修改为PageStackPanel.xaml，运行程序。3.网格Grid1)在项目中添加新的WindowsPhone纵向页面，名称为PageGrid.xaml。2)在PageGrid.xaml文件中将Name=ApplicationTitle的TextBlock的Text属性修改为屏幕方向感应和界面布局的设计；将Name=PageTitle的TextBlock的Text属性修改为Grid。3)在Name=ContentPanel的Grid通过RowDefinitions和ColumnDefinitions标签来定义行数和列数，然后在其中定义1个Image标签和1个StackPanel标签，并在StackPanel标签中定义4个Button标签：Gridx:Name=ContentPanelGrid.Row=1Margin=0,0,12,0Grid.RowDefinitionsRowDefinitionHeight=Auto/RowDefinitionHeight=*//Grid.RowDefinitionsGrid.ColumnDefinitionsColumnDefinitionWidth=Auto/ColumnDefinitionWidth=*//Grid.ColumnDefinitionsImageHeight=280HorizontalAlignment=CenterName=image1Source=Images/Microsoft/草坪上的圆球.jpgMargin=0,0,0,59/StackPanelName=StackPanelMSHorizontalAlignment=CenterGrid.Row=1Grid.Column=0Orientation=VerticalButtonContent=草坪上的圆球Click=Button_Click/ButtonButtonContent=盖茨的办公楼Click=Button_Click_1/ButtonButtonContent=技术大会用餐Click=Button_Click_2/ButtonButtonContent=微软大门前坪Click=Button_Click_3/Button/StackPanel/Grid4)将phone标签的SupportedOrientations属性修改为PortraitOrLandscape5)在PageGrid.xaml.cs文件中向PageGrid的构造函数中注册屏幕方向感应的事件：publicMainPage(){InitializeComponent();this.OrientationChanged+=newEventHandlerOrientationChangedEventArgs(MainPage_OrientationChanged);}6)在PageGrid_OrientationChanged方法中根据参数e的Orientation属性，判断屏幕方向的改变，并修改Grid中控件的位置：voidPageGrid_OrientationChanged(objectsender,OrientationChangedEventArgse){if(e.Orientation==PageOrientation.Landscape||e.Orientation==PageOrientation.LandscapeLeft||e.Orientation==PageOrientation.LandscapeRight){//StackPanel类似于Android中的线性布局Grid.SetRow(StackPanelMS,0);Grid.SetColumn(StackPanelMS,1);}else{Grid.SetRow(StackPanelMS,1);Grid.SetColumn(StackPanelMS,0);}}7)编写4个按钮的点击事件处理函数，显示不同的图片：。privatevoidButton_Click(objectsender,RoutedEventArgse){UriKindkind=UriKind.Relative;Uripath=newUri(Images/Microsoft/草坪上的圆球.jpg,kind);BitmapImageim