當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

wp7 HubTile

發(fā)布時(shí)間：2025/3/20 编程问答 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 wp7 HubTile 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

在最新的Windows Phone Toolkit中我們可以看到HubTile這個(gè)控件，首先先了解下什么是HubTile，簡單來說，就是允許你給你的應(yīng)用程序添加些生動(dòng)或富有意義的瓦片(Tile)。HubTile可以包含圖像，標(biāo)題，信息以及通知提示。同時(shí)，我們也可以通過GroupTag屬性對(duì)HubTile進(jìn)行分組，它們的動(dòng)畫效果由下面的事件隨機(jī)觸發(fā)：

Flip animation with PlaneProjection
Translate animation

接下來我們就開始學(xué)習(xí)HubTile，值得注意的是，HubTile的設(shè)計(jì)應(yīng)該滿足Metro UI風(fēng)格的，所以它的默認(rèn)大小硬編碼為173X173，即使你修改它的Height/Width屬性也無法改變它的大小，如果你確實(shí)想改變它的大小的話可以去重新定義它的ControlTemplate樣式。

使用HubTile前請(qǐng)先引用Microsoft.Phone.Controls.Toolkit.dll?到你的項(xiàng)目中來，然后在XAML內(nèi)聲明命名空間：

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

然后，聲明一個(gè)HubTile：

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

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

1	HubTile hubTile = new?HubTile();

2	hubTile.Message = "This is HubTile message!";

3	hubTile.Title = "HubTile Title";

HubTile的幾個(gè)關(guān)鍵屬性有：

Title:設(shè)置或獲取HubTile實(shí)例的標(biāo)題
Message:設(shè)置或獲取HubTile實(shí)例的信息，用小字體展示
Source:ImageSource類型，設(shè)置或獲取HubTile實(shí)例的圖片源
DisplayNotification:布爾值，它確定新提示的布爾標(biāo)識(shí)
Notification:設(shè)置或獲取提示的內(nèi)容，用大字體展示
IsFrozen:布爾值，設(shè)置或獲取那些沒有處于Animated的圖像的布爾標(biāo)識(shí)
GroupTag:設(shè)置或獲取HubTile組的group tag。當(dāng)你添加了多個(gè)HubTile，這時(shí)你可以把它們歸為一組，如下面的代碼：

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

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

這時(shí)我們可以通過后臺(tái)代碼同時(shí)Freeze或者Unfreeze一個(gè)HubTile組：

1	HubTileService.FreezeGroup("Cities");

2	HubTileService.UnfreezeGroup("Cities");

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

很容易就能明白這幾個(gè)方法的用處，例如凍結(jié)一個(gè)HubTile，解除凍結(jié)一個(gè)HubTile等等，自己實(shí)踐下就更能體會(huì)到這些方法的用處了。

前面簡單的介紹了HubTile的一些屬性與用法，接下來介紹一下HubTile使用過程中的DataBinding。通過一個(gè)實(shí)例讓大家更加感性地認(rèn)識(shí)HubTile的應(yīng)用，例如在音樂播放應(yīng)用中可以使用HubTile來展示音樂頻道，或者一個(gè)點(diǎn)菜應(yīng)用中使用HubTile來展示菜式等，下面就通過HubTile來實(shí)現(xiàn)一個(gè)點(diǎn)餐應(yīng)用，最終顯示效果如下：

首先定義數(shù)據(jù)項(xiàng)如下：

01	public?class?TileItem

????{

03	????????public?string?Title?

04	????????{?

05	????????????get;

06	????????????set;

07	????????}?????

08	??????????

09	????????public?string?Notification?

????????{

11	????????????get;?

12	????????????set;

????????}

14	??????????

15	????????public?bool?DisplayNotification

16	????????{?

17	????????????get?{ return?!string.IsNullOrEmpty(this.Notification); }

18	????????}??????

19	??????????

20	????????public?string?Message

????????{

22	????????????get;?

23	????????????set;?

????????}

26	????????public?string?GroupTag?

????????{

28	????????????get;

29	????????????set;

????????}

????}

接著定義TileItem數(shù)據(jù)集合源如下：

01	void?InitializeItem()

????????{

03	????????????List<TileItem> tileItems = new?List<TileItem>() {

04	????????????????new?TileItem() { ImageUri = "/Images/chicken.jpg", Title = "Chicken", Notification = "$3.49", GroupTag = "TileGroup"?},?

05	????????????????new?TileItem() { ImageUri = "/Images/wings.jpg", Title = "Wings", Notification = "Only $2.49", GroupTag = "TileGroup"?},?

06	????????????????new?TileItem() { ImageUri = "/Images/bonfillet.jpg", Title = "Chicken\nFillet", Message = "A couple of these will not hurt your diet."?},?

07	????????????????new?TileItem() { ImageUri = "/Images/burger.jpg", Title = "Burger", Notification = "$3.99"?},?

08	????????????????new?TileItem() { ImageUri = "/Images/bucket.jpg", Title = "Chicken\nBucket", Notification = "$19.99"?},?

09	????????????????new?TileItem() { ImageUri = "/Images/fries.jpg", Title = "Fries", Notification = "Only $1.99"?},

10	????????????????new?TileItem() { ImageUri = "/Images/caesar.jpg", Title = "Caesar Salad", Notification = "$4.99"?},?

11	????????????????new?TileItem() { ImageUri = "/Images/corn.jpg", Title = "Corn", Notification = "Only $1.99"?}, };?

????????}

?定義好數(shù)據(jù)源，我們將使用一個(gè)ListBox來展示這些HubTile，在XAML文件中定義如下：

01	<ListBox Grid.Row="0"?x:Name="tileList">

02	????????????????<ListBox.ItemsPanel>

03	????????????????<ItemsPanelTemplate>

04	????????????????????<toolkit:WrapPanel Orientation="Horizontal"?/>

05	????????????????</ItemsPanelTemplate>

06	????????????</ListBox.ItemsPanel>

07	????????????<ListBox.ItemTemplate>

08	????????????????<DataTemplate>

09	????????????????????<toolkit:HubTile Title="{Binding Title}"?Margin="3"??

10	?????????????????????????????????????Notification="{Binding Notification}"?

11	?????????????????????????????????????DisplayNotification="{Binding DisplayNotification}"????

12	?????????????????????????????????????Message="{Binding Message}"?

13	?????????????????????????????????????GroupTag="{Binding GroupTag}"??

14	?????????????????????????????????????Source="{Binding ImageUri}">

15	??????????????????????????

16	????????????????????</toolkit:HubTile>

17	????????????????</DataTemplate>

18	????????????</ListBox.ItemTemplate>

19	????????????</ListBox>

完成上面的工作后，編譯運(yùn)行就看到HubTile展示數(shù)據(jù)的效果，注意每個(gè)HubTile顯示時(shí)的動(dòng)畫都是隨機(jī)，截圖看到的只是某個(gè)時(shí)刻的靜態(tài)效果，讀者親自去編碼時(shí)就能體會(huì)到它的美妙之處，另外，如果單是數(shù)據(jù)顯示而沒有邏輯處理用處也不是很大，所以我們?nèi)绻虢oHubTile添加點(diǎn)擊事件處理，可以通過下面的方式注冊(cè)Tap(或者DoubleTap)事件：

01	public?MainPage()

{

03	????InitializeComponent();

???

05	????this.hubTile.Tap += new?EventHandler<System.Windows.Input.GestureEventArgs>(hubTile_Tap);

}

???

08	void?hubTile_Tap(object?sender, System.Windows.Input.GestureEventArgs e)

{

10	????MessageBox.Show("Hub tile 1 was tapped");

}

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

1	void?hubTile_Tap(object?sender, System.Windows.Input.GestureEventArgs e)

????????{

3	????????????//這里可以進(jìn)行事件響應(yīng)等，還可以進(jìn)行判斷動(dòng)態(tài)地改變HubTile的IsFrozen狀態(tài)等

4	????????????HubTile hubTile = sender as?HubTile;

5	????????????hubTile.IsFrozen = true;

6	????????????//HubTileService.FreezeHubTile(hubTile);?

????????}

至此，對(duì)HubTile的介紹暫告段落，更多內(nèi)容將再介紹。

原文出處。

2011-10-19 updated

上面提到HubTile的Visual?State都是隨機(jī)進(jìn)行展示的，所以當(dāng)IsFrozen沒有設(shè)置為True時(shí)每隔一段時(shí)間HubTile的Visual State就進(jìn)行自動(dòng)切換，這時(shí)如果我們想人工的選擇HubTile的Visual State時(shí)怎么辦呢？這時(shí)，我們可以通過VisualStateManager這個(gè)類的進(jìn)行Visual State的選擇，關(guān)于VisualStateManager?，可以查看MSDN上的介紹了解更多的內(nèi)容，這里只是簡單的用代碼說明一下。

在HubTile的響應(yīng)事件或者其他事件中設(shè)置下面的代碼：