WP8中的Tiles

介绍

相对于Windows Phone7中Tile的单调，在Windows Phone8中，SDK为开发者提供了更丰富多彩的Tile。WP8提供了新的Tile尺寸，新的Tile模板。我们可以通过下面的类来访问：

FlipTileData
CycleTileData
IconicTileData

Tile的新尺寸

WP8中支持了大、中、小三个尺寸的Tile。 WXGA分辨率下各个尺寸的Tile需要提供的图片/图标的大小如下：

Flip和Cycle Tile：大-691*336像素 中-336*336像素 小-159*159像素
Iconic Tile：大-N/A 中-202*202像素 小-110*110像素

除了WXGA，WP8还支持了另外两个分辨率——WVGA和720p。系统在这两个分辨率下会自动的拉伸你提供的图片/图标。

Tile 模板

Filp 模板

Flip Tile是一个能前后翻转的Tile，它继承于WP OS7.1上的Tile，所以与WP OS7.1上的Tile最为类似，只不过在WP8上Flip Tile还支持更多的尺寸。

Cycle 模板

Cycle Tile可以循环显示最多9张图片。

Iconic 模板

Iconic Tile更接近于Windows Phone的设计理念。

如何将你应用的默认Tile设置为新的Tile模板

打开你的WP8工程，在“Solution”下的“Properties”文件夹中有一个文件“WMAppManifest.xml”，双击打开就可以配置你的应用程序。 在“Application UI”栏下，可以找到“Tile Template”，这里可以设置你的应用的默认Tile为“TemplateFlip”、“TemplateCycle”或是“TemplateIconic”。无论你选择了哪种模板，都需要设置其是否支持大尺寸的Tile以及Tile的标题。

• TemplateFlip

该模板需要设置小、中、大三个尺寸Tile显示的图片，其中小和中的尺寸显示图片是必须设置的。

• TemplateCycle

该模板必须要设置一张小尺寸Tile显示的图片，而轮播的图片也要至少选择一张，最多支持九张。

• TemplateIconic

该模板需要选择小和中尺寸的图标，虽然不是必须的，但是为了能更好的标识你的应用，推荐都添加上。

PS：通过点击图片预览下面的“…”来添加或修改图片/图标，点击右上角的“x”来删除图片/图标。

如何创建新的附加Tile并更新你的Tile

• FlipTileData

    Title = "Flip Tile", // 标题
    Count = 1, // 数量
    BackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileMedium.png", UriKind.Relative), // 中尺寸背景图
    BackTitle = "Back Flip Tile", // 背面标题
    BackContent = "Back Flip Tile Content", // 背面内容
    BackBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileMedium.png", UriKind.Relative), // 中尺寸背面背景图
    SmallBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative), // 小尺寸背景图
    WideBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative), // 大尺寸背景图
    WideBackContent = "Wide Back Flip Tile Content", // 大尺寸背面内容
    WideBackBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileLarge.png", UriKind.Relative), // 大尺寸背面背景图

• CycleTileData

    Title = "Cycle Tile", // 标题
    Count = 0, // 数量
    SmallBackgroundImage = new Uri("/Assets/Tiles/FlipCycleTileSmall.png", UriKind.Relative), // 小尺寸背景图
    CycleImages = new List<Uri>() // 轮播图片，最少一张，最多九张
    {
        new Uri("/Assets/Tiles/Cycle/00.png", UriKind.Relative),
        new Uri("/Assets/Tiles/Cycle/01.png", UriKind.Relative),
        new Uri("/Assets/Tiles/Cycle/02.png", UriKind.Relative),
        new Uri("/Assets/Tiles/Cycle/03.png", UriKind.Relative),
        new Uri("/Assets/Tiles/Cycle/04.png", UriKind.Relative),
        new Uri("/Assets/Tiles/Cycle/05.png", UriKind.Relative),
        new Uri("/Assets/Tiles/Cycle/06.png", UriKind.Relative),
        new Uri("/Assets/Tiles/Cycle/07.png", UriKind.Relative),
        new Uri("/Assets/Tiles/Cycle/08.png", UriKind.Relative),
    },

• IconicTileData

    Title = " Iconic Tile", // 标题
    Count = 5, // 数量
    BackgroundColor = Colors.Transparent, // 背景颜色值
    IconImage = new Uri("/Assets/Tiles/IconicTileMediumLarge.png", UriKind.Relative), // 中尺寸图标
    SmallIconImage = new Uri("/Assets/Tiles/IconicTileSmall.png", UriKind.Relative), // 小尺寸图标
    WideContent1 = "Iconic Tile Wide Content1", // 大尺寸内容1
    WideContent2 = "Iconic Tile Wide Content2", // 大尺寸内容2
    WideContent3 = "Iconic Tile Wide Content3", // 大尺寸内容3

在通过类FlipTileData、CycleTileData或IconicTileData创建了你需要的Tile数据后，你就可以通过CreateTile方法来创建你的Tile了。

    ShellTile.Create(
        new Uri(_GetNavigationUri(tileType), UriKind.Relative), // 点击Tile跳转的路径
        tileData, //Tile数据
        supportsWideTile // 是否支持大尺寸
        );

PS：需要注意的是如果要创建Flip，Cycle或Iconic类型的Tile，不能使用方法CreateTile(Uri navigationUri, ShellTileData initialData)来创建，
必须使用方法CreateTile(Uri navigationUri, ShellTileData initialData, bool supportsWideTile)，否则在运行的时候会报一个System.InvalidOperationException的异常。

源代码下载

File:Wp8 tile sample.zip

 

原文地址：http://www.developer.nokia.com/Community/Wiki/Windows_Phone_8%E4%B8%AD%E7%9A%84Tiles