转自:http://www.cnblogs.com/wpdev/archive/2011/10/17/windows-phone-hubtile.html
在最新的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内声明命名空间:
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
2
3
|
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,这时你可以把它们归为一组,如下面的代码:
1
2
|
<toolkit:HubTile Title=
"London"
GroupTag=
"Cities"
/>
<toolkit:HubTile Title=
"NewYork"
GroupTag=
"Cities"
/>
|
这时我们可以通过后台代码同时Freeze或者Unfreeze一个HubTile组:
1
2
|
HubTileService.FreezeGroup(
"Cities"
);
HubTileService.UnfreezeGroup(
"Cities"
);
|
上面介绍了HubTile的基本属性,接下来介绍一个很重要的HubTileService,通过HubTileService,你可以控制这些HubTiles的动画,HubTileService提供了以下几种静态方法:
很容易就能明白这几个方法的用处,例如冻结一个HubTile,解除冻结一个HubTile等等,自己实践下就更能体会到这些方法的用处了。
前面简单的介绍了HubTile的一些属性与用法,接下来介绍一下HubTile使用过程中的DataBinding。通过一个实例让大家更加感性地认识HubTile的应用,例如在音乐播放应用中可以使用HubTile来展示音乐频道,或者一个点菜应用中使用HubTile来展示菜式等,下面就通过HubTile来实现一个点餐应用,最终显示效果如下:
首先定义数据项如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
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数据集合源如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
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文件中定义如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<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)事件:
1
2
3
4
5
6
7
8
9
10
11
|
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,以满足一些性能上的要求等等:
1
2
3
4
5
6
7
|
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的响应事件或者其他事件中设置下面的代码:
1
2
3
4
|
private
void
btnGoToExpanded_Click(
object
sender, RoutedEventArgs e)
{
VisualStateManager.GoToState(
this
.hubTile,
"Expanded"
,
true
);
}
|
即可将HubTile的Visual State手动设置为Expanded,同理,也可以设置为"Semiexpanded","Flipped","Collapsed"这三种效果。