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

实验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个图片以横排的方式，从左到右，垂直居中排列

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="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>

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

5) 在MainPage.xaml.cs文件中向MainPage的构造函数中注册屏幕方向感应的事件：

public MainPage()

{

InitializeComponent();

this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>

(MainPage_OrientationChanged);

}

6) 在MainPage_OrientationChanged方法中根据参数e的Orientation属性，判断屏幕方向的改变，

并修改Canvas中控件的位置：

void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e)

{

if (e.Orientation == ndscape

|| e.Orientation == ndscapeLeft

|| e.Orientation == ndscapeRight)

{

Canvas.SetTop(Image3, 120);

Canvas.SetTop(Image4, 0);

}

else

{

Canvas.SetTop(Image3, 240);

Canvas.SetTop(Image4, 360);

}

}

2. 堆栈面板StackPanel

1) 在项目中添加新的WindowsPhone纵向页面，名称为PageStackPanel.xaml。

2) 在PageStackPanel.xaml文件中将Name="ApplicationTitle"的<TextBlock>的Text属性修改

为"屏幕方向感应和界面布局的设计"；将Name=" PageTitle "的<TextBlock>的Text属性修改为"StackPanel"。

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

<StackPanel Name="StackPanel1">

<Image Source="Images\Face\1.jpg" Margin="20,0,0,0" Width="90"/> <Image Source="Images\Face\2.jpg" Margin="20,0,0,0" Width="90"/> <Image Source="Images\Face\3.jpg" Margin="20,0,0,0" Width="90"/> <Image Source="Images\Face\4.jpg" Margin="20,0,0,0" Width="90"/> <Image Source="Images\Face\5.jpg" Margin="20,0,0,0" Width="90"/> <Image Source="Images\Face\6.jpg" Margin="20,0,0,0" Width="90"/> </StackPanel>

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

5) 在PageStackPanel.xaml.cs文件中向PageStackPanel的构造函数中注册屏幕方向感应的事

件：

public MainPage()

{

InitializeComponent();

this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>

(MainPage_OrientationChanged);

}

6) 在PageStackPanel_OrientationChanged方法中根据参数e的Orientation属性，判断屏幕方向

的改变，并修改StackPanel中控件的位置：

void PageStackPanel_OrientationChanged(object sender, OrientationChangedEventArgs e) {

if (e.Orientation == ndscape

|| e.Orientation == ndscapeLeft

|| e.Orientation == ndscapeRight)

{

StackPanel1.Orientation = System.Windows.Controls.Orientation.Horizontal; }

else

{

StackPanel1.Orientation = System.Windows.Controls.Orientation.Vertical; }

}

7) 将WMAppManifest.xml中的<DefaultTask>标签的NavigationPage属性修改为

"PageStackPanel.xaml"，运行程序。

3. 网格Grid

1) 在项目中添加新的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>标签：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,12,0">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="*"/>

</Grid.ColumnDefinitions>

<Image Height="280" HorizontalAlignment="Center" Name="image1"

Source="Images/Microsoft/草坪上的圆球.jpg" Margin="0,0,0,59" />

<StackPanel Name="StackPanelMS" HorizontalAlignment="Center" Grid.Row="1"

Grid.Column="0" Orientation="Vertical">

<Button Content="草坪上的圆球" Click="Button_Click"></Button>

<Button Content="盖茨的办公楼" Click="Button_Click_1"></Button> <Button Content="技术大会用餐" Click="Button_Click_2"></Button> <Button Content="微软大门前坪" Click="Button_Click_3"></Button> </StackPanel>

</Grid>

4)

5) 将<phone>标签的SupportedOrientations属性修改为PortraitOrLandscape 在PageGrid.xaml.cs文件中向PageGrid的构造函数中注册屏幕方向感应的事件：

public MainPage()

{

InitializeComponent();

this.OrientationChanged += new EventHandler<OrientationChangedEventArgs>

(MainPage_OrientationChanged);

}

6) 在PageGrid_OrientationChanged方法中根据参数e的Orientation属性，判断屏幕方向的改

变，并修改Grid中控件的位置：

void PageGrid_OrientationChanged(object sender, OrientationChangedEventArgs e)

{

if (e.Orientation == ndscape

|| e.Orientation == ndscapeLeft

|| e.Orientation == ndscapeRight)

{

//StackPanel类似于Android中的线性布局

Grid.SetRow(StackPanelMS,0);

Grid.SetColumn(StackPanelMS, 1);

}

else

{

Grid.SetRow(StackPanelMS, 1);

Grid.SetColumn(StackPanelMS,0);

}

}

7) 编写4个按钮的点击事件处理函数，显示不同的图片：。

private void Button_Click(object sender, RoutedEventArgs e)

{

UriKind kind = UriKind.Relative;

Uri path = new Uri("Images/Microsoft/草坪上的圆球.jpg", kind);

BitmapImage image = new BitmapImage();

image.UriSource = path;

image1.Source = image;

}

private void Button_Click_1(object sender, RoutedEventArgs e)

{

UriKind kind = UriKind.Relative;

Uri path = new Uri("Images/Microsoft/盖茨的办公楼.jpg", kind);

BitmapImage image = new BitmapImage();

image.UriSource = path;

image1.Source = image;

}

private void Button_Click_2(object sender, RoutedEventArgs e)

{

UriKind kind = UriKind.Relative;

Uri path = new Uri("Images/Microsoft/技术大会用餐.jpg", kind);

BitmapImage image = new BitmapImage();

image.UriSource = path;

image1.Source = image;

}

private void Button_Click_3(object sender, RoutedEventArgs e)

{

UriKind kind = UriKind.Relative;

Uri path = new Uri("Images/Microsoft/微软大门前坪.jpg", kind);

BitmapImage image = new BitmapImage();

image.UriSource = path;

image1.Source = image;

}

8) 将WMAppManifest.xml中的<DefaultTask>标签的NavigationPage属性修改为

"PageGrid.xaml"，运行程序。

本文来源：https://www.bwwdw.com/article/7rj1.html