WP8：Tiles，各显神通

打开wp8模拟器，开始玩主页上的titles，之前看一些宣传材料中提到，wp8的title除了支持不同的规格大小之外，也增加了点新花样。

虽然没有惊喜，但还是乐意玩一玩的。

wp8现支持三种title：Flip Tile；Iconic Tile；Cycle Tile。

这些title都有三种规格：small；medium；wide。

我们一个个来看吧。

1.Flip Tile

先放上一张官方的说明图：

和wp7的standard tile很像，对不对。当然像啦，人家就是从那演变过来的。

接下来我实现的只是把图标，pin to start

FlipTileData data = new FlipTileData()
            {
                //标题
                Title = "titles",//正面
                BackTitle = "background titles",//背面

                //内容
                BackContent = "这是titles测试",
                WideBackContent = "正在测试titles，这是wide情况之下的内容",

                Count = 10,//设置为0时，title中就自动不显示数目

                //图片
                SmallBackgroundImage = new Uri("Images/159_159.jpg", UriKind.Relative),

                BackgroundImage = new Uri("Images/336_336.jpg", UriKind.Relative),
                BackBackgroundImage = new Uri("Images/336_336back.png", UriKind.Relative),//没有设置背面的背景图片，就默认是当前系统风格的背景色

                WideBackgroundImage = new Uri("Images/691_336.jpg", UriKind.Relative),
                WideBackBackgroundImage = new Uri("Images/691_336back.png", UriKind.Relative)
            };
            try
            {

                ShellTile shellTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("ID=FLIP"));
                if (shellTile != null)
                {
                    //如果title已经pin to start，就更新title
                    shellTile.Update(data);
                }
                else
                    //创建title
                    ShellTile.Create(new Uri("/MainPage.xaml?ID=FLIP", UriKind.Relative), data, true);

            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }

2.Iconic Tile

依然看下官方的说明图：

我在模拟器上运行的时候，wide size情况下有点不一样。如下图：

 

白色的方块本来应该显示图片的，可是不知道为什么iconic title，图片全都显示不出来？大家是不是也这样呢？

 

IconicTileData data = new IconicTileData()
            {
                //背景色
                BackgroundColor =  System.Windows.Media.Colors.Green,
                Count = 6,
                Title = "ICONIC TITLE",
                //图标
                SmallIconImage = new Uri("Images/110_110.jpg", UriKind.Relative),//这几张图片，模拟器上显示不出来呢？问题解决的朋友请速告诉我哦。
                IconImage = new Uri("Images/202_202.jpg", UriKind.Relative),

                //只有在图片最大化的时候，才会看到这些content
                WideContent1 = "content 1",
                WideContent2 = "content 2",
                WideContent3 = "content 3"

            };
            try
            {

                ShellTile shellTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("ID=ICON"));
                if (shellTile != null)
                {
                    //如果title已经pin to start，就更新title
                    shellTile.Update(data);
                }
                else
                    ShellTile.Create(new Uri("/MainPage.xaml?ID=ICON", UriKind.Relative), data, true);

            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }

3.Cycle Tile

Cycle Tile突然找不到图了，但是他的风格和主页上的photo是一样的，会连续播放若干张图。之前有人说是主页上的people的九宫格风格，但其实不是哦。其实个人更喜欢九宫格风格来着，感觉更有趣。

cycle tile最多可以放9张图片。但是这9张图片要适应tile的三个大小，自适应之后显示起来总有些不理想。不过既然主旨在于展示图片，当然要首先考虑wide和medium两种风格啦。

 

//供连续播放的图片地址,最多可以放9张
            List<Uri> uriList = new List<Uri>()
            {
                new Uri("Images/159_159.jpg", UriKind.Relative),
                new Uri("Images/159_159back.png", UriKind.Relative),
                new Uri("Images/202_202.jpg", UriKind.Relative),
                new Uri("Images/1.jpg", UriKind.Relative),
                new Uri("Images/2.jpg", UriKind.Relative),
                new Uri("Images/3.jpg", UriKind.Relative),
                new Uri("Images/4.jpg", UriKind.Relative),
                new Uri("Images/5.jpg", UriKind.Relative),
                new Uri("Images/6.jpg", UriKind.Relative)
                //new Uri("Images/7.png", UriKind.Relative)
            };
            CycleTileData data = new CycleTileData()
            {
                Count = 3,
                Title = "CycleTile",
                SmallBackgroundImage = new Uri("159_159.jpg", UriKind.Relative),
                CycleImages = uriList//这样怎么根据图标的size显示图片呢？
            };
            try
            {

                ShellTile shellTile = ShellTile.ActiveTiles.FirstOrDefault(x => x.NavigationUri.ToString().Contains("ID=CYCLE"));
                if (shellTile != null)
                {
                    //如果title已经pin to start，就更新title
                    shellTile.Update(data);
                }
                else
                    ShellTile.Create(new Uri("/MainPage.xaml?ID=CYCLE", UriKind.Relative), data, true);

            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }

官方推荐的图片像素大小：

 源代码：

http://vdisk.weibo.com/s/jVjVS