×
Namespaces

Variants
Actions

Windows Phone :在Tap事件处理程序中加载本地图像文件

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon File.png
WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata

兼容于
文章
翻译:
最后由 hamishwillee 在 19 Jul 2013 编辑

Contents

简介

这篇文章主要介绍了三件事情。

  1. 如何在windows phone中检测Tap event。
  2. 如何加载本地图像文件。
  3. 如何在Sileverlight C#项目中使用典型的switch..case结构。

基本理念

这里有四个文件,分别命名为Image1.jpg,Image2.jpg,Image3.jpg 和 Image4.jpg。当用用手指点击屏幕(tap)时我们会将图片一个一个的加载上去。这一系列图片将会重复显示直到用户继续点击屏幕。

实现

为了实现这些理念,我们将跟随下面提到的步骤来做。

  1. 创建一个Silverlight C#项目并将它命名为"Touch".
  2. 在phone screen里放置一个Image 控件 和 一个TextBlock(命名为 txtFileName)控件。在这里将以下MainPage.xaml里的代码复制到MainPage.xaml里。
  3. 右击项目并选择 Add->New Folder在项目里添加一个空白文件夹,将它命名为"Images"
  4. 右击"Images"文件,将四个图片文件添加到文件里。分别将它们命名为Image1.jpg,Image2.jpg,Image3.jpg 和 Image4.jpg。为每个图片文件设置下面的属性。
                                                             :*Build Action -> Content
                                                            :*Copy to output directory -> Copy always
  1. 现在打开MainPage.xaml.cs文件并将下面附加的函数库导入到文件里。
	                                                              :* using System.Windows.Resources; 
	                                                              :* using System.Windows.Media.Imaging; 
  1. 现在你可以将MainPage.xaml.cs文件里的代码换成模板MainPage.xaml.cs文件中的代码。我已经添加了必须的注释行来帮助理解代码。

MainPage.xaml

下面所示是MainPage.xaml文件的概要。

<Grid x:Name="LayoutRoot" Background="Transparent">
 
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!—标题栏 包括了应用程序的名称和网页标题-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Touch Test" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--内容栏-在这里放置附加的内容>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Image Height="366" HorizontalAlignment="Left" Margin="12,25,0,0" Name="img" Stretch="Fill" VerticalAlignment="Top" Width="425" />
<TextBlock Height="30" HorizontalAlignment="Center" Margin="12,411,0,0" Name="txtFileName" Text="" VerticalAlignment="Top" Width="425" />
</Grid>
</Grid>

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;
using System.Windows.Resources;
using System.Windows.Media.Imaging;
namespace Touch
{
public partial class MainPage : PhoneApplicationPage
{
 
//构造函数
//声明公共变量
public int FileCounter = 1;
public string fileName;
public MainPage()
{
InitializeComponent();
}
 
//这下面的功能将被调用当用户点击屏幕时
protected override void OnManipulationStarted(ManipulationStartedEventArgs args)
{
//以下是由switch...case结构所写的选择途径
switch (FileCounter)
{
case 1:
fileName = "Images/Image1.JPG";
FileCounter=2;
break;
case 2:
fileName = "Images/Image2.JPG";
FileCounter=3;
break;
case 3:
fileName = "Images/Image3.JPG";
FileCounter=4;
break;
case 4:
fileName = "Images/Image4.JPG";
FileCounter=1;
break;
}
Uri uri = new Uri(fileName, UriKind.Relative);
StreamResourceInfo resourceInfo = Application.GetResourceStream(uri);
BitmapImage bmp = new BitmapImage();
bmp.SetSource(resourceInfo.Stream);
img.Source = bmp;
args.Complete();
args.Handled = true;
txtFileName.Text = fileName;
base.OnManipulationStarted(args);
}
}
}

应用图像

以下是点击屏幕后显示的图像序列。

First Tap Second Tap Third Tap Fourth Tap Fifth Tap
FirstTap.jpg
SecondTap.jpg
ThirdTap.jpg
FourthTap.jpg
FirstTap.jpg
Image1 Image2 Image3 Image4 Image1 will be repeated
This page was last modified on 19 July 2013, at 07:21.
119 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×