Windows 8 應用開發實戰：從零建立 Contoso Cookbook 應用商店應用

前言

本系列實驗將引導您使用 XAML 與 C# 完整打造一個真實的 Windows 應用商店應用——Contoso Cookbook。第一個實驗奠定基礎：建立專案、理解架構、自訂品牌、載入真實食譜資料、自訂使用者介面。

建立專案與認識架構

使用 Grid App 範本

Visual Studio 2012 提供「Grid App (XAML)」範本，預設包含三頁導航架構：

• GroupedItemsPage.xaml：開始頁面，群組式項目橫向捲動
• GroupDetailPage.xaml：群組明細頁面
• ItemDetailPage.xaml：項目明細頁面，支援 FlipView 左右切換

核心資料夾結構：

• App.xaml：應用程式進入點與全域資源
• Common/：StandardStyles.xaml（樣式資源）、BooleanToVisibilityConverter.cs、LayoutAwarePage.cs（視覺狀態基底類別）
• DataModel/：SampleDataSource.cs 範例資料模型
• Assets/：品牌圖示（Logo、SplashScreen、SmallLogo、WideLogo、StoreLogo）

自訂應用程式品牌

修改應用名稱

<x:String x:Key="AppName">Contoso Cookbook</x:String>

替換品牌圖示並設定清單

1. 解除安裝舊版應用移除磚。
2. 將準備好的圖示（Logo.png、SmallLogo.png、SplashScreen.png、StoreLogo.png、WideLogo.png）覆蓋 Assets 資料夾。
3. 編輯 Package.appxmanifest：顯示名稱設為「Contoso Cookbook」、描述設為「Contoso Cookbook Application」、寬磚指定 Assets\WideLogo.png。

重新部署後，開始畫面將顯示自訂磚與啟動畫面。

載入真實食譜資料

替換資料模型

1. 匯入 RecipeDataSource.cs 取代 SampleDataSource.cs，類別對應：SampleDataSource → RecipeDataSource、SampleDataGroup → RecipeDataGroup、SampleDataItem → RecipeDataItem。
2. 三個頁面的 code-behind 全域搜尋取代命名空間引用。

導入資料檔與圖片

• 建立 Data/ 資料夾，加入 Recipes.txt（JSON 格式食譜資料）。
• 建立 Images/ 資料夾，匯入 tiles、chinese、french 等分類圖片資料夾。

修改 App.xaml.cs 載入資料

using ContosoCookbook.Data;

protected async override void OnLaunched(LaunchActivatedEventArgs args)
{
    if (args.PreviousExecutionState == ApplicationExecutionState.Running)
    {
        Window.Current.Activate();
        return;
    }
    // 載入本地資料
    await RecipeDataSource.LoadLocalDataAsync();
    // 或載入雲端資料：await RecipeDataSource.LoadRemoteDataAsync();

    // 建立根框架...
}

LoadLocalDataAsync 解析 JSON 並建立 RecipeDataGroup/RecipeDataItem 物件樹，HttpClient 版本展示雲端資料載入模式。

自訂使用者介面

開始頁面：調整項目樣板

修改 Standard250x250ItemTemplate：

• 移除 Subtitle TextBlock
• Grid 尺寸改為 320×240 保持圖片比例
• 疊加區高度 60→48，繫結 ShortTitle

群組明細頁面：優化版面與加入準備時間

• Header 區：移除標題 TextBlock，圖片寬度 480、上邊距 10，描述左邊距調整。
• Standard500x130ItemTemplate：Grid 寬度 480→360，Border 移除固定寬度保持比例，移除 Subtitle/Description，繫結 ShortTitle，新增水平 StackPanel 顯示「準備時間：X 分鐘」。

項目明細頁面：三欄式配版與值轉換器

1. 新增 ListConverter 實作 IValueConverter，將 ObservableCollection<string> 轉換為含換行符的單一字串，供 TextBlock 繫結。
2. 在 ItemDetailPage.xaml 資源宣告 <common:ListConverter x:Key="ListConverter"/>。
3. 重寫 FlipView ItemTemplate：三欄 Grid 配置——第 1 欄標題/圖片/準備時間、第 2 欄材料清單（使用 ListConverter）、第 3 欄步驟說明（內建 ScrollViewer）。
4. 內建視覺狀態處理：FullScreenPortrait 限制圖片最大高度 400，Snapped 切換垂直捲動模式並限制圖片高度 160。

總結

第一個實驗完成了專案建立、品牌自訂、真實資料載入（本地/雲端）、資料繫結與三大頁面 UI 深度客製化。奠定了後續實驗（方向/輔助螢幕、搜尋/共用、應用列/媒體捕獲、進程生命週期、設定、磚/通知、商店 API）的堅實基礎。