与众不同 windows phone (36) - 8.0 新的瓷贴: FlipTile, CycleTile, IconicTile
与众不同 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 = 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 数据 <?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 = 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 数据 <?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 = 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 数据 <?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
[源码下载]