動態磚

發行項
06/12/2014

綜述

Windows Phone 8 系統中，經過使用者允許，App 可以釘選次級動態磚到首頁。次級動態磚可以連結到 App 中特定的頁面、為 App 提供額外的訊息。

Windows Phone 8 的即時動態磚有四種：

標準動態磚 (Standard tile) : Windows Phone 7.5 系統中唯一的動態磚類型，顯示一個圖示和標題文字。為了相容。不像其他的動態磚有寬尺寸，若開發者沒有將 App 設定為支援其他類型的動態磚，釘選到首頁時所建立的動態磚就預設為標準動態磚。
循環動態磚 (Cyclic tile) : 循環顯示多個影像及文字。
翻轉動態磚 (Flip tile) : 一個自動翻轉的雙面動態磚。除了標準動態磚的功能外還支援寬尺寸。
標誌動態磚 (Iconic tile) : 一個靜態圖示的數字徽章，說明應用程式狀態，寬尺寸還可以附加顯示文字內容。

開發人員可以指定不同情況下可建立的動態磚類型，以及每種類型的動態磚支援的文字和圖像，讓 App 可以擁有一種以上的外觀。此外，Windows Phone 8 允許用戶從三種尺寸中自訂動態磚尺寸：小、中、大。因此，App 可以利用不同尺寸的動態磚在首頁呈現不同詳細程度的訊息。

我們想讓使用者可以從 Contoso Cookbook App 中釘選特定的食譜及食譜類型到首頁。每個被釘選的動態磚也必須支援大中小三種尺寸供用戶選擇。

實作支援次級動態磚需要修改各個代碼檔案，作法將在後面的練習中解釋。

目標

此實驗將引導我們達到下列目標：

App 支援動態磚釘選
支援各種不同動態磚 (flip, cyclic, and iconic)

系統需求

您必須符合以下系統需求：

Microsoft Visual Studio 2012 or Microsoft Visual Studio 2012 Express for Windows Phone
Windows phone 開發經驗

實驗架構

包含三部分的練習及以下任務：

新增資源
支援翻轉動態磚
支援循環動態磚
支援標誌動態磚
測試

預計完成時間

需要至少 60 分鐘

練習 1 ：新增翻轉動態磚

在此練習中，我們將修改 Contoso Cookbook App 以支援次級動態磚，從翻轉動態磚開始。我們將接著測試修改的地方，看看動態磚如何進入 App 中直接瀏覽，並顯示 App 的重要資訊到首頁上。

這個練習將集中在翻轉動態磚，後續的的連習將演示其他兩個的動態磚類型。（循環和標誌）。

任務 1– 新增及替換資源

這個任務中，我們要新增並替換需要的圖像以支援 App 的動態磚。

打開 Visual Studio 2012
瀏覽到 EX1\Begin 資料夾
打開 ContosoCookbook.sln 解決方案
找到 main project 下方的 Assets 資料夾
按右鍵點擊 Visual Studio 方案總管中的 project 並選擇 Add -> Existing item
從 Assets 資料夾中複製新增下列影像檔案：
- MediumLogo.png
- SmallLogo.png
找到 main project 下方的 Assets/Icons 資料夾
從 Assets/Icons 資料夾中複製新增下列影像檔案：
- like.png
- unlike.png

這些影像資料現在已經被載入到專案中，後續的任務中將使用到這些影像資料。

任務 2 – 支援翻轉動態磚 (Flip Tiles)

要釘選或者移除釘選動態磚，我們必須更換及擴展 Common.Features 類別中提供的功能。

打開 Features.cs 檔案
找到 Tile 類別
我們將使用翻轉動態磚，將詳細的食譜資訊展示在自動翻轉動態磚的背面。找到並替換 SetTile 方法中的內容如下方代碼：

C#
FlipTileData tileData = new FlipTileData( )
{
//Front square data
Title = item.Title,
BackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative),
SmallBackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative),

//Back square data
BackTitle = item.Title,
BackContent = MakeString(item.Ingredients),
BackBackgroundImage = new Uri(item.Group.GetImageUri(), UriKind.Relative),

//Wide tile data
WideBackgroundImage = new Uri(item.GetImageUri(), UriKind.Relative),
WideBackBackgroundImage = new Uri(item.Group.GetImageUri( ),
UriKind.Relative),
WideBackContent = item.Directions
};

ShellTile.Create(new Uri(navDataSource, UriKind.Relative), tileData, true);

在之前的版本，這個方法可以建立標準動態磚，將食譜影像顯示在正面，原產地的地圖則顯示在背面。新版本建立了翻轉動態磚，小或中尺寸的動態磚可以顯示食譜材料。大尺寸的動態磚則可以顯示烹飪步驟。

注意 WideBackgroundImage, WideBackBackgroupImage, 和 WideBackContent 的屬性，透過使用這些屬性，我們可以利用大尺寸的動態磚顯示更詳細的資訊。
前面的 SetTile 方法使用 MakeString 方法得到用字串表示的食譜配方，並指定給中尺寸動態磚的 BackContent 屬性，我們現在實作這個方法，增加以下方法到類別中：

C#
private static string MakeString(ObservableCollection<string> ingredients)
{
string res = "";

foreach (var ingredient in ingredients)
{
res += ingredient + "\n";
}

return res;
}

加入以下 "using" 指令到檔案的最上方

C#
using System.Collections.ObjectModel;

注意 SetTile 方法已經從 RecipeDetailPage.xaml.cs 中的 btnPinToStart_Click 事件處理器被呼叫，不需要做更進一步的更改。結果就是翻轉動態磚會被用來當作次級動態磚展示使用者釘選到桌面的食譜。

任務 3 – 測試翻轉動態磚

我們的Contoso Cookbook App現在已經可以接受測試了，我們執行App來測試看看翻轉動態磚：

編譯、設定和執行應用程式

圖 1
美食類別頁面
點選一個類別

圖 2
德國 (German) 類別頁面
滑動畫面食譜會一一顯現在螢幕上，如果看到空白的畫面上出現 "Buy this App" 按鍵，點擊按鍵就會顯示出食譜內容。

圖 3
德國(German)食譜

選擇一個食譜

圖 4
Saure Zipfel 食譜
點擊螢幕右下角的 ”... ”按鈕，”pin ”按鈕會出現，顯示食譜尚未被釘選到首頁。
點擊 ”pin ”按鈕，當螢幕出現 "Set as Lock Screen" 提示詢問您是否批准這個 App 成為螢幕鎖定畫面的提供者時按下 "Yes"。
檢查選定的食譜是否可以在正反面翻轉，正面顯示食譜影像、背面顯示材料清單。
按兩次 back 鍵回到食譜類別頁面並用相同方法釘選另一個食譜。

在首頁檢查建立的兩個翻轉動態磚是否正常運作

圖 5
首頁上的翻轉動態磚

按住其中一個動態磚直到更改設定的按鈕出現

圖 6
在首頁編輯翻轉動態磚
點擊動態磚右上角的“取消釘選”按鈕，動態磚會消失。
按住另一個動態磚直到更改設定的按鈕出現
重複點擊動態磚右下角的 "Change size" 按鈕，動態磚尺寸會在大中小間變換供選擇

圖 7
小尺寸的翻轉動態磚呈現在首頁的樣子

圖 8
寬尺寸的動態磚呈現在首頁的樣子

練習 2 ：新增循環動態磚

這一個練習中，我們將為 Contoso Cookbook App 新增循環動態磚。

任務 1 - 支援循環動態磚

循環動態磚可以將一系列圖片順序顯示，當使用者釘選一個美食類別到首頁，可以使用循環動態磚顯示類別中所有的食譜影像。

如先前討論的，要支援循環動態磚，我們要將 Common.Features 類別中提供的常見功能做替換。

打開 Features.cs 檔案
找到 Tile 類別
增加下列新方法 :

C#
public static void SetGroupTile(RecipeDataGroup group, string navDataSource)
{
List<Uri> list = new List<Uri>( );
foreach (var recipe in group.Items)
list.Add(new Uri(recipe.ImagePath.LocalPath, UriKind.Relative));

CycleTileData tileData = new CycleTileData( )
{
Title = group.Title,
SmallBackgroundImage = new Uri(group.GetImageUri( ),
UriKind.RelativeOrAbsolute),
CycleImages = list
};

ShellTile.Create(new Uri(navDataSource, UriKind.Relative), tileData, true);
}

前面的方法建立了可以重複循環顯示美食類別中所有食譜影像的循環動態磚，相關的設定在 Title, SmallBackgroundImage, 和 CycleImages 屬性。

接著，將美食類別釘選到首頁必須做一些替換。
打開 GroupDetailPage.xaml 檔案
找到 phone:PhoneApplicationPage.ApplicationBar 元素並以下方代碼取代：

XAML
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="False"
Mode="Minimized" Opacity="1.0">
<shell:ApplicationBarIconButton x:Name="btnPinToStart"
IconUri="/Assets/Icons/pin.png"
Click="btnPinToStart_Click" Text="Pin To Start"/>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
打開 GroupDetailPage.xaml.cs 檔案
增加下列 "using" 指令在檔案頂端：

C#
using Microsoft.Phone.Shell;
新增下列常數到 GroupDetailPage 類別：

C#
private const string RemoveFavUri = "/Assets/Icons/unpin.png";
private const string FavUri = "/Assets/Icons/pin.png";

這些常數將被用在釘選及移除釘選的按鈕上
增加下列屬性：

C#
public ApplicationBarIconButton pinBtn
{
get
{
var appBar = (ApplicationBar)ApplicationBar;
var count = appBar.Buttons.Count;
for (var i = 0; i < count; i++)
{
ApplicationBarIconButton btn = appBar.Buttons[i]
as ApplicationBarIconButton;
if (btn.IconUri.OriginalString.Contains("pin"))
return btn;
}
return null;
}
}
接下來添加一個方法，根據美食類別是否被釘選到首頁螢幕來修改按鈕的圖示和文字如下：

C#
void SetPinBar( )
{
var uri = NavigationService.Source.ToString();
if (Features.Tile.TileExists(uri))
{
pinBtn.IconUri = new Uri(RemoveFavUri, UriKind.Relative);
pinBtn.Text = "Unpin";
}
else
{
pinBtn.IconUri = new Uri(FavUri, UriKind.Relative);
pinBtn.Text = "Pin";
}
}
找到 OnNavigatedTo 方法並將最後一行 (在 OnNavigatedTo 方法裡) 取代為下列代碼：

C#
SetPinBar();
base.OnNavigatedTo(e);
最後，我們應該為釘選及移除釘選按鈕增加一個事件處理器。當使用者釘選一個美食類別到首頁就建立一個新的次級動態磚，反之，當使用者移除釘選就移除首頁上的動態磚，增加事件處理器如下：

C#
private void btnPinToStart_Click(object sender, EventArgs e)
{
var uri = NavigationService.Source.ToString( );
if (Features.Tile.TileExists(uri))
Features.Tile.DeleteTile(uri);
else
Features.Tile.SetGroupTile(group, uri);

SetPinBar( );
}

任務 2 – 測試循環動態磚

Contoso Cookbook App 現在已經可以接受測試了，我們執行 App 來測試看看循環動態磚：

編譯、設定與執行應用程式

圖 9
美食類別頁
按下其中一個美食類別

圖 10
德國 (German) 食譜類別頁面

點擊螢幕右下角的 ”... ”按鈕，“pin”按鈕會出現，因為這個食譜尚未被釘選到首頁。

圖 11
德國 (German) 食譜類別頁面上可以看見的功能列
按下 "pin" 按鈕.釘選的食譜類別動態磚出現在首頁，幾分鐘後會發現動態磚會輪播類別內所有食譜的圖片。

圖 12
被釘選的德國 (German) 食譜循環動態磚
按下動態磚直到更改設定的按鈕出現

圖 13
編輯循環動態磚
重複點擊動態磚右下角的 "Change size" 按鈕，動態磚尺寸會在大中小間變換供選擇

圖 14
小尺寸動態磚呈現在首頁的樣子

圖 15
寬尺寸動態磚呈現在首頁的樣子

練習 3 ：增加標誌動態磚

這一個練習中，我們將為 Contoso Cookbook App 新增標誌動態磚。

任務 1 – 更改應用程式清單

首先，我們更新應用程式清單中 App 的動態磚範本以宣告支援標誌動態磚。

打開 WMAppManifest.xml 檔案
進入到 "Application UI" 選項，向下滾動到底。在 "Tile Template" 下拉式選單中，選擇 "TemplateIconic"：

圖 16
在應用程式清單中選擇一個動態磚範本
在 "Tile Title" 項目的文字區域填入 "Contoso Cookbook"
點擊 "Small" 動態磚的 "…" 按鈕並選擇 Assets\SmallLogo.png 檔案：

圖 17
新增一個小尺寸動態磚影像到應用程式清單內
點擊“Medium” 動態磚的 "…" 按鈕並選擇 Assets\MediumLogo.png 檔案

圖 18
新增一個中尺寸的動態磚影像到應用程式清單中
現在，應用程式能夠在首頁上顯示自定義的標誌性動態磚了。

任務 2 – 測試動態語音辨識

Contoso Cookbook App 將使用標誌性動態磚在 App 的主要動態磚中顯示使用者最後訪問的食譜類別的簡要資訊。標誌性動態磚支援數字標記、寬或中尺寸動態磚的標題，以及寬尺寸可最多容納三行文字內容。把 App 的主要動態磚釘選到首頁：首頁往左邊滑動可以顯示已安裝的所有 App 清單，找到 Contoso Cookbook App 長按，從選單中選擇 "pin to start" 選項。

圖 19
把 App 釘選到首頁

跟之前一樣，要使 App 支援標誌性動態磚，我們必須將 Common.Features 類別提供的部分功能替換掉。
打開 Features.cs 檔案
找到 Tile 類別
增加以下 “using” 指令到檔案頂端：

C#
using System.Windows.Media;
增加下列新方法：

C#
public static void UpdateMainTile(RecipeDataGroup group)
{
//Get application's main tile
var mainTile = ShellTile.ActiveTiles.FirstOrDefault();

if (null != mainTile)
{
IconicTileData tileData = new IconicTileData()
{
Count = group.RecipesCount,
BackgroundColor = Color.FromArgb(255, 195, 61, 39),
Title = "Contoso Cookbook",
IconImage = new Uri("/Assets/MediumLogo.png",
UriKind.RelativeOrAbsolute),
SmallIconImage = new Uri("/Assets/SmallLogo.png",
UriKind.RelativeOrAbsolute),
WideContent1 = "Recent activity:",
WideContent2 = "Browsed " + group.Title + " group",
WideContent3 = "which contains " + group.RecipesCount +
" recipes"
};

mainTile.Update(tileData);
}
}

若沒有被使用者移除釘選，前面的方法以標誌性動態磚更新了 App 的主要動態磚，動態裝上顯示了一個數字標記說明了釘選的類型裡包含的食譜數量及最近瀏覽過的美食類別。寬尺寸的動態磚還附加了類別名稱及類別簡介。

前方的代碼只影響到 App 的主要動態磚，無論何時使用者想更換釘選目標，都可以更改代碼。我們現在來設定一些地方以支援這些變更。
打開 GroupDetailPage.xaml.cs 檔案
找到 OnNavigatedTo 方法並將最後一行代碼( 在 base.OnNavigatedTo 方法裡) 更換成下方：

C#
//Update main tile with recently visited group
Features.Tile.UpdateMainTile(group);

base.OnNavigatedTo(e);

當使用者每次瀏覽過後，前方的代碼將把最新使用者瀏覽的美食類別更新到 App 的主要動態磚上。

任務 3 – 測試標誌性動態磚

Contoso Cookbook App 現在已經可以接受測試了，我們執行 App 來測試看看標誌動態磚：

建立、編譯並執行應用程式

圖 20
食譜類別頁面
點選一個食譜類別

圖 21
德國 (German) 食譜類型頁面
點擊手機 (硬體上) 的回首頁按鈕。App 的主要動態磚已更改為顯示最近瀏覽過的美食類別訊息。

圖 22
中尺寸的主要標誌動態磚呈現在首頁的樣子
按住 App 的主要動態磚直到更改設定的按鈕出現
重複點擊動態磚右下角的 "Change size" 按鈕，動態磚尺寸會在大中小間變換供選擇。注意在寬尺寸動態磚出現的訊息。

圖 23
小尺寸的標誌動態磚在首頁呈現的樣子

圖 24
寬尺寸標誌動態磚呈現在首頁的樣子