原文:

与众不同 windows phone (36) - 8.0 新的瓷贴: FlipTile, CycleTile, IconicTile

作者：

介绍

与众不同 windows phone 8.0 之 新的瓷贴

• FlipTileData - 翻转瓷贴。继承了 wp7 时代的 StandardTileData
• CycleTileData - 循环瓷贴
• IconicTileData - 图标瓷贴

示例

1、演示 FlipTileData 的应用

Tile/FlipTile.xaml

Tile/FlipTile.xaml.cs

/* * FlipTileData - 翻转瓷贴。继承了 wp7 时代的 StandardTileData *     Title - 正面标题 *     SmallBackgroundImage - 小图块正面背景 *     BackgroundImage - 中图块正面背景 *     WideBackgroundImage - 宽图块正面背景 *     Count - 正面显示的 badge （徽章），范围 1 - 99 *     BackTitle - 背面标题 *     BackBackgroundImage - 中图块背面背景 *     WideBackBackgroundImage - 宽图块背面背景 *     BackContent - 中图块背面内容 *     WideBackContent - 宽图块背面内容 *      * 小图块大小：159 × 159 * 中图块大小：336 × 336 * 宽图块大小：691 × 336 *  * 另：application icon 的大小是 100 × 100 *  * 关于 Tile 的更多内容参见： * http://www.cnblogs.com/webabcd/archive/2012/06/27/2564975.html * http://www.cnblogs.com/webabcd/archive/2012/07/05/2577190.html */using System;using System.Windows;using Microsoft.Phone.Controls;using Microsoft.Phone.Shell;namespace Demo.Tile{    public partial class FlipTile : PhoneApplicationPage    {        public FlipTile()        {            InitializeComponent();        }        private void btnPin_Click(object sender, RoutedEventArgs e)        {            FlipTileData flipTile = new FlipTileData()            {                Title = "title",                BackTitle = "backTitle",                BackContent = "backContent",                WideBackContent = "wideBackContent",                Count = 10,                SmallBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),                BackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),                WideBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),                BackBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),                WideBackBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),            };            // 最后一个参数为是否支持宽图块            ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), flipTile, true);        }    }}/*通过 xml 方式构造 flip tile 数据
        
          
             
          
           [small Tile size URI]
              
          
           [front of wide Tile size URI]
              
          
           [back of wide Tile size URI]
              
          
           [back of wide Tile size content]
              
          
           [front of medium Tile size URI]
              
          
           [count]
              
          
           [title]
              
          
           [back of medium Tile size URI]
              
          
           [back of Tile title]
              
          
           [back of medium Tile size content]
            
         
        */

2、演示 CycleTile 的应用

Tile/CycleTile.xaml

Tile/CycleTile.xaml.cs

/* * CycleTileData - 循环瓷贴 *     Title - 标题 *     smallBackgroundImage - 小图块背景 *     Count - badge （徽章），范围 1 - 99 *     CycleImages - 中图块和宽图块所循环显示的背景图片的集合（最多 9 张图片） *      * 小图块大小：159 × 159 * 中图块大小：336 × 336 * 宽图块大小：691 × 336 *  * 另：application icon 的大小是 100 × 100 *  * 关于 Tile 的更多内容参见： * http://www.cnblogs.com/webabcd/archive/2012/06/27/2564975.html * http://www.cnblogs.com/webabcd/archive/2012/07/05/2577190.html */using System;using System.Windows;using Microsoft.Phone.Controls;using Microsoft.Phone.Shell;namespace Demo.Tile{    public partial class CycleTile : PhoneApplicationPage    {        public CycleTile()        {            InitializeComponent();        }        private void btnPin_Click(object sender, RoutedEventArgs e)        {            CycleTileData cycleTile = new CycleTileData()            {                Title = "title",                Count = 20,                SmallBackgroundImage = new Uri("/Assets/AppTile.png", UriKind.Relative),                CycleImages = new Uri[]                {                    new Uri("/Assets/AppTile.png", UriKind.Relative),                     new Uri("/Assets/AppTile.png", UriKind.Relative),                     new Uri("/Assets/AppTile.png", UriKind.Relative),                     new Uri("/Assets/AppTile.png", UriKind.Relative),                     new Uri("/Assets/AppTile.png", UriKind.Relative),                     new Uri("/Assets/AppTile.png", UriKind.Relative),                     new Uri("/Assets/AppTile.png", UriKind.Relative)                }            };            // 最后一个参数为是否支持宽图块            ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), cycleTile, true);        }    }}/*通过 xml 方式构造 cycle tile 数据
        
          
             
          
           [small Tile size URI]
              
          
           [photo 1 URI]
              
          
           [photo 2 URI]
              
          
           [photo 3 URI]
              
          
           [photo 4 URI]
              
          
           [photo 5 URI]
              
          
           [photo 6 URI]
              
          
           [photo 7 URI]
              
          
           [photo 8 URI]
              
          
           [photo 9 URI]
              
          
           [count]
              
          
           [title]
            
         
        */

3、演示 IconicTile 的应用

Tile/IconicTile.xaml

Tile/IconicTile.xaml.cs

/* * IconicTileData - 图标瓷贴 *     Title - 标题 *     Count - badge （徽章），范围 1 - 99 *     SmallIconImage - 小图块和大图块的图标部分 *     IconImage - 中图块的图标部分 *     WideContent1 - 宽图块的第一行的文本 *     WideContent2 - 宽图块的第二行的文本 *     WideContent3 - 宽图块的第三行的文本 *     BackgroundColor - 图块的背景颜色，默认为主题色 *         注：如果需要指定背景色，其 alpha 必须是 255，否则无效 *  * 注：对于图标来说只有白色和透明的概念，也就是说图标中的所有非透明的颜色都会被转换为白色 *  * 小图块和大图块的图标部分的大小：110 × 110 * 中图块的图标部分的大小：202 × 202 *  * 另：application icon 的大小是 100 × 100 *  * 关于 Tile 的更多内容参见： * http://www.cnblogs.com/webabcd/archive/2012/06/27/2564975.html * http://www.cnblogs.com/webabcd/archive/2012/07/05/2577190.html */using System;using System.Windows;using Microsoft.Phone.Controls;using Microsoft.Phone.Shell;using System.Windows.Media;namespace Demo.Tile{    public partial class IconicTile : PhoneApplicationPage    {        public IconicTile()        {            InitializeComponent();        }        private void btnPin_Click(object sender, RoutedEventArgs e)        {            IconicTileData iconicTile = new IconicTileData()            {                Title = "title",                Count = 30,                WideContent1 = "wideContent1",                WideContent2 = "wideContent2",                WideContent3 = "wideContent3",                SmallIconImage = new Uri("/Assets/AppTile.png", UriKind.Relative),                IconImage = new Uri("/Assets/AppTile.png", UriKind.Relative),                BackgroundColor = new Color { A = 255, R = 0, G = 128, B = 255 } // alpha 必须是 255，否则无效            };            // 最后一个参数为是否支持宽图块            ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), iconicTile, true);        }    }}/*通过 xml 方式构造 iconic tile 数据
        
          
             
          
           [small Tile size URI]
              
          
           [medium/wide Tile size URI]
              
          
           [1st row of content]
              
          
           [2nd row of content]
              
          
           [3rd row of content]
              
          
           [count]
              
          
           [title]
              
          
           [hex ARGB format color]
            
         
        */

OK