與眾不同 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
[源碼下載]