创建第一个Windows Phone 7应用程序(二)

来源:互联网 时间:1970-01-01

小编推荐:

开始创建一个Windows手机应用程序(一)

添加图形

在SilverLight中,可以使用Shape类添加图形,可以创建简单的形状,例如长方形或者更复杂的形状,例如多边形。在SilverLight中Brushes用来涂色或绘制图形。

在TextBlock外围添加一个StackPanel,Panel是一个容器,用来组合和处理UI元素布局。每个应用程序至少有一个Panel,StackPanel中顺序放置界面元素,根据方向不同的需要,可设置水平或垂直。而Grid和Canvas可用来更精准的元素定位。

我们将创建一个椭圆形状,在StackPanel中显示在TextBlock后面,可以指定椭圆的高度(Height)和宽度(Width)属性以及填充颜色,为了填充椭圆,必须指定Brush绘制椭圆颜色。

这次我们不在使用Design View,我们在XAML视图中实现。

双击MainPage.xaml,找到我们之前添加的TextBlock。

用下面内容替换

XAML

<StackPanel>

<TextBlock FontSize="50" Text="Hello, World!" />
<Ellipse Fill="Blue" Height="150" Width="300"

Name="FirstEllipse" />

</StackPanel>

 

 

3.按F5运行应用程序

运行结果如下所示,但是目前我们的程序没有任何的交互,下面我们增加交互功能。

 

4. 停止调试

添加按钮

下面我们将给应用程序添加Button,控件是在SilverLight应用程序中创建用户交互的一种方式,SilverLight有丰富的控件库,包括Button、TextBox、ListBox等。

有两步添加Button,第一步是在XAML中添加Button元素,第二步是添加一些用户交互的事件处理逻辑,例如单击Button。

1、 在XAML中,在我们前面添加的Ellipse元素的后面添加下面内容

XAML

<Button Height="150"

Width="300"

Name="FirstButton"

Content="Tap" />

 

Name属性设置了Button的名称为FirstButton,以便于我们可以在代码中使用该Button,Content属性指定了Button显示的文本。Height和width指定了按钮的高度和宽度。

Silverlight是事件驱动的应用程序模型,当应用程序中某些事件发生,例如单击按钮或者应用程序启动,一个事件会被触发。我们可以添加事件处理的代码,完成当事件发生时要处理的动作。我们可以给Button添加单击(Click)按钮的事件处理。

2、 在Design View中,选择Button。

3、 在Properties window中,单击Events,列出了Button的所有事件。

4、 双击Click事件,打开代码文件MainPage.xaml.cs,我们可以看到FirstButton_Click事件处理方法

5、 在FirstButton_Click增加下面代码

private void FirstButton_Click(object sender, RoutedEventArgs e)

{

if (FirstButton.Content as string == "Tap")

{

FirstButton.Content = "Tap Again";

}

else

{

FirstButton.Content = "Tap";

}

}

 

当单击Button,按钮显示的内容在”Tap”和”Tap Again”切换。

在XAML中的Button元素中,可以看到增加了Click属性。

<StackPanel>

<TextBlock FontSize="50" Text="Hello, World!" />

<Ellipse Fill="Blue" Height="150" Width="300"

Name="FirstEllipse" />

<Button Height="150"

Width="300"

Content="Tap"

Name="FirstButton"

Click="FirstButton_Click" />

</StackPanel>

 

 

6、 按F5运行,单击按钮可以看到运行效果。

 

添加动画

接下来我们为应用程序增加动画,我们可以为前面的椭圆增加挤压然后再拉长的简单的动画。

创建一个动画(Animation)需要做3件事情,创建StoryBoard,创建动画,添加代码执行动画。

StoryBoard是一个容器,用来组装动画,通过StoryBoard,可以开始和停止动画。

Silverlight通过在一定的时间跨度内改变对象的属性值实现动画效果,StoryBoard.TargetName和StoryBoard.TargetProperty分别指定了哪个对象、对象的哪个属性应用动画。To属性指定了动画运动所到达的值,AutoReverse属性指定了动画结束时是否重复运行,Duration属性指定了动画执行的时长,例如:如果想让动画运行1秒,可以使把Duration设置为”00:00:01”。

1、 在Solution Explore,双击MainPage.xaml。

2、 在XAML view,用下面的代码替换StackPanel

XAML

<StackPanel>

<StackPanel.Resources>

<Storyboard x:Name="FirstStoryBoard">

<DoubleAnimation Storyboard.TargetName="FirstEllipse"

Storyboard.TargetProperty="Width"

To="1" AutoReverse="True"

Duration="00:00:01" />

</Storyboard>

</StackPanel.Resources>

<TextBlock FontSize="50" Text="Hello, World!" />

<Ellipse Fill="Blue" Height="150" Width="300"

Name="FirstEllipse" />

<Button Height="150"

Width="300"

Name="FirstButton"

Content="Click"

Click="FirstButton_Click" />

</StackPanel>

 

 

3、 MainPage.xaml.cs中,增加调用动画Begin方法,当单击按钮时执行FirstStoryBoard动画。

private void FirstButton_Click(object sender, RoutedEventArgs e)

{

if (FirstButton.Content as string == "Tap")

{

FirstButton.Content = "Tap Again"

}

else

{

FirstButton.Content = "Tap";

}

FirstStoryBoard.Begin();

}

 

.按F5运行应用程序,可以看到椭圆简单的动画效果。

参考文档:

Code-Behind and Partial Classes

TextBlock Class

Storyboard Class

StackPanel Class

本文来自kinglau的博客,原文地址:http://www.cnblogs.com/kinglau/archive/2011/06/07/2074612.html


相关阅读:
Top