Poy's Blog: 動手做WP7手機應用程式 PART 3

看膩了預設值的畫面了嗎？緊接著，我們要將這隻應用程式加點變化，首先就從每之程式的首頁開始吧。
任務三：建立首頁的使用者介面
在此任務中，您將建立應用程式中首頁裡的使用者介面，每一個應用程式在啟動時，都會顯示主頁畫面，它導航著這隻應用程式該如何進行。

首先，我們可以在專案中建立一個資料夾，裡面存放著這隻程式會用到的圖像。在資源管理器中，右鍵單擊WindowsPhonePuzzle，指向添加Add，並選擇新建資料夾New Folder，再將此資料夾更名為Assets。
接著我們添加圖像至Assets資料夾。在資源管理器中，右鍵該資料夾，指向添加Add，然後選擇現有項目Existing Item，在添加的對話框中您可以瀏覽到範例資料夾中的Source\Assets，並添加SplashImage.jpg和Puzzle.jpg這兩個圖像文件。
如果您需要查看圖像，請直接在資源管理器中點選該檔案，Visual Studio會自動開啟系統預設的編輯程式。
從資源管理器中，開啟應用程式的主頁MainPage.xaml。
在所見即所得的設計視圖中選擇TextBlock，並將其重新命名為ApplicationTittle，接著在Properties屬性視窗中，將Common底下Text的值更改為WINDOWS PHONE PUZZLE。這裡可以使用快速鍵F4來開啟Properties屬性視窗。
接著選擇另一個TextBlock，將其重新命名為PageTittle，並將其Text值更改為start。

焦點轉向到程式碼上，Grid這個標籤主要的目的在於安排頁面上的元素，他可以看作是一個容器，裡面包含著版面上的各個元件，而Grid可以有巢狀結構，例如做完根結構的LayoutRoot，這個Grid標籤裡面就可以包含其他Grid標籤；另外Grid標籤是依「列」作排列，可以藉由設定Grid.Row的值來做控制。
找到命名為ContentPanel的Grid標籤，並把其Grid.Row值設為1，並根據下列程式碼加入適當的程式片段。

XAML

上述這段程式碼做了兩個布局，其中第一行是加入圖像至啟動畫面，第二行則是建立按鈕，往後是要讓此按鈕具有瀏覽拼圖的功能。

切換到設計視圖的編輯模式，可藉由點選設計Design標籤( )來達到切換編輯視窗的目的。
建立一個事件處理程序的按鈕。雙擊設計視圖上命名為START!的按鈕，此操作會建立該按鈕被點擊的事件處理程序StartButton_Click，然後在該其程序中插入如下的程式碼。(可使用Code Snippet – YourFirstWP7App – Ex 1 Task 3 Step 9 – StartButton_Click event handler)
C#
private void StartButton_Click(object sender, RoutedEventArgs e) { // navigate this.NavigationService.Navigate(new Uri("/PuzzlePage.xaml", UriKind.Relative));
}

任務四：管理應用程式中的錯誤
在開發應用程式的時，有時候會不小心暗藏了小錯誤，為了要順利除錯，所以我們要在應用程式中做好管理異常狀態的功能。要管理未處理的異常錯誤，首先我們要添加一個新頁面給應用程式顯示錯誤訊息，而這項功能我們可以透過UnhandleException這個事件處理程序達成，當有異常引發時且未被管理機制捕獲時，這個處理程序會將錯誤訊息保留，並將畫面導航到錯誤頁面。

首先，添加一個新頁面至專案。在資源管理器中，右擊WindowsPhonePuzzle節點，指向添加Add，在選擇新增項目New Item，在新增項目的對話框中，選擇Windows Phone Portrait Page模板，並更名為ErrorPage.xaml。

在ErrorPage.xaml中找到LayoutRoot Grid並根據下列程式碼做適度修改。主要是更改TextBlock的Name值，並在ContentPanel Grid中新增一個名為ErrorText的TextBlock物件，這個物件是用來保留並顯示未來發生例外錯誤時的訊息。

XAML

...
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12">
        <TextBlock x:Name="ApplicationTitle" Text="WINDOWS PHONE PUZZLE" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock x:Name="PageTitle" Text="error" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>
    
    <Grid x:Name="ContentPanel" Grid.Row="1">
        <Border BorderBrush="White">
            <TextBlock x:Name="ErrorText" Style="{StaticResource PhoneTextSmallStyle}" TextWrapping="Wrap" />
        </Border>
    </Grid>
</Grid>
...

接著按下F7，或是在資源管理器中右鍵點擊ErrorPage.xaml選擇View Code，接著在namescape的位置插入以下程式碼。

C#

using System.Windows.Navigation;

這裡將設置一個例外元件，使發生例外時會自動將畫面導航至該頁面，接著請在該其程式碼中插入如下的程式碼。(可使用Code Snippet – YourFirstWP7App –Ex 1 Task 4 Step 3 – ErrorPage OnNavigatedTo)

public partial class ErrorPage : PhoneApplicationPage
{
public ErrorPage()
{
InitializeComponent();
}

public static Exception Exception;

// Executes when the user navigates to this page.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
ErrorText.Text = Exception.ToString();
}
}

現在我們ErrorPage已經修改好了，接下來我們要在App.xaml加入一個事件處理程序。

請在資源管理器中右鍵點擊App.xaml並選擇View Code，並找到程式碼中找到Application_UnhandledException，並在其中插入如下程式碼。(可使用Code Snippet – YourFirstWP7App – Ex 1 Task 4 Step 6 – Application_UnhandledException)

// Code to execute on Unhandled Exceptions
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
if (System.Diagnostics.Debugger.IsAttached)
{
    // An unhandled exception has occurred; break in the debugger
    System.Diagnostics.Debugger.Break();
}

e.Handled = true;
ErrorPage.Exception = e.ExceptionObject;
(RootVisual as Microsoft.Phone.Controls.PhoneApplicationFrame).Source =
      new Uri("/ErrorPage.xaml", UriKind.Relative);
}

任務五：驗證
現在你可以把您建立好的應用程式部署到Windows Phone的模擬器裡，然後審核您剛剛修改過的功能。

在Visual Studio中按下CRTL+F5來部署應用程式至模擬器中，並測試其運行。如果在編譯及部署的的時候沒有出現錯誤訊息，那應用程式會直接啟動並顯示他的主畫面。
接著點擊「START!」，此時應用程式出現錯誤訊息，您會發現該錯誤訊息便是我們剛剛所建立的ErrorPage。會發生這樣的事件是正常的，因為該按鈕應該被導航到PuzzlePage.xaml，但目前為止我們尚未建立PuzzlePage這個檔案。
按下返回鍵，回到手機主頁。之後再陸續的教學會持續跟著這個專案，將其他未完成的功能一一添加上去。