生活随笔
收集整理的這篇文章主要介紹了
wp7 HubTile
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在最新的Windows Phone Toolkit中我們可以看到HubTile這個控件，首先先了解下什么是HubTile，簡單來說，就是允許你給你的應(yīng)用程序添加些生動或富有意義的瓦片(Tile)。HubTile可以包含圖像，標(biāo)題，信息以及通知提示。同時，我們也可以通過GroupTag屬性對HubTile進(jìn)行分組，它們的動畫效果由下面的事件隨機(jī)觸發(fā)：
Flip animation with PlaneProjection Translate animation
?
接下來我們就開始學(xué)習(xí)HubTile，值得注意的是，HubTile的設(shè)計應(yīng)該滿足Metro UI風(fēng)格的，所以它的默認(rèn)大小硬編碼為173X173，即使你修改它的Height/Width屬性也無法改變它的大小，如果你確實(shí)想改變它的大小的話可以去重新定義它的ControlTemplate樣式。
?
使用HubTile前請先引用Microsoft.Phone.Controls.Toolkit.dll?到你的項(xiàng)目中來，然后在XAML內(nèi)聲明命名空間：
1 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
然后，聲明一個HubTile：
1 <toolkit:HubTile Title="HubTile Title"?Message="This is HubTile message!"?x:Name="hubTile"/>
或者，你可以通過Code-Behide去添加一個HubTile：
1 HubTile hubTile = new?HubTile();
2 hubTile.Message = "This is HubTile message!";
3 hubTile.Title = "HubTile Title";
HubTile的幾個關(guān)鍵屬性有：
Title :設(shè)置或獲取HubTile實(shí)例的標(biāo)題Message :設(shè)置或獲取HubTile實(shí)例的信息，用小字體展示Source :ImageSource類型，設(shè)置或獲取HubTile實(shí)例的圖片源DisplayNotification :布爾值，它確定新提示的布爾標(biāo)識Notification :設(shè)置或獲取提示的內(nèi)容，用大字體展示IsFrozen :布爾值，設(shè)置或獲取那些沒有處于Animated的圖像的布爾標(biāo)識GroupTag :設(shè)置或獲取HubTile組的group tag。當(dāng)你添加了多個HubTile，這時你可以把它們歸為一組，如下面的代碼：1 <toolkit:HubTile Title="London"?GroupTag="Cities"/>
2 <toolkit:HubTile Title="NewYork"?GroupTag="Cities"/>
這時我們可以通過后臺代碼同時Freeze或者Unfreeze一個HubTile組：
1 HubTileService.FreezeGroup("Cities");
2 HubTileService.UnfreezeGroup("Cities");
?
上面介紹了HubTile的基本屬性，接下來介紹一個很重要的HubTileService ，通過HubTileService，你可以控制這些HubTiles的動畫，HubTileService提供了以下幾種靜態(tài)方法：
很容易就能明白這幾個方法的用處，例如凍結(jié)一個HubTile，解除凍結(jié)一個HubTile等等，自己實(shí)踐下就更能體會到這些方法的用處了。
?
前面簡單的介紹了HubTile的一些屬性與用法，接下來介紹一下HubTile使用過程中的DataBinding。通過一個實(shí)例讓大家更加感性地認(rèn)識HubTile的應(yīng)用，例如在音樂播放應(yīng)用中可以使用HubTile來展示音樂頻道，或者一個點(diǎn)菜應(yīng)用中使用HubTile來展示菜式等，下面就通過HubTile來實(shí)現(xiàn)一個點(diǎn)餐應(yīng)用，最終顯示效果如下：
首先定義數(shù)據(jù)項(xiàng)如下：
03 ????????public?string?Title?
09 ????????public?string?Notification?
15 ????????public?bool?DisplayNotification
17 ????????????get?{ return?!string.IsNullOrEmpty(this.Notification); }
20 ????????public?string?Message
26 ????????public?string?GroupTag?
接著定義TileItem數(shù)據(jù)集合源如下：
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ù)源，我們將使用一個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>
完成上面的工作后，編譯運(yùn)行就看到HubTile展示數(shù)據(jù)的效果，注意每個HubTile顯示時的動畫都是隨機(jī)，截圖看到的只是某個時刻的靜態(tài)效果，讀者親自去編碼時就能體會到它的美妙之處，另外，如果單是數(shù)據(jù)顯示而沒有邏輯處理用處也不是很大，所以我們?nèi)绻虢oHubTile添加點(diǎn)擊事件處理，可以通過下面的方式注冊Tap(或者DoubleTap)事件：
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)行判斷動態(tài)地改變HubTile的IsFrozen狀態(tài)等
4 ????????????HubTile hubTile = sender as?HubTile;
5 ????????????hubTile.IsFrozen = true;
6 ????????????//HubTileService.FreezeHubTile(hubTile);?
至此，對HubTile的介紹暫告段落，更多內(nèi)容將再介紹。
?
原文出處。
?
2011-10-19 updated
上面提到HubTile的Visual?State都是隨機(jī)進(jìn)行展示的，所以當(dāng)IsFrozen沒有設(shè)置為True時每隔一段時間HubTile的Visual State就進(jìn)行自動切換，這時如果我們想人工的選擇HubTile的Visual State時怎么辦呢？這時，我們可以通過VisualStateManager這個類的進(jìn)行Visual State的選擇，關(guān)于VisualStateManager?，可以查看MSDN上的介紹了解更多的內(nèi)容，這里只是簡單的用代碼說明一下。
在HubTile的響應(yīng)事件或者其他事件中設(shè)置下面的代碼：
1 private?void?btnGoToExpanded_Click(object?sender, RoutedEventArgs e)?
3 ???????VisualStateManager.GoToState(this.hubTile, "Expanded", true);?
即可將HubTile的Visual State手動設(shè)置為Expanded，同理，也可以設(shè)置為"Semiexpanded","Flipped","Collapsed"這三種效果。
轉(zhuǎn)載于:https://www.cnblogs.com/CharlesGrant/p/3639259.html
總結(jié)
以上是生活随笔 為你收集整理的wp7 HubTile 的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔 推薦給好友。
