与众不同 windows phone (36) - 8.0 新的瓷贴: FlipTile, CycleTile, IconicTile
作者：webabcd
介绍
与众不同 windows phone 8.0 之 新的瓷贴
- FlipTileData - 翻转瓷贴。继承了 wp7 时代的 StandardTileData
- CycleTileData - 循环瓷贴
- IconicTileData - 图标瓷贴
示例
1、演示 FlipTileData 的应用
Tile/FlipTile.xaml
<phone:PhoneApplicationPage
x:Class="Demo.Tile.FlipTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True"> <Grid x:Name="LayoutRoot" Background="Transparent">
<ScrollViewer>
<StackPanel>
<Button Name="btnPin" Content="pin the flip tile" Margin="0 0 0 10" Click="btnPin_Click" />
<Image Source="/Tile/FlipTile1.png" />
<Image Source="/Tile/FlipTile2.png" />
<Image Source="/Tile/FlipTile3.png" />
</StackPanel>
</ScrollViewer>
</Grid> </phone:PhoneApplicationPage>
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 = ,
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 数据
<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
<wp:Tile Id="[Tile ID]" Template="FlipTile">
<wp:SmallBackgroundImage [Action="Clear"]>[small Tile size URI]</wp:SmallBackgroundImage>
<wp:WideBackgroundImage Action="Clear">[front of wide Tile size URI]</wp:WideBackgroundImage>
<wp:WideBackBackgroundImage Action="Clear">[back of wide Tile size URI]</wp:WideBackBackgroundImage>
<wp:WideBackContent Action="Clear">[back of wide Tile size content]</wp:WideBackContent>
<wp:BackgroundImage Action="Clear">[front of medium Tile size URI]</wp:BackgroundImage>
<wp:Count Action="Clear">[count]</wp:Count>
<wp:Title Action="Clear">[title]</wp:Title>
<wp:BackBackgroundImage Action="Clear">[back of medium Tile size URI]</wp:BackBackgroundImage>
<wp:BackTitle Action="Clear">[back of Tile title]</wp:BackTitle>
<wp:BackContent Action="Clear">[back of medium Tile size content]</wp:BackContent>
</wp:Tile>
</wp:Notification>
*/
2、演示 CycleTile 的应用
Tile/CycleTile.xaml
<phone:PhoneApplicationPage
x:Class="Demo.Tile.CycleTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True"> <Grid x:Name="LayoutRoot" Background="Transparent">
<ScrollViewer>
<StackPanel>
<Button Name="btnPin" Content="pin the cycle tile" Margin="0 0 0 10" Click="btnPin_Click" />
<Image Source="/Tile/CycleTile1.png" />
<Image Source="/Tile/CycleTile2.png" />
<Image Source="/Tile/CycleTile3.png" />
</StackPanel>
</ScrollViewer>
</Grid> </phone:PhoneApplicationPage>
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 = ,
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 数据
<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
<wp:Tile Id="[Tile ID]" Template="CycleTile">
<wp:SmallBackgroundImage [Action="Clear"]>[small Tile size URI]</wp:SmallBackgroundImage>
<wp:CycleImage1 Action="Clear">[photo 1 URI]</wp:CycleImage1>
<wp:CycleImage2 Action="Clear">[photo 2 URI]</wp:CycleImage2>
<wp:CycleImage3 Action="Clear">[photo 3 URI]</wp:CycleImage3>
<wp:CycleImage4 Action="Clear">[photo 4 URI]</wp:CycleImage4>
<wp:CycleImage5 Action="Clear">[photo 5 URI]</wp:CycleImage5>
<wp:CycleImage6 Action="Clear">[photo 6 URI]</wp:CycleImage6>
<wp:CycleImage7 Action="Clear">[photo 7 URI]</wp:CycleImage7>
<wp:CycleImage8 Action="Clear">[photo 8 URI]</wp:CycleImage8>
<wp:CycleImage9 Action="Clear">[photo 9 URI]</wp:CycleImage9>
<wp:Count Action="Clear">[count]</wp:Count>
<wp:Title Action="Clear">[title]</wp:Title>
</wp:Tile>
</wp:Notification>
*/
3、演示 IconicTile 的应用
Tile/IconicTile.xaml
<phone:PhoneApplicationPage
x:Class="Demo.Tile.IconicTile"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True"> <Grid x:Name="LayoutRoot" Background="Transparent">
<ScrollViewer>
<StackPanel>
<Button Name="btnPin" Content="pin the iconic tile" Margin="0 0 0 10" Click="btnPin_Click" />
<Image Source="/Tile/IconicTile1.png" />
<Image Source="/Tile/IconicTile2.png" />
<Image Source="/Tile/IconicTile3.png" />
</StackPanel>
</ScrollViewer>
</Grid> </phone:PhoneApplicationPage>
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 = ,
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 = , R = , G = , B = } // alpha 必须是 255，否则无效
}; // 最后一个参数为是否支持宽图块
ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), iconicTile, true);
}
}
} /*
通过 xml 方式构造 iconic tile 数据
<?xml version="1.0" encoding="utf-8"?>
<wp:Notification xmlns:wp="WPNotification" Version="2.0">
<wp:Tile Id="[Tile ID]" Template="IconicTile">
<wp:SmallIconImage [Action="Clear"]>[small Tile size URI]</wp:SmallIconImage>
<wp:IconImage Action="Clear">[medium/wide Tile size URI]</wp:IconImage>
<wp:WideContent1 Action="Clear">[1st row of content]</wp:WideContent1>
<wp:WideContent2 Action="Clear">[2nd row of content]</wp:WideContent2>
<wp:WideContent3 Action="Clear">[3rd row of content]</wp:WideContent3>
<wp:Count Action="Clear">[count]</wp:Count>
<wp:Title Action="Clear">[title]</wp:Title>
<wp:BackgroundColor Action="Clear">[hex ARGB format color]</wp:BackgroundColor>
</wp:Tile>
</wp:Notification>
*/
OK
[源码下载]