Windows Phone 7 - 學習新的Secondary Tile與Application Tile

Windows Phone 7 - 學習新的Secondary Tile與Application Tile

之前在<Windows Phone 7 – 讓你的程式出現在Tile中也有功能 – Live Tile>說明了可以透過ShellTileSchedule自訂Tile的變化,

然而那個時候討論的都是Application Tile,因為在WP 7.0 SDK裡Tile對於一個Application只會有一個,不管Push notifiaction或

自己ShellTileSchedule來變化,都是只有那一個Application Tile。

 

到了WP 7.1 SDK之後,除了Application Tile也多了讓開發者可以在自己的Application裡就增加自訂的Tile,而自訂的Tile就被稱

為Secondary Tile。 以下將說明這二者的差異:

 

(a) Application Tile

image_thumb[4]

參數 說明
Count 整數格式:1~99。如果Count未指定預設被認為是0,該count就不會顯示出來。
Background Image 指定App Tile的背景圖,預設是App的Icon,可以配合Push Notification或ShellTileSchedule來修改。到了7.1 SDK在App Tile的操作,更支援ShellTile APIs的使用。
Title 預設為該App的名稱。可以透過Push Notification或ShellTileSchedule來修改。該內容需符合單行(single-line)的限制,最多15個字元,超過的內容將不會顯示出來。

Application Tile故名思意它是透過用戶在Application透過長按顯示「pint to start」字樣選擇後所產生於start的tile。

                  

(b) Secondary Tiles

image_thumb6

參數 說明
Back Content 設定Back Tile要呈現的內容,大約40個字元。
Back Background Image 設定Back Tile的圖像。
Back Title 設定要呈現的標題。跟App Tile一樣大約15個字元,支援單行呈現。

 

(c) Update Application Tile / Secondary Tiles方法

‧使用ShellTile API取得Active Tiles中的第一個項目,進行參數的設定來更新Tile內容;

‧使用Push Notification發送Tile Notification來更新Application Tile;

‧使用ShellTileSchedule API,指定要更新的週期與對應的內容,進行週期更新;

 

從上述可以了解這二個Tile的差異,但其實差異比較大的就是Secondary Tiles被Pin在Start之後,它會定期顯示正面與背面資訊。

並且可以透過程式的方式,把該Secondary Tiles要攜帶的參數(例如:Page、QueryString)加上Tiles中,讓用戶點擊時,可以觸發

指定的Page與帶入對應的參數。至於Application Tile的話,就需要配合Push Notification或ShellTileSchedule來轉換。

 

那麼要怎麼來自訂Tile呢?接下來就往下說明幾個重要的類別,學習它們如果協助建立tile。

 

ShellTile Class

該API負責管理該Application的Application Tile與多個Secondary Tiles。在Application所擁有啟動的Tiles集合(ActiveTiles)中,

第一個Tile(First item)一定是Application Tile。另外,該API除了提供管理的功能之外,也提供屬性方法來取得目前啟動的Tiles

有那些,以及管理Tiles中各個tile的參數。

 

a. 重要屬性

屬性 說明
ActiveTiles 取得Application中目前被pinned start中的所有tiles。
NavigationUri 取得目前被點擊(tapping)的secondary tile的URI與執行參數。

這二個屬性將是用於每次

 

 

StandardTileData

該類別用於建立一個Tile物件,在建立、更新或刪除ShellTile中ActiveTiles時,均是透過該物件來進行刪除。

該物件提供一些需要設定的屬性,如下:

屬性 說明
Title 設定標題,type:string。
BackgroundImage 設定背圖,type:uri。
Count 設定Count數量,type:int。
BackTitle 設定背向標題,type:string。
BackBackgroundImage 設定背向圖示,type:uri。
BackContent 設定背向內文,type:string。

 

以下就舉個範例來說明如何操作上述二個類別與物件。

〉範例說明

a. 建立Secondary Tile,並且指定點擊該Tile時要進入App與夾帶的參數

   1: private void btnCreateTile_Click(object sender, RoutedEventArgs e)
   2: {
   3:     //確認是否有被建立過相同的secondary tile
   4:     ShellTile tTileToFind = ShellTile.ActiveTiles.FirstOrDefault(
   5:         x => x.NavigationUri.ToString().Contains("KeyID=POU"));
   6:  
   7:     if (tTileToFind == null)
   8:     {
   9:         //設定要建立新的Secondary Tile的樣式
  10:         StandardTileData tNewTileData = new StandardTileData
  11:         {
  12:             BackgroundImage = new Uri("/Images/blue.png", UriKind.Relative),
  13:             Title = "Secondary Tile",
  14:             Count = 99,
  15:             BackTitle = "Back of Tile",
  16:             BackContent = "Welcome to the back of the Tile",
  17:             BackBackgroundImage = new Uri("/Images/red.png", UriKind.Relative)
  18:         };
  19:  
  20:         //建立Secondary Tile,並且指定該Tile對應點擊後要開啟的Page與參數
  21:         ShellTile.Create(new Uri("/Tile2Page.xaml?KeyID=POU", UriKind.Relative), tNewTileData);
  22:     }
  23: }

設定指定要開啟Page取得NavigationContext中的Querystring參數:

   1: protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
   2: {
   3:     //註冊事件在OnNavigateTo,代表Page進入後的事件
   4:     base.OnNavigatedTo(e);
   5:  
   6:     //取得NavigationContext中的QueryString資料
   7:     this.PageTitle.Text = this.NavigationContext.QueryString["KeyID"];
   8: }

 

b. 更新Application Tile

   1: private void btnUdpateATile_Click(object sender, RoutedEventArgs e)
   2: {
   3:     //取得application tile,透過activetiles中的first();
   4:     ShellTile tTileToFind = ShellTile.ActiveTiles.First();
   5:     if (tTileToFind != null)
   6:     {
   7:         //產生要更新的tile data
   8:         StandardTileData tTileData = new StandardTileData();
   9:         tTileData.Title = "更新App tile";
  10:         tTileData.BackgroundImage = new Uri("/Images/red.png", UriKind.Relative);
  11:         tTileData.Count = 99;
  12:         tTileData.BackContent = "背後內文";
  13:         tTileData.BackTitle = "更新App Back";
  14:         tTileData.BackBackgroundImage = new Uri("/Images/green.png", UriKind.Relative);
  15:  
  16:         //update application tile
  17:         tTileToFind.Update(tTileData);
  18:     }
  19: }

要更新Secondary Tile的方式也一樣,只是需要先找出要更新的Secondary Tile,因為Secondary Tiles會有多個。

如下範例:

   1: private void btnUdpateSTile_Click(object sender, RoutedEventArgs e)
   2: {
   3:     //確認是否有被建立過相同的secondary tile
   4:     ShellTile tTileToFind = ShellTile.ActiveTiles.FirstOrDefault(
   5:         x => x.NavigationUri.ToString().Contains("KeyID=POU"));
   6:  
   7:     if (tTileToFind != null)
   8:     {
   9:         //設定要更新的Secondary Tile的樣式
  10:         StandardTileData tTileData = new StandardTileData
  11:         {
  12:             BackgroundImage = new Uri("/Images/green.png", UriKind.Relative),
  13:             Title = "更新的se Tile",
  14:             Count = 19,
  15:             BackTitle = "更新的 B Tile",
  16:             BackContent = "更新的Tile",
  17:             BackBackgroundImage = new Uri("/Images/bule.png", UriKind.Relative)
  18:         };
  19:  
  20:         //更新Secondary Tile
  21:         tTileToFind.Update(tTileData);
  22:     }
  23: }

 

[注意]

a. Application Tile不能被透過程式刪除,但仍可以設定Tile更新;

b. Secondary Tiles支援被建立、更新與刪除;

c. 在建立Secondary Tiles時,BackgroundImage與BackBackgroundImage必需使用local resource

    但在Update Secondard Tiles時,可以使用local或remote resource,local resouce的用法可以參考

    <Isolated Storage Overview for Windows Phone>的說明。

d. BackgroundImage與BackBackgroundImage使用需注意:

    d-1. 支援*.png與*.jpg,支援大小:173x173;支援*png有透明,透明部分會採用Theme的配色;

    d-2. 使用remote images最大80kb限制;如果下載超過30秒也會失效;

    d-3. 如果這二個屬性更新時有失效,則其他的屬性將更新仍有效;

======

以上是介紹相關WP7.1 SDK針對Tile的再進化。 Secondary Tile提供了開發者可以對於Tile提供更豐富的互動,其中我對於Secondary Tile

的應用最有印象的就是<Connectivity Shortcuts brings radio toggles to your Start screen [Mango]>這個App。它協助把[SETTINGS]中的

一些設定,例如:WIFI、Cellular、Bluetooth、Airplane這些功能原本透過Settings進去是很多步驟了,現在它可以直接透過App建立Tile

讓我們直接連接過去Settings中的畫面,然而這些可以設定的功能,也是透過新的WP7.1 SDK裡的Task功能。

接下來下一篇將介紹新的Task功能。謝謝。

 

References:

Tiles Overview for Windows Phone

Tiles for Windows Phone

How to: Send and Receive Tile Notifications for Windows Phone

Mango : DeviceNetworkInformation in Windows Phone 7.1

Secondary Tiles– Part 1: Creation

Tile Notifications Made Easy

WP7 - Secondary Tiles 將自訂功能釘在首頁!

马宁的Windows Phone 7.1初体验(三)——Tile

How to: Create, Delete, and Update Tiles for Windows Phone (必讀)

Application Manifest File for Windows Phone (必讀)

How to: Schedule Tile Updates for Windows Phone (必讀)

Essential Graphics, Visual Indicators, and Notifications for Windows Phone (WP7開發畫面的設計Guideline)

Application Certification Requirements for Windows Phone

 

Dotblogs Tags: