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