wp7 HubTile
在最新的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相关推荐
- Windows Phone 7(WP7)开发 自订磁贴(深度链接)
用过Wp7手机的同学应该都对内置的Office印象深刻,每一个文档的图标长按会出现一个菜单,能够"固定到开始屏幕",固定到开始屏幕的那个图标,点击之后,会直接打开该文档内容. 又如 ...
- Windows8/Silverlight/WPF/WP7周学习导读(11月12日-11月18日)
Windows8/Silverlight/WPF/WP7/HTML5周学习导读(11月12日-11月18日) 本周Windows 8开发学习资源更新 快速构建Windows 8风格应用25-数据绑定 ...
- 豆瓣电台 for WP7 客户端开源
前一阶段有空开发了个WP7的豆瓣电台应用,最近因为家里的种种琐事没有空继续完善.这些天看到信息中心有几条索要源码的留言,为了大家一起来学习WP7,现在我将这个项目开源出来. 这里大家可以学习到: 1. ...
- Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月23日-7月29日)
Silverlight/Windows8/WPF/WP7/HTML5周学习导读(7月23日-7月29日) 本周Silverlight学习资源更新 Silverlight OOB模式下COOKIE处理 ...
- wp7上MD5加密类
很好的工具类 ,本身wp7 sdk没有自带加密类 using System; using System.Net; using System.Text; using System.Windows; us ...
- Silverlight/Windows8/WPF/WP7/HTML5周学习导读(6月25日-7月1日)
Silverlight/Windows8/WPF/WP7/HTML5周学习导读(6月25日-7月1日) 本周Silverlight学习资源更新 用Silverlight做淘宝应用 往事如锋 基于 Si ...
- wp7 手机归属地查询
ps:之前一直看卤面网,看博客园里强人关于wp7开发介绍等也快大半个月了,不得不说实践是检验真理的唯一标准,还得自己动手做,这个是我做的第一个wp7小程序:手机归属地查询.不废话,先上图: 此应用拥有 ...
- WP7基础---补充
可能用到的资源:(注意性能的测试) (注:在WP7下,对于页面跳转的特效,只有自己实验一下,才觉得不错!很零散!现在只知道简单的使用,对于性能没有概念! 还有对于Canvas容器的图片层叠效果,还有圆 ...
- 在WP7下自定义RelativeSource 的Binding
最近老没有时间上来写博文.今天有空来写写上次还没有说完的话题.上一篇提到说说我在WP7应用开发中遇到的 子控件 DataTemplete 中的按钮的命令绑定,刚开始接触似乎是个头疼的问题.那怎么解决呢 ...
最新文章
- c++ 遍历list_数据结构之图的遍历,一篇文章get全部考点
- gateway sentinel 熔断 不起作用_《一起学sentinel》一
- ssm 退出登录 java_【Java】ssm Dao层无返回 函数始终不退出
- 2021年1月19日工作日志 - Cypress regression tests build error
- UVA-11988 悲剧文本-静态链表
- BZOJ2801/洛谷P3544 [POI2012]BEZ-Minimalist Security(题目性质发掘+图的遍历+解不等式组)...
- trucksim安装教程
- 云信duilib之菜单
- 数据可视化--实验四:地理数据可视化
- 小程序进入首页时弹出广告
- 第四单元 用python学习微积分(二十八)参数方程、弧长和表面积
- 怎样防止表单重复提交
- IDEA的maven的package打包
- K-Means(K-均值)聚类算法
- Unity UGUI基础 之 Scroll View/Scroll Rect 的简单使用,并取消拖拽(滑动内容)效果,拖拽只在Scrollbar 上起作用
- bugku 细心的大象
- Jenkins Pipelin扩展
- Spring Bean实例化过程,怎么解决循环依赖
- open3d完成点云ICP配准
- TiDB 重要监控指标详解
热门文章
- python中pyecharts模块全局配置_python中pyecharts模块的使用示例
- python创建子类_Python线程创建子类?
- mac mysql ip访问不了_解决mysql中只能通过localhost访问不能通过ip访问的问题
- 30 个 Redis 基础知识
- Spring RSocket:基于服务注册发现的 RSocket 负载均衡
- java win7 jdk_WIN7下配置JDK并运行JAVA的过程
- angularjs 元素重复指定次数_5.2 设置循环次数:for +range 句式
- 消除类游戏ccf c语言,ccf试题 消除类游戏
- mac安装软件管理Android手机,Mac如何管理Android手机:这方式很得体
- 热电偶校验仪_热电偶校验方法_电厂系列之热控仪表装置校验讲解