在最新的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"这三种效果。

转载于:https://www.cnblogs.com/CharlesGrant/p/3639259.html

wp7 HubTile相关推荐

  1. Windows Phone 7(WP7)开发 自订磁贴(深度链接)

    用过Wp7手机的同学应该都对内置的Office印象深刻,每一个文档的图标长按会出现一个菜单,能够"固定到开始屏幕",固定到开始屏幕的那个图标,点击之后,会直接打开该文档内容. 又如 ...

  2. Windows8/Silverlight/WPF/WP7周学习导读(11月12日-11月18日)

    Windows8/Silverlight/WPF/WP7/HTML5周学习导读(11月12日-11月18日) 本周Windows 8开发学习资源更新 快速构建Windows 8风格应用25-数据绑定 ...

  3. 豆瓣电台 for WP7 客户端开源

    前一阶段有空开发了个WP7的豆瓣电台应用,最近因为家里的种种琐事没有空继续完善.这些天看到信息中心有几条索要源码的留言,为了大家一起来学习WP7,现在我将这个项目开源出来. 这里大家可以学习到: 1. ...

  4. Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月23日-7月29日)

    Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月23日-7月29日) 本周Silverlight学习资源更新 Silverlight OOB模式下COOKIE处理 ...

  5. wp7上MD5加密类

    很好的工具类 ,本身wp7 sdk没有自带加密类 using System; using System.Net; using System.Text; using System.Windows; us ...

  6. Silverlight/Windows8/WPF/WP7/HTML5周学习导读(6月25日-7月1日)

    Silverlight/Windows8/WPF/WP7/HTML5周学习导读(6月25日-7月1日) 本周Silverlight学习资源更新 用Silverlight做淘宝应用 往事如锋 基于 Si ...

  7. wp7 手机归属地查询

    ps:之前一直看卤面网,看博客园里强人关于wp7开发介绍等也快大半个月了,不得不说实践是检验真理的唯一标准,还得自己动手做,这个是我做的第一个wp7小程序:手机归属地查询.不废话,先上图: 此应用拥有 ...

  8. WP7基础---补充

    可能用到的资源:(注意性能的测试) (注:在WP7下,对于页面跳转的特效,只有自己实验一下,才觉得不错!很零散!现在只知道简单的使用,对于性能没有概念! 还有对于Canvas容器的图片层叠效果,还有圆 ...

  9. 在WP7下自定义RelativeSource 的Binding

    最近老没有时间上来写博文.今天有空来写写上次还没有说完的话题.上一篇提到说说我在WP7应用开发中遇到的 子控件 DataTemplete 中的按钮的命令绑定,刚开始接触似乎是个头疼的问题.那怎么解决呢 ...

最新文章

  1. c++ 遍历list_数据结构之图的遍历,一篇文章get全部考点
  2. gateway sentinel 熔断 不起作用_《一起学sentinel》一
  3. ssm 退出登录 java_【Java】ssm Dao层无返回 函数始终不退出
  4. 2021年1月19日工作日志 - Cypress regression tests build error
  5. UVA-11988 悲剧文本-静态链表
  6. BZOJ2801/洛谷P3544 [POI2012]BEZ-Minimalist Security(题目性质发掘+图的遍历+解不等式组)...
  7. trucksim安装教程
  8. 云信duilib之菜单
  9. 数据可视化--实验四:地理数据可视化
  10. 小程序进入首页时弹出广告
  11. 第四单元 用python学习微积分(二十八)参数方程、弧长和表面积
  12. 怎样防止表单重复提交
  13. IDEA的maven的package打包
  14. K-Means(K-均值)聚类算法
  15. Unity UGUI基础 之 Scroll View/Scroll Rect 的简单使用,并取消拖拽(滑动内容)效果,拖拽只在Scrollbar 上起作用
  16. bugku 细心的大象
  17. Jenkins Pipelin扩展
  18. Spring Bean实例化过程,怎么解决循环依赖
  19. open3d完成点云ICP配准
  20. TiDB 重要监控指标详解

热门文章

  1. python中pyecharts模块全局配置_python中pyecharts模块的使用示例
  2. python创建子类_Python线程创建子类?
  3. mac mysql ip访问不了_解决mysql中只能通过localhost访问不能通过ip访问的问题
  4. 30 个 Redis 基础知识
  5. Spring RSocket:基于服务注册发现的 RSocket 负载均衡
  6. java win7 jdk_WIN7下配置JDK并运行JAVA的过程
  7. angularjs 元素重复指定次数_5.2 设置循环次数:for +range 句式
  8. 消除类游戏ccf c语言,ccf试题 消除类游戏
  9. mac安装软件管理Android手机,Mac如何管理Android手机:这方式很得体
  10. 热电偶校验仪_热电偶校验方法_电厂系列之热控仪表装置校验讲解