深入学习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内声明命名空间：

`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的几个关键属性有：

Title:设置或获取HubTile实例的标题
Message:设置或获取HubTile实例的信息，用小字体展示
Source:ImageSource类型，设置或获取HubTile实例的图片源
DisplayNotification:布尔值，它确定新提示的布尔标识
Notification:设置或获取提示的内容，用大字体展示
IsFrozen:布尔值，设置或获取那些没有处于Animated的图像的布尔标识
GroupTag:设置或获取HubTile组的group tag。当你添加了多个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提供了以下几种静态方法：

深入学习Windows Phone HubTile的用法 - [WP开发]

很容易就能明白这几个方法的用处，例如冻结一个HubTile，解除冻结一个HubTile等等，自己实践下就更能体会到这些方法的用处了。

前面简单的介绍了HubTile的一些属性与用法，接下来介绍一下HubTile使用过程中的DataBinding。通过一个实例让大家更加感性地认识HubTile的应用，例如在音乐播放应用中可以使用HubTile来展示音乐频道，或者一个点菜应用中使用HubTile来展示菜式等，下面就通过HubTile来实现一个点餐应用，最终显示效果如下：

深入学习Windows Phone HubTile的用法 - [WP开发]

首先定义数据项如下：

01

public class TileItem

02

 {

03

 public string Title 

04

 { 

05

 get;

06

 set;

07

 } 

08
 
09

 public string Notification 

10

 {

11

 get; 

12

 set;

13

 }

14
 
15

 public bool DisplayNotification

16

 { 

17

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

18

 } 

19
 
20

 public string Message

21

 {

22

 get; 

23

 set; 

24

 }

25

26

 public string GroupTag 

27

 {

28

 get;

29

 set;

30

 }

31

 }

接着定义TileItem数据集合源如下：

01

void InitializeItem()

02

 {

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" }, }; 

12

 }

定义好数据源，我们将使用一个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>

完成上面的工作后，编译运行就看到HubTile展示数据的效果，注意每个HubTile显示时的动画都是随机，截图看到的只是某个时刻的静态效果，读者亲自去编码时就能体会到它的美妙之处，另外，如果单是数据显示而没有逻辑处理用处也不是很大，所以我们如果想给HubTile添加点击事件处理，可以通过下面的方式注册Tap(或者DoubleTap)事件：

01

public MainPage()

02
{

03

 InitializeComponent();

04
 
05

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

06
}

07
 
08

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

09
{

10

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

11
}

例如，我们可以通过这些事件去Freeze或者Unfreeze某些HubTile，以满足一些性能上的要求等等：

1

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

2

 {

3

 //这里可以进行事件响应等，还可以进行判断动态地改变HubTile的IsFrozen状态等

4

 HubTile hubTile = sender as HubTile;

5

 hubTile.IsFrozen = true;

6

 //HubTileService.FreezeHubTile(hubTile); 

7

 }

至此，对HubTile的介绍暂告段落，更多内容将再介绍。

原文出处。

2011-10-19 updated

上面提到HubTile的Visual State都是随机进行展示的，所以当IsFrozen没有设置为True时每隔一段时间HubTile的Visual State就进行自动切换，这时如果我们想人工的选择HubTile的Visual State时怎么办呢？这时，我们可以通过VisualStateManager这个类的进行Visual State的选择，关于VisualStateManager ，可以查看MSDN上的介绍了解更多的内容，这里只是简单的用代码说明一下。

在HubTile的响应事件或者其他事件中设置下面的代码：

1

private void btnGoToExpanded_Click(object sender, RoutedEventArgs e) 

2
{ 

3

 VisualStateManager.GoToState(this.hubTile, "Expanded", true); 

4
}

即可将HubTile的Visual State手动设置为Expanded，同理，也可以设置为"Semiexpanded","Flipped","Collapsed"这三种效果。

ellic（包含链接），不得删节，否则保留追究法律责任的权利。

翻译相关

控件

卿之
关注 - 4
粉丝 - 26

+加关注

(请您对文章做出评价)

« 博主前一篇：Windows Phone实例开发：快递查询助手 - [WP开发]

posted @ 2011-10-17 21:50 卿之阅读(220) 评论(10)编辑收藏

深入学习Windows Phone HubTile的用法 - [WP开发]

发表评论

　回复　引用　查看　

#1楼

学习了！

　回复　引用　查看　

#2楼

谢谢分享。。。

　回复　引用　查看　

#3楼

@xinbaby
一起学习~

　回复　引用　查看　

#4楼

@从小就够2
Thx~ :-)

　回复　引用　查看　

#5楼

学习了谢谢分享

　回复　引用　查看　

#6楼

Flip animation with PlaneProjection
Translate animation

深入学习Windows Phone HubTile的用法 - [WP开发]

使用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

HubTile hubTile = new HubTile();

2

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

3

hubTile.Title = "HubTile Title";

HubTile的几个关键属性有：

Title:设置或获取HubTile实例的标题
Message:设置或获取HubTile实例的信息，用小字体展示
Source:ImageSource类型，设置或获取HubTile实例的图片源
DisplayNotification:布尔值，它确定新提示的布尔标识
Notification:设置或获取提示的内容，用大字体展示
IsFrozen:布尔值，设置或获取那些没有处于Animated的图像的布尔标识
GroupTag:设置或获取HubTile组的group tag。当你添加了多个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");`

深入学习Windows Phone HubTile的用法 - [WP开发]

很容易就能明白这几个方法的用处，例如冻结一个HubTile，解除冻结一个HubTile等等，自己实践下就更能体会到这些方法的用处了。

深入学习Windows Phone HubTile的用法 - [WP开发]

首先定义数据项如下：

01

public class TileItem

02

 {

03

 public string Title 

04

 { 

05

 get;

06

 set;

07

 } 

08
 
09

 public string Notification 

10

 {

11

 get; 

12

 set;

13

 }

14
 
15

 public bool DisplayNotification

16

 { 

17

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

18

 } 

19
 
20

 public string Message

21

 {

22

 get; 

23

 set; 

24

 }

25

26

 public string GroupTag 

27

 {

28

 get;

29

 set;

30

 }

31

 }

接着定义TileItem数据集合源如下：

01

void InitializeItem()

02

 {

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" }, }; 

12

 }

定义好数据源，我们将使用一个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>

01

public MainPage()

02
{

03

 InitializeComponent();

04
 
05

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

06
}

07
 
08

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

09
{

10

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

11
}

例如，我们可以通过这些事件去Freeze或者Unfreeze某些HubTile，以满足一些性能上的要求等等：

1

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

2

 {

3

 //这里可以进行事件响应等，还可以进行判断动态地改变HubTile的IsFrozen状态等

4

 HubTile hubTile = sender as HubTile;

5

 hubTile.IsFrozen = true;

6

 //HubTileService.FreezeHubTile(hubTile); 

7

 }

至此，对HubTile的介绍暂告段落，更多内容将再介绍。

原文出处。

2011-10-19 updated

在HubTile的响应事件或者其他事件中设置下面的代码：

1

private void btnGoToExpanded_Click(object sender, RoutedEventArgs e) 

2
{ 

3

 VisualStateManager.GoToState(this.hubTile, "Expanded", true); 

4
}

即可将HubTile的Visual State手动设置为Expanded，同理，也可以设置为"Semiexpanded","Flipped","Collapsed"这三种效果。