WP8 - Tiles大进化 - 代码天地

Windows Phone 8 – Tiles大进化

与

二篇文篇，介绍了在WP 7.1里可以在Tile里做一些手脚，例如：数量的显示、图示的切换、文字的提示…等相对简单的一些切换，

但对于系统内键或MS Patterns所开发的Tile具有的效果，一般的App均没有办法享受到，但到了WP 8开始，这些Tile的效果我们均

可以来好好学习享受一下了。

撷录中的图示，了解WP8的Tile有不同的尺吋，也加入Template来增加Tile的资讯与独特性。

那么对于这些特性要怎么来实践与应用呢？以下即一一说明。

〉Tile的设计原理：

对于WP8下的Tile定义，其实没有改变，一个应用程序只有一个Default Tile，但可以建立很多个Secondary Tiles。

但是对于Tile的应用，在开发项目里需要考量一些因素：

(1) 支持多种Size，自订适用于App与客户的应用；

(2) 从WP8新的3种Tile Templates选择一种来加入至Default Tile，让应用程序更特别；

(3) 支持多个Secondary Tiles；

(4) 控制每一个Secondary Tiles所对应的Page与处理逻辑；

(5) Tile更新的机制：

=>从不更新，只有一个Default Tile，由Visual Studio所设定的该Icon；

=>程序化更新，透过Scheduled local notification或直接程序更新；

=>程序化更新，透过Cloud Service的Push Notification进行更新；

(6) Marketplace增加排序条件：对App里有包括建立动态Tile的功能，有加分；

上述提到的六点非常值得注意，因为Tile是Windows Phone特有的呈现模式，因此，应用程序本身的设计在如果被用户

钉选至Start Screen时，可有对应的资讯回馈与交互，将会让用户更观注该应用程序增加使用的次数与经验。

〉多样化的尺吋：

WP8在Start Screen里可以对WXGA Resolution每一个Tile有三种不同Size的改变，如下表：

	Flip and Cycle	Iconic
Small	159 x 159 pixels	110 x 110 pixels
Medium	336 x 336 pixels	202 x 202 pixels
Wide	691 x 336 pixels	N/A

如果是WP7.1开发的项目，直接升级或安设备WP8，将会有二种Size：Small、Medium，现在多了Wide的尺吋，

也代表下方介绍的Templates在设定各种Tile的background时，要记得大小的对应。

这些不同的Size将影响用户在Start Screen针对已钉在那的Tiles进行放大缩小，此时实践的Size将会影响用户的体验。

另外，需注意由于WP8开始支持720p与WVGA二种大Size的屏幕，在设计Tiles也要考量到这一段，详细的内容，

可参考。

〉三种新的模式：

WP8支持三种Tile Templates，分别为：Flip、Cycle与Iconic。在使用这些Templates时，需注意：

Templates套用于Default Tile后没有办法再透过程序化的方式更换Template。这也代表如果想要换新Template，

需要更新目前的应用程序，并且重新上架至Dev Center进行验证。至于Secondary Tiles即没有受到此限制。

此处所指的Default Tile是位于WMAppManifest.xml中的Tile Tempalte，如下三种的变换：

‧TemplateFlip：

‧TemplateCycle：

‧TemplateIconic：

那么该选择怎样的Templates呢，例如：图像编辑器就可以透过Cycle呈现图示、即时消息的可以透过Iconic…等，

详细可参考。

接下来便针对三个Templates的使用方式与特性加以说明。

(a) Flip template：

透过下图一览便知Flip template的呈现效果；

透过上图可得知，该Flip Tile Template只有在Medium与Wide二种Size会有效果，在Small下则没有。

其设定的属性与过去操作ShellTile非常接近，主要增加了：WideBackgroundImage、WideBackContent、

WideBackBackgroundImage与SmallBackgroundImage四个新属性。对于想要设计Tile的backgroundImage与

Tile Image时，更详细可参考比例图。

设定的方式分成二种：

(a-0). 如果Default Tile要支持宽版的Size，请先至WMAppManifest.xml定义支持宽版；

G00

(a-1). 透过XML定义调整Flip Tile的模式；(此方式与过去Push Notification要求Tile更新的模式一致)

1:

2:

3:

4:

5:

   6:     
 
 
  
  [small Tile size URI]

   7:     
 
 
  
  [front of wide Tile size URI]

   8:     
 
 
  
  [back of wide Tile size URI]

   9:     
 
 
  
  [back of wide Tile size content]

  10:     
 
 
  
  [front of medium Tile size URI]

  11:     
 
 
  
  [count]

  12:     
 
 
  
  [title]

  13:     
 
 
  
  [back of medium Tile size URI]

  14:     
 
 
  
  [back of Tile title]

  15:     
 
 
  
  [back of medium Tile size content]

16:

17:

(a-2). 透过程序的方式更新Flip Tile的模式；

   1: private void btnFlipTile_Click(object sender, RoutedEventArgs e)

   2: {

   3:     FlipTileData tFlip = new FlipTileData()

   4:     {

   5:         Title = "FlipTile测试 - 正",

   6:         BackTitle = "FlipTile测试 - 反",

   7:         WideBackContent = "来玩玩看Wide版的Background Content",

   8:         Count = 10,

   9:         SmallBackgroundImage = new Uri("/Assets/My/FlipTiles/FlipCycleTileSmall.png", UriKind.Relative),

  10:         BackgroundImage = new Uri("/Assets/My/FlipTiles/FlipCycleTileMedium.png", UriKind.Relative),

  11:         //BackBackgroundImage=new Uri(""),

  12:         WideBackgroundImage=new Uri("/Assets/My/FlipTiles/FlipCycleTileLarge", UriKind.Relative)

  13:         //WideBackBackgroundImage=new Uri("")

  14:     };

  15:     // 利用更新的方式,要注意default tile tileplate，如果不是相同的会有Exception

  16:     //ShellTile tDefaultTile = ShellTile.ActiveTiles.FirstOrDefault();

  17:     //tDefaultTile.Update(tFlip);

18:

  19:     // 建立一个新的Tile，并且设定支持宽版(最后一个参数)

  20:    ShellTile.Create(new Uri("/MainPage.xaml?Tileborder-top-style: none; overflow: visible; font-size: 8pt; border-left-style: none; font-family: 'Courier New', courier, monospace; border-bottom-style: none; color: black; padding-bottom: 0px; direction: ltr; text-align: left; padding-top: 0px; border-right-style: none; padding-left: 0px; margin: 0em; line-height: 12pt; padding-right: 0px; width: 100%; background-color: white">
  21: }

(b) Cycle Tile template：

该Template主要提供1~9张图示以轮播的方式，让Tile呈现特定时间有图像切换的效果。该效果最熟悉的例子为：Photos。

如下图所示：

透过上图可以得知，只有在Medium、Wide二种Size才有Cycle templates的效果，在Small这个Size下只有一个固定的图示；

上图介绍Cycle tile template可调整的属性，SmallBackgroundImage是固定的图，主要1~9张图呈现的部分来自CycleImages属性，

这些变动的资讯借由CycleTileData编辑要更新的Tile。更详细的可参考。

对于Cycle tile template的操作一样分成二种：

(b-0). 如果是Default Tile即是Cycle Tile Template的话，可至WMAppManifest.xml设定；

(b-1). 透过XML调整Cycle tile template的模式：

1:

2:

3:

4:

   5:     
 
 
  
  [small Tile size URI]

6:

   7:     
 
 
  
  [photo 1 URI]

   8:     
 
 
  
  [photo 2 URI]

   9:     
 
 
  
  [photo 3 URI]

  10:     
 
 
  
  [photo 4 URI]

  11:     
 
 
  
  [photo 5 URI]

  12:     
 
 
  
  [photo 6 URI]

  13:     
 
 
  
  [photo 7 URI]

  14:     
 
 
  
  [photo 8 URI]

  15:     
 
 
  
  [photo 9 URI]

16:

  17:     
 
 
  
  [count]

  18:     
 
 
  
  [title]

19:

20:

(b-2). 透过程序调整Cycle tile template的模式：

   1: private void btnCycleTile_Click(object sender, RoutedEventArgs e)

   2: {

   3:     CycleTileData tCycle = new CycleTileData()

   4:     {

   5:         SmallBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative),

   6:         Count = 3,

   7:         Title = "Cycle tile测试",

   8:         CycleImages = new Uri[]

   9:         {

  10:             new Uri("/Assets/My/CycleTiles/01.jpg", UriKind.Relative),

  11:             new Uri("/Assets/My/CycleTiles/02.jpg", UriKind.Relative),

  12:             new Uri("/Assets/My/CycleTiles/03.jpg", UriKind.Relative),

  13:             new Uri("/Assets/My/CycleTiles/04.jpg", UriKind.Relative),

  14:             new Uri("/Assets/My/CycleTiles/05.jpg", UriKind.Relative),

  15:             new Uri("/Assets/My/CycleTiles/06.jpg", UriKind.Relative),

  16:             new Uri("/Assets/My/CycleTiles/07.jpg", UriKind.Relative),

  17:             new Uri("/Assets/My/CycleTiles/08.jpg", UriKind.Relative),

  18:             new Uri("/Assets/My/CycleTiles/09.jpg", UriKind.Relative)

  19:         }

  20:     };

21:

  22:     // 利用更新的方式,要注意default tile tileplate，如果不是相同的会有Exception

  23:     //ShellTile tDefaultTile = ShellTile.ActiveTiles.FirstOrDefault();

  24:     //tDefaultTile.Update(tCycle);

25:

  26:     // 建立一个新的Tile，并且设定支持宽版(最后一个参数)

  27:     ShellTile.Create(new Uri("/MainPage.xaml?Tilecolor: #0000ff">true);

  28: }

(c) Iconic Tile template：

这个Tile template模式，主要呈现一个small image在Tile中间，旁边出现指定的数字，配合不同的Size可带入Title与Content的说明；

这样的呈现方式，在WP 7.1就像是电话、消息这种官方的App才有办法实现。现在这样的Template也开放出来了，透过下图来加以了解；

上图说明了Iconic Tile可被设定的属性与对应的参数内容。对于详细的内容可参考。

要特别注意Iconic Tile使用图示的Size，请看：SmallIconImage、IconImage，它跟File Tile或Cycle Tile不同于Iconic Tile仅需指定Iconic图示大小；

另外，采用的是BackgroundColor非Image，采用ARGB格式，例如：#FF524742，这二点是需要注意的。这些变动可透过IconicTileData进行调整。

(c-0). 透过WMAppManifest.xml设定Default Tile的模式：

(此处设定的是Iconic Size)

(c-1). 透过XML修改Iconic Tile Template模式：

1:

2:

3:

   4:     
 
 
  
  [small Tile size URI]

   5:     
 
 
  
  [medium/wide Tile size URI]

   6:     
 
 
  
  [1st row of content]

   7:     
 
 
  
  [2nd row of content]

   8:     
 
 
  
  [3rd row of content]

   9:     
 
 
  
  [count]

  10:     
 
 
  
  [title]

  11:     
 
 
  
  [hex ARGB format color]

12:

13:

(c-2). 透过程序调整Iconic Tile Template模式：

   1: private void btnIConicTile_Click(object sender, RoutedEventArgs e)

   2: {

   3:    IconicTileData tIconic = new IconicTileData

   4:    {

   5:        Count = 30,

   6:        Title = "Iconic Tile Test...",

   7:        WideContent1 = "第一段要呈现的内容；",

   8:        WideContent2 = "练习Iconic Tile Templated的设定",

   9:        WideContent3 = "最后一段了，再打比较长一点的内容看看会不会换行吧",

  10:        BackgroundColor = new System.Windows.Media.Color { A = 255, R = 0, G = 148, B = 255 },

  11:        IconImage = new Uri("/Assets/Tiles/IconicTileMediumLarge.png", UriKind.Relative),

  12:        SmallIconImage = new Uri("/Assets/Tiles/IconicTileSmall.png", UriKind.Relative)

  13:    };

  14:    // 利用更新的方式,要注意default tile tileplate，如果不是相同的会有Exception

  15:    //ShellTile tDefaultTile = ShellTile.ActiveTiles.FirstOrDefault();

  16:    //tDefaultTile.Update(tIconic);

17:

  18:    // 建立一个新的Tile，并且设定支持宽版(最后一个参数)

  19:    ShellTile.Create(new Uri("/MainPage.xaml?Tilecolor: #0000ff">true);

  20: }

[范例程序]

针对上述介绍三个Tile Template所撰写的范例程序，可至下方的连结进行下载；

以下是执行画面：(范例中使用的图示，版权非所有)

G01 由左至右下：FlipTile、Default Tile、Cycle Tile与Iconic Tile。

======

以上是介绍在WP8新增加的Tile Templates，不过对于有些开发者可能会问说，为什么像People该app那种9个格式

不断切换的Template怎么没有办法使用。我个人的怀疑是觉得WMAppManifest.xml应该有提供定义的功能，至于

SDK的部分可能就要等未来提供才有机会了。希望对Tile Templates的介绍有助于大家操作。

References：

‧Tiles and notifications for Windows Phone (重要)

‧Windows Phone 8 – More Than An App (WOWZAPP 2012) (重要,有范例)

‧Windows Phone XAML: Create Custom Live Tiles (inside app)

‧Manage LiveTiles on 7.1 AND 8.0

‧Windows Phone API reference (WP8 only)

‧It’s a Wrap on Windows Phone at BUILD 2012 - Windows Phone Devleoper Blog

‧Adding Windows Phone 8 Tile functionality to Windows Phone OS 7.1 apps

‧Flip Tile template for Windows Phone 8

‧Cycle Tile template for Windows Phone 8

‧Iconic Tile template for Windows Phone 8

‧WP8小讲堂 - 新版 Flip, Cycle, Iconic 动态砖 (影片)

Dotblogs Tags: Windows Phone

原文:大专栏 WP8 - Tiles大进化

WP8 - Tiles大进化

猜你喜欢