与众不同 windows phone (36) - 8.0 新的瓷贴: FlipTile, CycleTile, IconicTile

介绍
与众不同 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
[源码下载]

秒客网

与众不同 windows phone (36) - 8.0 新的瓷贴: FlipTile, CycleTile, IconicTile

相关文章