與眾不同 windows phone (8) - Tile（磁貼）

[索引頁]
[源碼下載]

與眾不同 windows phone (8) - Tile（磁貼）

作者：webabcd


介紹
與眾不同 windows phone 7.5 (sdk 7.1) 之磁貼

• 概述
• 演示如何創建、更新、刪除磁貼
• 演示如何按計划更新磁貼的正面背景圖

示例
1、創建、更新、刪除磁貼的 Demo
ShellTileDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Tile.ShellTileDemo"
    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" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <StackPanel Orientation="Vertical">
        <TextBlock Name="lblMsg" />
        <Button Name="btnUpdateApplicationTile" Content="更新 Application Tile" Click="btnUpdateApplicationTile_Click" />
        <Button Name="btnCreateSecondaryTile" Content="創建 Secondary Tile（可以創建多個）" Click="btnCreateSecondaryTile_Click" />
        <Button Name="btnDeleteSecondaryTile" Content="刪除全部 Secondary Tile" Click="btnDeleteSecondaryTile_Click" />
    </StackPanel>

</phone:PhoneApplicationPage>

ShellTileDemo.xaml.cs

/*
 * Tile - 磁貼
 *     Tile 的大小是173 * 173；寬 Tile 的大小 356 * 173，需要把 manifest 中的 <TemplateType5> 修改為 <TemplateType6>，但是不會通過微軟審核
 *     Tile 分為應用程序磁貼（Application Tile）和次要磁貼（Secondary Tile）
 *     程序無慮如何都有一個 Application Tile（無論它是否被固定到了開始屏幕），只能更新它（不能創建和刪除）；而 Secondary Tile 是可以創建、更新和刪除的，Secondary Tile 如果存在一定是在開始屏幕上
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

namespace Demo.Tile
{
    public partial class ShellTileDemo : PhoneApplicationPage
    {
        public ShellTileDemo()
        {
            InitializeComponent();
        }

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            // 演示獲取點擊 Tile 后傳遞過來的參數數據
            if (NavigationContext.QueryString.Count > 0)
                lblMsg.Text = "參數 t 的值為：" + this.NavigationContext.QueryString["t"];

            base.OnNavigatedTo(e);
        }

        private void btnUpdateApplicationTile_Click(object sender, RoutedEventArgs e)
        {
            /*
             * StandardTileData - 用於描述 Tile 的數據
             *     Title - 正面標題
             *     BackgroundImage - 正面背景
             *     Count - 正面顯示的 badge （徽章），范圍 1 - 99
             *     BackTitle - 背面標題
             *     BackBackgroundImage - 背面背景
             *     BackContent - 背面內容
             *     
             * 
             * ShellTile - 用於管理應用程序Tile和次要Tile
             *     Update(StandardTileData data) - 使用指定的 Tile 數據更新已有的 Tile 信息
             *     Delete() - 刪除此 Tile
             *     NavigationUri - 此 Tile 的導航地址
             *     
             *     ShellTile.ActiveTiles - 固定到開始屏幕的 Tile 集合。注意：其第一個元素必然是 application tile，無論其是否被固定到了首頁
             *     ShellTile.Create(Uri navigationUri, ShellTileData initialData) - 創建一個新的 Secondary Tile（如果有 Secondary Tile，其必然是被固定到開始屏幕的）
             *         navigationUri - 點擊 Tile 后所導航到的地址，此值相當於 key 值，不能重復
             *         initialData - 需要創建的 Tile 數據
             */

            /*
             * 注意：
             * 創建次要磁貼時背景圖必須使用本地資源（程序包內或獨立存儲中，如果是獨立存儲則圖像必須位於 Shared/ShellContent）
             * 更新應用程序磁貼或次要磁貼時，可以使用本地資源或遠程資源來更新背景圖像
             * 磁貼圖像可以是 jpg 或 png 或 gif（只顯示第一幀），png 或 gif 的透明區域的背景會呈現主題色
             * 當使用遠程圖像時，不能是https，要小於80KB，必須30秒內下載完
             */

            // 創建應用程序 Tile 的 Demo
            ShellTile applicationTile = ShellTile.ActiveTiles.First();

            StandardTileData newTile = new StandardTileData
            {
                Title = "App Fore Tile Title",
                BackgroundImage = new Uri("TileBackgroundBlue.png", UriKind.Relative),
                Count = 6,
                BackTitle = "App Back Tile Title",
                BackBackgroundImage = new Uri("TileBackgroundGreen.png", UriKind.Relative),
                BackContent = "App Back Tile Content" + Environment.NewLine + "OK"
            };

            applicationTile.Update(newTile);
        }

        private void btnCreateSecondaryTile_Click(object sender, RoutedEventArgs e)
        {
            // 創建次要 Tile 的 Demo
            StandardTileData newTile = new StandardTileData
            {
                Title = "Secondary Fore Tile Title",
                BackgroundImage = new Uri("TileBackgroundBlue.png", UriKind.Relative),
                Count = 6,
                BackTitle = "Secondary Back Tile Title",
                BackBackgroundImage = new Uri("TileBackgroundGreen.png", UriKind.Relative),
                BackContent = "Secondary Back Tile Content" + Environment.NewLine + "OK"
            };

            // uri 是 key 不能重復
            ShellTile.Create(new Uri("/Tile/ShellTileDemo.xaml?t=" + DateTime.Now.Ticks.ToString(), UriKind.Relative), newTile);
        }

        private void btnDeleteSecondaryTile_Click(object sender, RoutedEventArgs e)
        {
            // 刪除全部次要磁貼
            if (ShellTile.ActiveTiles.Count() > 1)
            {
                ShellTile lastTile = ShellTile.ActiveTiles.Last();
                lastTile.Delete();
            }

            // xna 關閉應用程序：Microsoft.Xna.Framework.Game.Exit();
            // sl 關閉應用程序
            throw new Exception();
        }
    }
}

2、按計划更新磁貼的正面背景圖的 Demo
ShellTileScheduleDemo.xaml

<phone:PhoneApplicationPage 
    x:Class="Demo.Tile.ShellTileScheduleDemo"
    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" d:DesignHeight="768" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True">

    <StackPanel Orientation="Vertical">
        <Button Name="btnStart" Content="Start Schedule" Click="btnStart_Click" />
        <Button Name="btnStop" Content="Stop Schedule" Click="btnStop_Click" />
    </StackPanel>

</phone:PhoneApplicationPage>

ShellTileScheduleDemo.xaml.cs

/*
 * ShellTileSchedule - 用於按計划更新磁貼的正面背景圖
 *     new ShellTileSchedule() - 更新 Application Tile
 *     new ShellTileSchedule(ShellTile tile) - 更新指定的 Secondary Tile
 *     
 *     Recurrence - 更新計划的模式
 *         UpdateRecurrence.Interval - 定時更新
 *         UpdateRecurrence.Onetime - 只更新一次
 *     Interval - 定時更新時的更新間隔（只能是 每小時/每天/每星期/每月）
 *     MaxUpdateCount - 最大的更新次數（默認值是 0，即無限次更新）
 *     StartTime - 開始更新的時間
 *     RemoteImageUri - 需要更新的圖像的遠程地址
 * 
 *     Start() - 啟動計划
 *     Stop() - 停止計划
 *     
 * 
 * 注意：
 * 具體更新時間點是由系統統一調度的（系統每隔一段時間會批處理所有程序的更新計划，這么做是為了省電），也就是說即使你設置了 StartTime = DateTime.Now，也不會馬上更新，但是一個小時內應該會更新
 * 如果更新計划失敗（比如找不到遠程圖像，遠程圖像大於80KB，超過30秒還沒下載完等）次數太多，則該更新計划會被系統自動取消
 */

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

namespace Demo.Tile
{
    public partial class ShellTileScheduleDemo : PhoneApplicationPage
    {
        private ShellTileSchedule _schedule = new ShellTileSchedule();

        public ShellTileScheduleDemo()
        {
            InitializeComponent();
        }

        private void btnStart_Click(object sender, RoutedEventArgs e)
        {
            _schedule.Recurrence = UpdateRecurrence.Interval;
            _schedule.Interval = UpdateInterval.EveryHour;
            _schedule.StartTime = DateTime.Now;
            //_schedule.MaxUpdateCount = 100;
            _schedule.RemoteImageUri = new Uri(@"http://image.sinajs.cn/newchart/small/nsh000300.gif");
            _schedule.Start();
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            _schedule.Stop();
        }
    }
}

OK
[源碼下載]