windows phone開發學習–再談磁貼[wp8版]

眾所周知，微軟綁架了諾基亞以後就開始搞windows phone8作業系統，儘管這個系統介面上看起來和windows phone7差不多，但底層卻發生了較大的改變。對於使用者來說，最醒目的莫過於案頭上的磁貼大小的改變，原來只有那種單一磁貼，現在大小變成了三種，同時磁貼也有了三種類型，看來微軟開放了更多的東西。

如果需要詳細瞭解磁貼資訊請看MSDN，http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202948(v=vs.105).aspx 這裡只是大致說下三種磁貼的建立過程。這三種磁貼如下：

• Flip:帶有翻轉效果的磁貼，類似於最老的版本中的磁貼
• Iconic:表徵圖此貼，就是類似於電話資訊那樣的磁貼，原來是不開放給開發人員的，需要使用者自己繪製，好在現在開放了
• Cycle:迴圈滑動磁貼，就是類似於照片顯示那樣的，原來也是不開放的

下面來說說這三種磁貼的建立，前提是windows phone8平台首先分別為每個磁貼建立一個類，一系列get set函數，用來更新資料，這裡以FilpTile為例：

using System;using Microsoft.Phone.Shell;namespace Mangopollo.Tiles{    // Summary:    //     Describes a Tile template that flips from the front to the back side. Allows    //     customization of the background image and text for both the front and back    //     Tile.    public class FlipTileData    {        private readonly object _shelltiledata;        public FlipTileData()        {            Type tileDataType = Type.GetType("Microsoft.Phone.Shell.FlipTileData, Microsoft.Phone");            _shelltiledata = tileDataType.GetConstructor(new Type[] { }).Invoke(null);        }        // Summary:        //     Gets or sets the text that displays on the front side of the medium and wide        //     tile sizes.        //        // Returns:        //     The text that displays on the front side of the medium and wide tile sizes.        public string Title        {            get { return (string)Utils.GetProperty(_shelltiledata, "Title"); }            set { Utils.SetProperty(_shelltiledata, "Title", value); }        }        // Summary:        //     Gets or sets a background image of the back of the Tile. If this property        //     is an empty URI, the background image of the back of the Tile will not change        //     during an update.        //        // Returns:        //     The background image of the back of the Tile.        public Uri BackBackgroundImage        {            get { return (Uri)Utils.GetProperty(_shelltiledata, "BackBackgroundImage"); }            set { Utils.SetProperty(_shelltiledata, "BackBackgroundImage", value); }        }        //        // Summary:        //     Gets or sets the text to display on the back of the Tile, above the title.        //     If this property is an empty string, the content on the back of the Tile        //     will not change during an update.        //        // Returns:        //     The text to display on the back of the Tile, above the title.        public string BackContent        {            get { return (string)Utils.GetProperty(_shelltiledata, "BackContent"); }            set { Utils.SetProperty(_shelltiledata, "BackContent", value); }        }        //        // Summary:        //     Gets or sets the background image of the front of the Tile. If this property        //     is an empty URI, the background image of the front of the Tile will not change        //     during an update.        //        // Returns:        //     The background image of the front of the Tile.        public Uri BackgroundImage        {            get { return (Uri)Utils.GetProperty(_shelltiledata, "BackgroundImage"); }            set { Utils.SetProperty(_shelltiledata, "BackgroundImage", value); }        }        //        // Summary:        //     Gets or sets the title to display at the bottom of the back of the Tile.        //     If this property is an empty string, the title on the back of the Tile will        //     not change during an update.        //        // Returns:        //     The title to display at the bottom of the back of the Tile.        public string BackTitle        {            get { return (string)Utils.GetProperty(_shelltiledata, "BackTitle"); }            set { Utils.SetProperty(_shelltiledata, "BackTitle", value); }        }        //        // Summary:        //     Gets or sets a value between 1 and 99 will be displayed in the Count field        //     of the Tile. A value of 0 means the Count will not be displayed. If this        //     property is not set, the Count display will not change during an update.        //        // Returns:        //     A value between 1 and 99 will be displayed in the Count field of the Tile.        public int? Count        {            get { return (int?)Utils.GetProperty(_shelltiledata, "Count"); }            set { Utils.SetProperty(_shelltiledata, "Count", value); }        }        // Summary:        //     Gets and sets the front-side background image for the small Tile size.        //        // Returns:        //     The front-side background image for the small Tile size.        public Uri SmallBackgroundImage        {            get { return (Uri)Utils.GetProperty(_shelltiledata, "SmallBackgroundImage"); }            set { Utils.SetProperty(_shelltiledata, "SmallBackgroundImage", value); }        }        //        // Summary:        //     Gets and sets the back-side background image for the wide Tile size.        //        // Returns:        //     The back-side background image for the wide Tile size.        public Uri WideBackBackgroundImage        {            get { return (Uri)Utils.GetProperty(_shelltiledata, "WideBackBackgroundImage"); }            set { Utils.SetProperty(_shelltiledata, "WideBackBackgroundImage", value); }        }        //        // Summary:        //     Gets and sets the text that displays above the title, on the back-side of        //     the wide Tile size.        //        // Returns:        //     The text that displays above the title, on the back-side of the wide Tile        //     size.        public string WideBackContent        {            get { return (string)Utils.GetProperty(_shelltiledata, "WideBackContent"); }            set { Utils.SetProperty(_shelltiledata, "WideBackContent", value); }        }        //        // Summary:        //     Gets and sets the front-side background image for the wide Tile size.        //        // Returns:        //     The front-side background image for the wide Tile size.        public Uri WideBackgroundImage        {            get { return (Uri)Utils.GetProperty(_shelltiledata, "WideBackgroundImage"); }            set { Utils.SetProperty(_shelltiledata, "WideBackgroundImage", value); }        }        public static implicit operator ShellTileData(FlipTileData data)        {            return (ShellTileData)data._shelltiledata;        }        public ShellTileData ToShellTileData()        {            return (ShellTileData)_shelltiledata;        }    }}

然後建立ShellTileExt.cs類，該類用來建立Tile

using System;using System.Reflection;using Microsoft.Phone.Shell;namespace Mangopollo.Tiles{    public static class ShellTileExt    {        public static void Create(Uri uri, ShellTileData tiledata, bool usewide)        {            Type shellTileType = Type.GetType("Microsoft.Phone.Shell.ShellTile, Microsoft.Phone");            MethodInfo createmethod = shellTileType.GetMethod("Create", new[] {typeof (Uri), typeof (ShellTileData), typeof (bool)});            createmethod.Invoke(null, new object[] {uri, tiledata, usewide});        }    }}

最後和老版本建立磁貼一樣，設定幾個參數傳入即可，下面是main.cs裡面的部分代碼：

using System;using System.Collections.Generic;using System.Linq;using System.Windows;using System.Windows.Media;using Mangopollo.Tasks;using Mangopollo.Tiles;using Microsoft.Phone.Controls;using Microsoft.Phone.Shell;using Microsoft.Phone.Tasks;namespace Mangopollo.Sample{    public partial class MainPage : PhoneApplicationPage    {        // Constructor        public MainPage()        {            InitializeComponent();        }        //測試是否是wp8裝置        private void TestIfWP8_Click(object sender, RoutedEventArgs e)        {            if (Utils.IsWP8)            {                MessageBox.Show("It's a Windows Phone 8 !");            }            else            {                MessageBox.Show("It's a Windows Phone 7 !");            }        }        //判斷是否是7.8裝置        private void TestIfWP78_Click(object sender, RoutedEventArgs e)        {            if (Utils.CanUseLiveTiles)            {                MessageBox.Show("It's a Windows Phone 7.8 or sup !");            }            else            {                MessageBox.Show("It's a Windows Phone 7 !");            }        }        //建立普通的迴圈磁貼        private void CreateCycleTile_Click(object sender, RoutedEventArgs e)        {            //動態磚            if (!Utils.CanUseLiveTiles)            {                MessageBox.Show("This feature needs Windows Phone 8");                return;            }            try            {                var mytile = new CycleTileData                    {                        Title = "cyclic tile",                        Count = 42,                        SmallBackgroundImage = new Uri("/Assets/logo159x159.png", UriKind.Relative),                        CycleImages = new List<Uri> {new Uri("/Assets/Image1.png", UriKind.Relative), new Uri("/Assets/Image2.png", UriKind.Relative), new Uri("/Assets/Image3.png", UriKind.Relative)}                    };#if ALTERNATIVE_SOLUTION                var mytile = Mangopollo.Tiles.TilesCreator.CreateCyclicTile("cyclic tile", 42, new Uri("/Assets/logo159x159.png", UriKind.Relative), new List<Uri>() { new Uri("/Assets/Image1.png", UriKind.Relative), new Uri("/Assets/Image2.png", UriKind.Relative), new Uri("/Assets/Image3.png", UriKind.Relative) });#endif                ShellTileExt.Create(new Uri("/MainPage.xaml?msg=from%20cycle%20tile", UriKind.Relative), mytile, false);            }            catch            {                MessageBox.Show("remove tile before create it again");            }        }        //建立寬的迴圈磁貼        private void CreateCycleTileWide_Click(object sender, RoutedEventArgs e)        {            if (!Utils.CanUseLiveTiles)            {                MessageBox.Show("This feature needs Windows Phone 8");                return;            }            try            {                var mytile = new CycleTileData                    {                        Title = "cyclic wide tile",                        Count = 42,                        SmallBackgroundImage = new Uri("/Assets/logo159x159.png", UriKind.Relative),                        CycleImages = new List<Uri> {new Uri("/Assets/Image1.png", UriKind.Relative), new Uri("/Assets/Image2.png", UriKind.Relative), new Uri("/Assets/Image3.png", UriKind.Relative)}                    };#if ALTERNATIVE_SOLUTION                var mytile = Mangopollo.Tiles.TilesCreator.CreateCyclicTile("cyclic wide tile", 42, new Uri("/Assets/logo159x159.png", UriKind.Relative), new List<Uri>() { new Uri("/Assets/Image1.png", UriKind.Relative), new Uri("/Assets/Image2.png", UriKind.Relative), new Uri("/Assets/Image3.png", UriKind.Relative) });#endif                ShellTileExt.Create(new Uri("/MainPage.xaml?msg=from%20wide%20cycle%20tile", UriKind.Relative), mytile, true);            }            catch            {                MessageBox.Show("remove tile before create it again");            }        }        //建立普通的表徵圖磁貼        private void CreateIconicTile_Click(object sender, RoutedEventArgs e)        {            if (!Utils.CanUseLiveTiles)            {                MessageBox.Show("This feature needs Windows Phone 8");                return;            }            try            {                var mytile = new IconicTileData                    {                        Title = "iconic tile",                        Count = 8,                        BackgroundColor = Colors.Purple,                        IconImage = new Uri("/Assets/logo202x202.png", UriKind.Relative),                        SmallIconImage = new Uri("/Assets/logo110x110.png", UriKind.Relative)                    };#if ALTERNATIVE_SOLUTION                var mytile = Mangopollo.Tiles.TilesCreator.CreateIconicTile("iconic tile", 8, Colors.Purple, new Uri("/Assets/logo202x202.png", UriKind.Relative), new Uri("/Assets/logo110x110.png", UriKind.Relative));#endif                ShellTileExt.Create(new Uri("/MainPage.xaml?msg=from%20iconic%20tile", UriKind.Relative), mytile, false);            }            catch            {                MessageBox.Show("remove tile before create it again");            }        }        //建立寬的表徵圖磁貼        private void CreateIconicTileWide_Click(object sender, RoutedEventArgs e)        {            if (!Utils.CanUseLiveTiles)            {                MessageBox.Show("This feature needs Windows Phone 8");                return;            }            try            {                var mytile = new IconicTileData                    {                        Title = "iconic wide tile",                        Count = 8,                        BackgroundColor = Color.FromArgb(255, 200, 10, 30),                        IconImage = new Uri("/Assets/logo202x202.png", UriKind.Relative),                        SmallIconImage = new Uri("/Assets/logo110x110.png", UriKind.Relative),                        WideContent1 = "Mangopollo Library",                        WideContent2 = "use Windows Phone 8 features",                        WideContent3 = "on Windows Phone 7 apps"                    };#if ALTERNATIVE_SOLUTION                var mytile = Mangopollo.Tiles.TilesCreator.CreateIconicTile("iconic wide tile", 8, Colors.Gray, new Uri("/Assets/logo202x202.png", UriKind.Relative), new Uri("/Assets/logo110x110.png", UriKind.Relative), "Mangopollo Library", "created by", "Rudy Huyn");#endif                ShellTileExt.Create(new Uri("/MainPage.xaml?msg=from%20wide%20iconic%20tile", UriKind.Relative), mytile, true);            }            catch            {                MessageBox.Show("remove tile before create it again");            }        }        //建立普通翻轉磁貼        private void CreateFlipTile_Click(object sender, RoutedEventArgs e)        {            if (!Utils.CanUseLiveTiles)            {                MessageBox.Show("This feature needs Windows Phone 8");                return;            }            try            {                var mytile = new FlipTileData                    {                        Title = "flip tile",                        BackTitle = "created by",                        BackContent = "Rudy Huyn",                        Count = 9,                        SmallBackgroundImage = new Uri("/Assets/logo159x159.png", UriKind.Relative),                        BackgroundImage = new Uri("/Assets/Background336x336_1.png", UriKind.Relative),                        BackBackgroundImage = new Uri("/Assets/Background336x336_2.png", UriKind.Relative)                    };#if ALTERNATIVE_SOLUTION                var mytile = Mangopollo.Tiles.TilesCreator.CreateFlipTile("wide flip tile", "created by", "Rudy Huyn", 9, new Uri("/Assets/logo159x159.png", UriKind.Relative), new Uri("/Assets/Background336x336_1.png", UriKind.Relative), new Uri("/Assets/Background336x336_2.png", UriKind.Relative));#endif                ShellTileExt.Create(new Uri("/MainPage.xaml?msg=from%20flip%20tile", UriKind.Relative), mytile, false);            }            catch            {                MessageBox.Show("remove tile before create it again");            }        }        //建立寬的翻轉磁貼        private void CreateFlipTileWide_Click(object sender, RoutedEventArgs e)        {            if (!Utils.CanUseLiveTiles)            {                MessageBox.Show("This feature needs Windows Phone 8");                return;            }            try            {                var mytile = new FlipTileData                    {                        Title = "wide flip tile",                        BackTitle = "created by",                        BackContent = "Rudy Huyn",                        Count = 9,                        SmallBackgroundImage = new Uri("/Assets/logo159x159.png", UriKind.Relative),                        BackgroundImage = new Uri("/Assets/Background336x336_1.png", UriKind.Relative),                        BackBackgroundImage = new Uri("/Assets/Background336x336_2.png", UriKind.Relative),                        WideBackContent = "This is a very long long text to demonstrate the back content of a wide flip tile",                        WideBackgroundImage = new Uri("/Assets/Background691x336_1.png", UriKind.Relative),                        WideBackBackgroundImage = new Uri("/Assets/Background691x336_2.png", UriKind.Relative)                    };#if ALTERNATIVE_SOLUTION                var mytile = Mangopollo.Tiles.TilesCreator.CreateFlipTile("flip tile", "created by", "Rudy Huyn", "This is a very long long text to demonstrate the back content of a wide flip tile", 9, new Uri("/Assets/logo159x159.png", UriKind.Relative), new Uri("/Assets/Background336x336_1.png", UriKind.Relative), new Uri("/Assets/Background336x336_2.png", UriKind.Relative), new Uri("/Assets/Background691x336_1.png", UriKind.Relative), new Uri("/Assets/Background691x336_2.png", UriKind.Relative));#endif                ShellTileExt.Create(new Uri("/MainPage.xaml?msg=from%20wipe%20flip%20tile", UriKind.Relative), mytile, true);            }            catch            {                MessageBox.Show("remove tile before create it again");            }        }        private void UpdateMainTile_Click(object sender, RoutedEventArgs e)        {            if (!Utils.CanUseLiveTiles)            {                MessageBox.Show("This feature needs Windows Phone 8");                return;            }            var maintile = new FlipTileData                {                    Title = "main tile",                    BackTitle = "this is main tile",                    BackContent = "main tile",                    Count = 3,                    SmallBackgroundImage = new Uri("/Assets/logo159x159.png", UriKind.Relative),                    BackgroundImage = new Uri("/Assets/Background336x336_2.png", UriKind.Relative),                    BackBackgroundImage = new Uri("/Assets/Background336x336_1.png", UriKind.Relative),                    WideBackContent = "This is a very long long text to demonstrate the back content of a wide flip tile",                    WideBackgroundImage = new Uri("/Assets/Background691x336_2.png", UriKind.Relative),                    WideBackBackgroundImage = new Uri("/Assets/Background691x336_1.png", UriKind.Relative)                };#if ALTERNATIVE_SOLUTION            var maintile = Mangopollo.Tiles.TilesCreator.CreateFlipTile("main tile", "This is", "main tile", "This is a very long long text to demonstrate the back content of a wide flip tile", 9, new Uri("/Assets/logo159x159.png", UriKind.Relative), new Uri("/Assets/Background336x336_1.png", UriKind.Relative), new Uri("/Assets/Background336x336_2.png", UriKind.Relative), new Uri("/Assets/Background691x336_1.png", UriKind.Relative), new Uri("/Assets/Background691x336_2.png", UriKind.Relative));#endif            ShellTile.ActiveTiles.First().Update(maintile);        }

整個工程的檔案如下

註：這裡的源碼均來自CodePlex上面的一個開源項目，地址位於http://mangopollo.codeplex.com/ 需要查看源碼的請自行前去下載，程式中還包括地圖和任務的一些功能，不過由於與磁貼主題無關，就不再贅述。還要提一句，磁貼要分場合使用，並不是所有磁貼都能用於任何場合，MSDN上面的這篇文章已經詳細說明了每種磁貼的使用範圍：http://msdn.microsoft.com/en-us/library/windowsphone/design/jj662926(v=vs.105).aspx