Windows Phone基本的應(yīng)用程序的開發(fā)，內(nèi)容如下。本篇文章是在上一篇創(chuàng)建***個Windows Phone應(yīng)用程序 （1）的基礎(chǔ)上為應(yīng)用程序增加圖形、按鈕、簡單動畫。

添加圖形

在SilverLight中，可以使用Shape類添加圖形，可以創(chuàng)建簡單的形狀，例如長方形或者更復(fù)雜的形狀，例如多邊形。在SilverLight中Brushes用來涂色或繪制圖形。

在TextBlock外圍添加一個StackPanel，Panel是一個容器，用來組合和處理UI元素布局。每個應(yīng)用程序至少有一個Panel，StackPanel中順序放置界面元素，根據(jù)方向不同的需要，可設(shè)置水平或垂直。而Grid和Canvas可用來更精準的元素定位。

我們將創(chuàng)建一個橢圓形狀，在StackPanel中顯示在TextBlock后面，可以指定橢圓的高度（Height）和寬度(Width)屬性以及填充顏色，為了填充橢圓，必須指定Brush繪制橢圓顏色。

這次我們不在使用Design View，我們在XAML視圖中實現(xiàn)。

1、雙擊MainPage.xaml，找到我們之前添加的TextBlock。

2、用下面內(nèi)容替換

XAML

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

3.按F5運行應(yīng)用程序

運行結(jié)果如下所示，但是目前我們的程序沒有任何的交互，下面我們增加交互功能。

4. 停止調(diào)試

添加按鈕

下面我們將給應(yīng)用程序添加Button，控件是在SilverLight應(yīng)用程序中創(chuàng)建用戶交互的一種方式，SilverLight有豐富的控件庫，包括Button、TextBox、ListBox等。

有兩步添加Button，***步是在XAML中添加Button元素，第二步是添加一些用戶交互的事件處理邏輯，例如單擊Button。

1、在XAML中，在我們前面添加的Ellipse元素的后面添加下面內(nèi)容

XAML  
<Button Height="150" 
Width="300" 
Name="FirstButton" 
Content="Tap" /> 

Name屬性設(shè)置了Button的名稱為FirstButton，以便于我們可以在代碼中使用該Button，Content屬性指定了Button顯示的文本。Height和width指定了按鈕的高度和寬度。

Silverlight是事件驅(qū)動的應(yīng)用程序模型，當應(yīng)用程序中某些事件發(fā)生，例如單擊按鈕或者應(yīng)用程序啟動，一個事件會被觸發(fā)。我們可以添加事件處理的代碼，完成當事件發(fā)生時要處理的動作。我們可以給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，按鈕顯示的內(nèi)容在”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運行，單擊按鈕可以看到運行效果。

添加動畫
 
接下來我們?yōu)閼?yīng)用程序增加動畫，我們可以為前面的橢圓增加擠壓然后再拉長的簡單的動畫。

創(chuàng)建一個動畫(Animation)需要做3件事情，創(chuàng)建StoryBoard，創(chuàng)建動畫，添加代碼執(zhí)行動畫。

StoryBoard是一個容器，用來組裝動畫，通過StoryBoard，可以開始和停止動畫。

Silverlight通過在一定的時間跨度內(nèi)改變對象的屬性值實現(xiàn)動畫效果，StoryBoard.TargetName和StoryBoard.TargetProperty分別指定了哪個對象、對象的哪個屬性應(yīng)用動畫。To屬性指定了動畫運動所到達的值，AutoReverse屬性指定了動畫結(jié)束時是否重復(fù)運行，Duration屬性指定了動畫執(zhí)行的時長，例如：如果想讓動畫運行1秒，可以使把Duration設(shè)置為”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中，增加調(diào)用動畫Begin方法，當單擊按鈕時執(zhí)行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();  
} 

4.按F5運行應(yīng)用程序,可以看到橢圓簡單的動畫效果。

【編輯推薦】

升級Windows Phone 開發(fā)環(huán)境

Windows Phone 7開發(fā)環(huán)境搭建

移動應(yīng)用程序開發(fā)應(yīng)考慮的八大安全問題

創(chuàng)建***個Windows Phone應(yīng)用程序 （1）

Mango四大改進 新版Windows Phone 7詳解