Windows Phone基本的應用程序的開發，內容如下。本篇文章是在上一篇創建***個Windows Phone應用程序 （1）的基礎上為應用程序增加圖形、按鈕、簡單動畫。

添加圖形

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

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

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

這次我們不在使用Design View，我們在XAML視圖中實現。

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

2、用下面內容替換

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();  
} 

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

【編輯推薦】

升級Windows Phone 開發環境

Windows Phone 7開發環境搭建

移動應用程序開發應考慮的八大安全問題

創建***個Windows Phone應用程序 （1）

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