在最新的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提供了以下几种静态方法:

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

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

首先定义数据项如下:

 
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"这三种效果。

wp7 HubTile的更多相关文章

  1. wp7 中 HubTile控件自定义大小。

    http://blog.csdn.net/matrixcl/article/details/7057291 (转) Toolkit(http://silverlight.codeplex.com/)中 ...

  2. 首发 手把手教你制作 Windows8 应用程序内部的 hubtile (动态瓷砖控件) MetroStyle(转)

    http://blog.csdn.net/wangrenzhu2011/article/details/8175492 (转) 在metro 风格中 动态磁贴是他的精髓 在wp7 的开发中 我们可以使 ...

  3. Channel 笔记本项目 (门户客户端 和 wp7客户端(介绍1))

    Channel 笔记本项目:(所包含 门户客户端 和 wp7客户端)              首先wp7客户端中,首页向右滑行,到了新闻(博文):(点触某篇新闻后,进入到新闻详细页面,在菜单栏所对应 ...

  4. WP7:模拟开始屏幕Tile漂动效果

    在WP7手机的开始屏幕,如果你Hold住某一个瓷贴,就会发现除了你按住的那个瓷贴其他全部下沉半透明,然后开始在不停地漂来漂去~~今天来模仿一下这个效果.新建一个项目,然后在Grid里放一个ListBo ...

  5. wp7学习笔记

    1.xap:最终是压缩包:最终部署有系统控制,防止流亡软件:放到固有位置productid;有的文件放在.dll中或直接放入目录下:控制有生成操作:content,内容,content效率更高不用从. ...

  6. (转) Wp7 list 中列表项多样化的解决方案-Custom DataTemplateSelector

    本文转自: http://www.cnblogs.com/sonyye/archive/2012/03/03/2378825.html 在这篇文章中,我将解释如何在Windows Phone 7中创建 ...

  7. WP7 手机软件纪念 - 稍后读软件

    在本月换机之际,决定写篇博客纪念一下我在 WP7 手机上开发的一个稍后读软件.这个工具开发完成后,两年间,我的 WP7 手机 80% 的用途,都发挥在了它身上. 这个软件其实是一个离线阅读工具,非常类 ...

  8. WP7开发 Sqlite数据库的使用 解决Unable open the database

    WP7本身不支持Sqlite数据库,但我们可以添加第三方组件让它支持Sqlite. 首先在项目中添加引用Community.CsharpSqlite.WP.dll,我会放后面让大家下载,我下了有几天了 ...

  9. WP7/WP8/WP8.1设置存储的区别

    最近做的一个软件,由于最初是针对WP7的,现在在只能创建WP8.1的visual studio 2013上转换为了WP8的. 由于要保存字体大小.背景颜色.JSON三个数据,一直使用的是WP7下的存储 ...

随机推荐

  1. 删除右键ATI CATALYST(R) Control Center的方法

    http://share.weiyun.com/c47530d3e44ea15b606d4ba6f1b00a28

  2. function foo(){}、(function(){})、(function(){}())等函数区别分析

    前面一段时间,看到(function(){}),(function(){}())这些函数就犯晕,不知道它到底是什么意思,为什么函数外要加小括号,函数后要加小括号,加和不加到底有什么区别……一直犯迷糊, ...

  3. 对比WDCP面板与AMH面板的区别与选择

    转载: http://www.laozuo.org/2760.html | 老左博客 随着VPS主机的性价比提高(其实就是降价)我们很多站长会越来越多的选择使用VPS搭建网站或者运营一些项目,相比较而 ...

  4. RPM常用组合【转载】

    RPM常用组合 -ivh:安装显示安装进度--install--verbose--hash -Uvh:升级软件包--Update: -qpl:列出RPM软件包内的文件信息[Query Package ...

  5. 14.python笔记之paramiko

    作者:刘耀 博客:www.liuyao.me 博客园:www.cnblogs.com/liu-yao 转载请注明 一,介绍 1.使用paramiko可以很好的解决以上问题,比起前面的方法,它仅需要在本 ...

  6. java代码获取jdbc链接properties

    public static String getDirPath() { Resource resource = null; Properties props = null; String driver ...

  7. Mysql sql查询性能侦查

    Mysql 服务性能优化配置:http://5434718.blog.51cto.com/5424718/1207526[该文章很好] Sql查询性能优化 对Sql进行优化,肯定是该Sql运行未能达到 ...

  8. javascript中json解密

    一直以前都会断断续续会碰到js中的json数据的解析,下面凭着自己的经验,简单的讲解一下在js中的json的几种解析方法.  一.jquery的方式 首先你得先得到数据,一般都是jquery的ajax ...

  9. .pro配置选项

    在Qt Creator的项目中添加头文件和库   在Qt Creator中的工程中,工程通过.pro文件管理. 额外需要连接的连接库 unix:LIBS += -L your_lib_path -ly ...

  10. redis的单实例配置+web链接redis

    [root@cache01 src]# wget http://download.redis.io/redis-stable.tar.gz [root@cache01 src]# tar -xzvf ...