深入學習Windows Phone HubTile的用法 – [WP開發]

在最新的Windows Phone Toolkit中我們可以看到HubTile這個控制項，首先先瞭解下什麼是HubTile，簡單來說，就是允許你給你的應用程式添加些生動或富有意義的瓦片(Tile)。HubTile可以包含映像，標題，資訊以及通知提示。同時，我們也可以通過GroupTag屬性對HubTile進行分組，它們的動畫效果由下面的事件隨機觸發：

• Flip animation with PlaneProjection
• Translate animation

 

接下來我們就開始學習HubTile，值得注意的是，HubTile的設計應該滿足Metro UI風格的，所以它的預設大小寫入程式碼為173X173，即使你修改它的Height/Width屬性也無法改變它的大小，如果你確實想改變它的大小的話可以去重新定義它的ControlTemplate樣式。

 

使用HubTile前請先引用Microsoft.Phone.Controls.Toolkit.dll 到你的項目中來，然後在XAML內聲明命名空間：

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

然後，聲明一個HubTile：

<toolkit:HubTile Title="HubTile Title" Message="This is HubTile message!" x:Name="hubTile"/>

或者，你可以通過Code-Behide去添加一個HubTile：

HubTile hubTile = new HubTile();hubTile.Message = "This is HubTile message!";hubTile.Title = "HubTile Title";

HubTile的幾個關鍵屬性有：

• Title:設定或擷取HubTile執行個體的標題
• Message:設定或擷取HubTile執行個體的資訊，用小字型展示
• Source:ImageSource類型，設定或擷取HubTile執行個體的圖片源
• DisplayNotification:布爾值，它確定新提示的布爾標識
• Notification:設定或擷取提示的內容，用大字型展示
• IsFrozen:布爾值，設定或擷取那些沒有處於Animated的映像的布爾標識
• GroupTag:設定或擷取HubTile組的group tag。當你添加了多個HubTile，這時你可以把它們歸為一組，如下面的代碼：

<toolkit:HubTile Title="London" GroupTag="Cities"/><toolkit:HubTile Title="NewYork" GroupTag="Cities"/>

這時我們可以通過後台代碼同時Freeze或者Unfreeze一個HubTile組：

HubTileService.FreezeGroup("Cities");HubTileService.UnfreezeGroup("Cities");

 

上面介紹了HubTile的基本屬性，接下來介紹一個很重要的HubTileService，通過HubTileService，你可以控制這些HubTiles的動畫，HubTileService提供了以下幾種靜態方法：

很容易就能明白這幾個方法的用處，例如凍結一個HubTile，解除凍結一個HubTile等等，自己實踐下就更能體會到這些方法的用處了。

 

前面簡單的介紹了HubTile的一些屬性與用法，接下來介紹一下HubTile使用過程中的DataBinding。通過一個執行個體讓大家更加感性地認識HubTile的應用，例如在音樂播放應用中可以使用HubTile來展示音樂頻道，或者一個點菜應用中使用HubTile來展示菜式等，下面就通過HubTile來實現一個點餐應用，最終顯示效果如下：

首先定義資料項目如下：

public class TileItem    {        public string Title         {             get;            set;        }                     public string Notification         {            get;             set;        }                public bool DisplayNotification        {             get { return !string.IsNullOrEmpty(this.Notification); }        }                      public string Message        {            get;             set;         }        public string GroupTag         {            get;            set;        }    }

接著定義TileItem資料集合源如下：

void InitializeItem()        {            List<TileItem> tileItems = new List<TileItem>() {                new TileItem() { ImageUri = "/Images/chicken.jpg", Title = "Chicken", Notification = "$3.49", GroupTag = "TileGroup" },                 new TileItem() { ImageUri = "/Images/wings.jpg", Title = "Wings", Notification = "Only $2.49", GroupTag = "TileGroup" },                 new TileItem() { ImageUri = "/Images/bonfillet.jpg", Title = "Chicken\nFillet", Message = "A couple of these will not hurt your diet." },                 new TileItem() { ImageUri = "/Images/burger.jpg", Title = "Burger", Notification = "$3.99" },                 new TileItem() { ImageUri = "/Images/bucket.jpg", Title = "Chicken\nBucket", Notification = "$19.99" },                 new TileItem() { ImageUri = "/Images/fries.jpg", Title = "Fries", Notification = "Only $1.99" },                new TileItem() { ImageUri = "/Images/caesar.jpg", Title = "Caesar Salad", Notification = "$4.99" },                 new TileItem() { ImageUri = "/Images/corn.jpg", Title = "Corn", Notification = "Only $1.99" }, };         }

 定義好資料來源，我們將使用一個ListBox來展示這些HubTile，在XAML檔案中定義如下：

 

<ListBox Grid.Row="0" x:Name="tileList">                <ListBox.ItemsPanel>                <ItemsPanelTemplate>                    <toolkit:WrapPanel Orientation="Horizontal" />                </ItemsPanelTemplate>            </ListBox.ItemsPanel>            <ListBox.ItemTemplate>                <DataTemplate>                    <toolkit:HubTile Title="{Binding Title}" Margin="3"                                       Notification="{Binding Notification}"                                      DisplayNotification="{Binding DisplayNotification}"                                         Message="{Binding Message}"                                      GroupTag="{Binding GroupTag}"                                       Source="{Binding ImageUri}">                                            </toolkit:HubTile>                </DataTemplate>            </ListBox.ItemTemplate>            </ListBox>

完成上面的工作後，編譯運行就看到HubTile展示資料的效果，注意每個HubTile顯示時的動畫都是隨機，看到的只是某個時刻的靜態效果，讀者親自去編碼時就能體會到它的美妙之處，另外，如果單是資料顯示而沒有邏輯處理用處也不是很大，所以我們如果想給HubTile添加點擊事件處理，可以通過下面的方式註冊Tap(或者DoubleTap)事件：

public MainPage(){    InitializeComponent();     this.hubTile.Tap += new EventHandler<System.Windows.Input.GestureEventArgs>(hubTile_Tap);} void hubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e){    MessageBox.Show("Hub tile 1 was tapped");}

 

例如，我們可以通過這些事件去Freeze或者Unfreeze某些HubTile，以滿足一些效能上的要求等等：

void hubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e)        {            //這裡可以進行事件響應等，還可以進行判斷動態地改變HubTile的IsFrozen狀態等            HubTile hubTile = sender as HubTile;            hubTile.IsFrozen = true;            //HubTileService.FreezeHubTile(hubTile);         }

至此，對HubTile的介紹暫告段落，更多內容將再介紹。

 

原文出處。

 

2011-10-19 updated

上面提到HubTile的Visual State都是隨機進行展示的，所以當IsFrozen沒有設定為True時每隔一段時間HubTile的Visual State就進行自動切換，這時如果我們想人工的選擇HubTile的Visual State時怎麼辦呢？這時，我們可以通過VisualStateManager這個類的進行Visual State的選擇，關於VisualStateManager ，可以查看MSDN上的介紹瞭解更多的內容，這裡只是簡單的用代碼說明一下。

在HubTile的響應事件或者其他事件中設定下面的代碼：

private void btnGoToExpanded_Click(object sender, RoutedEventArgs e) {            VisualStateManager.GoToState(this.hubTile, "Expanded", true); }

即可將HubTile的Visual State手動設定為Expanded，同理，也可以設定為"Semiexpanded","Flipped","Collapsed"這三種效果。