×
Namespaces

Variants
Actions

Windows Phone 8中的Tiles

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
Article Metadata

代码示例
测试基于
SDK: Windows Phone SDK 8.0

兼容于
平台: Windows Phone 8 (and later)
Windows Phone 8

文章
Xinx Gong 在 30 Oct 2012 创建
最后由 hamishwillee 在 03 Jul 2013 编辑

Contents

介绍

相对于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还支持更多的尺寸。

Wp8 tile sample 1.jpg


Cycle 模板

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

Wp8 tile sample 2.jpg

Iconic 模板

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

Wp8 tile sample 3.jpg

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

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

  • TemplateFlip

Wp8 tile sample 4.jpg

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

  • TemplateCycle

Wp8 tile sample 5.jpg

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

  • TemplateIconic

Wp8 tile sample 6.jpg

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

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

This page was last modified on 3 July 2013, at 06:38.
139 page views in the last 30 days.
×