在最新的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来实现一个点餐应用,最终显示效果如下:
首先定义数据项如下:
09 |
public string Notification |
15 |
public bool DisplayNotification |
17 |
get { return ! string .IsNullOrEmpty( this .Notification); } |
26 |
public string GroupTag |
接着定义TileItem数据集合源如下:
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" }, }; |
定义好数据源,我们将使用一个ListBox来展示这些HubTile,在XAML文件中定义如下:
01 |
<ListBox Grid.Row= "0" x:Name= "tileList" > |
04 |
<toolkit:WrapPanel Orientation= "Horizontal" /> |
07 |
<ListBox.ItemTemplate> |
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}" > |
18 |
</ListBox.ItemTemplate> |
完成上面的工作后,编译运行就看到HubTile展示数据的效果,注意每个HubTile显示时的动画都是随机,截图看到的只是某个时刻的静态效果,读者亲自去编码时就能体会到它的美妙之处,另外,如果单是数据显示而没有逻辑处理用处也不是很大,所以我们如果想给HubTile添加点击事件处理,可以通过下面的方式注册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 |
//这里可以进行事件响应等,还可以进行判断动态地改变HubTile的IsFrozen状态等 |
4 |
HubTile hubTile = sender as HubTile; |
5 |
hubTile.IsFrozen = true ; |
6 |
//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 |
private void btnGoToExpanded_Click( object sender, RoutedEventArgs e) |
3 |
VisualStateManager.GoToState( this .hubTile, "Expanded" , true ); |
即可将HubTile的Visual State手动设置为Expanded,同理,也可以设置为"Semiexpanded","Flipped","Collapsed"这三种效果。
- wp7 中 HubTile控件自定义大小。
http://blog.csdn.net/matrixcl/article/details/7057291 (转) Toolkit(http://silverlight.codeplex.com/)中 ...
- 首发 手把手教你制作 Windows8 应用程序内部的 hubtile (动态瓷砖控件) MetroStyle(转)
http://blog.csdn.net/wangrenzhu2011/article/details/8175492 (转) 在metro 风格中 动态磁贴是他的精髓 在wp7 的开发中 我们可以使 ...
- Channel 笔记本项目 (门户客户端 和 wp7客户端(介绍1))
Channel 笔记本项目:(所包含 门户客户端 和 wp7客户端) 首先wp7客户端中,首页向右滑行,到了新闻(博文):(点触某篇新闻后,进入到新闻详细页面,在菜单栏所对应 ...
- WP7:模拟开始屏幕Tile漂动效果
在WP7手机的开始屏幕,如果你Hold住某一个瓷贴,就会发现除了你按住的那个瓷贴其他全部下沉半透明,然后开始在不停地漂来漂去~~今天来模仿一下这个效果.新建一个项目,然后在Grid里放一个ListBo ...
- wp7学习笔记
1.xap:最终是压缩包:最终部署有系统控制,防止流亡软件:放到固有位置productid;有的文件放在.dll中或直接放入目录下:控制有生成操作:content,内容,content效率更高不用从. ...
- (转) Wp7 list 中列表项多样化的解决方案-Custom DataTemplateSelector
本文转自: http://www.cnblogs.com/sonyye/archive/2012/03/03/2378825.html 在这篇文章中,我将解释如何在Windows Phone 7中创建 ...
- WP7 手机软件纪念 - 稍后读软件
在本月换机之际,决定写篇博客纪念一下我在 WP7 手机上开发的一个稍后读软件.这个工具开发完成后,两年间,我的 WP7 手机 80% 的用途,都发挥在了它身上. 这个软件其实是一个离线阅读工具,非常类 ...
- WP7开发 Sqlite数据库的使用 解决Unable open the database
WP7本身不支持Sqlite数据库,但我们可以添加第三方组件让它支持Sqlite. 首先在项目中添加引用Community.CsharpSqlite.WP.dll,我会放后面让大家下载,我下了有几天了 ...
- WP7/WP8/WP8.1设置存储的区别
最近做的一个软件,由于最初是针对WP7的,现在在只能创建WP8.1的visual studio 2013上转换为了WP8的. 由于要保存字体大小.背景颜色.JSON三个数据,一直使用的是WP7下的存储 ...
随机推荐
- 阿里云服务器配置 SVN 服务器与生产站点同步
作为linux的门外汉,一直觊觎svn的方便性,在有台aliyun的情况下,一起来搞搞. 1.环境 阿里云 centos5.5 2.安装svn yum -y install subve ...
- CSS clearfix
The problem happens when a floated element is within a container box, that element does not automati ...
- sort如何按指定的列排序
<1>[root@localhost company]# cat test 06d7 145 4192542506e1 ...
- PHP中magic_quotes_gpc动态关闭无效的问题
昨天浏览线上项目,发现了一个问题:部分文本输出中的引号前多了一道反斜杠,比如: 引号内容多了\"反斜杠\" 单从页面展现的结果来看,猜测应该是PHP中的magic_quotes_g ...
- Txx考试(codevs 2894)
2894 Txx考试 时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description Txx是一个成绩很差的人,考 ...
- Android textView点击滚动(跑马灯)效果
布局文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...
- 学习配置vsftp 进行ftp文件的传输
一. FTP 说明 linux 系统下常用的FTP 是vsftp, 即Very Security File Transfer Protocol. 还有一个是proftp(Profession ftp) ...
- redis 认证密码
[root@cache01 ~]# grep "requirepass" /app/server/redis/conf/6379.conf # If the master is p ...
- 消息队列入门(三)JMS标准及实现
>>消息中间件 消息中间件即Message-oriented middleware(MOM),消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流,并基于数据通信来进行分布式系统的集 ...
- js 下拉列表 省 市
js 下拉列表 省 市 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...