65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 TileNotifications Pack 创建 Windows 应用商店实时磁贴。

Marius Bancila
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.95/5 (6投票s)

2013年12月20日

CPOL

3分钟阅读

viewsIcon

25917

展示如何轻松地使用 TileNotifications pack 创建实时磁贴。

磁贴是 Windows 应用商店应用程序在 Windows 8 主屏幕上的呈现方式。 这些磁贴可以有各种大小，并根据通知显示实时内容。 实时内容可以是文本、图像或两者的各种组合。 本文解释了如何创建实时磁贴，以及 TilesNotification Pack 如何简化此过程。

使用 XML

用于创建实时磁贴更新的通知是 XML 文档，它们指定通知模板、其内容和其他各种视觉属性（例如语言或品牌推广方案）。 但是，为了向您的磁贴发送通知，您必须执行一些额外的工作

  • 为您的应用程序创建一个单独的 Windows 运行时组件
  • 实现 IBackgroundTask 接口以创建一个更新应用程序磁贴的组件
  • 更新应用程序的程序包清单，并添加一个新的后台任务声明，引用新创建的后台任务

这些细节超出了本文的范围，并在 MSDN 中进行了详细阐述：快速入门：从后台任务更新实时磁贴。

实时磁贴可以有各种大小：普通（150x150 像素）、宽（310x150 像素）和大（310x310 像素）。 对于这些支持的尺寸，有各种模板，带有文本和图像的组合（其中一些已在 Windows 8.1 中被弃用，并且可能在未来的 Windows 版本中不可用）。 Windows 应用商店应用程序可以支持所有这三种实时磁贴尺寸，但只能为每种尺寸定义一个模板。

要查看所有可用的磁贴模板，请查看 磁贴模板目录。

以下 C# 代码示例演示了如何为宽（310x150）磁贴创建通知。 请注意

  • 您必须为应用程序创建一个磁贴更新程序组件
  • 为通知创建 XML 文档。 这通常通过检索可用模板之一的 XML 文档，然后更改 DOM 来完成。
  • 从磁贴 XML 创建一个 TileNotification 对象，并使用它来更新磁贴
const string textElementName = "text";
const string imageElementName = "image";

// Create a tile update manager for the specified syndication feed.
var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.EnableNotificationQueue(true);
updater.Clear();

var imgsrc = new string[] {
  "ms-appx:///Images/image1.png",
  "ms-appx:///Images/image2.png",
  "ms-appx:///Images/image3.png",
  "ms-appx:///Images/image4.png",
  "ms-appx:///Images/image5.png",
};

for (int i = 0; i < 5; ++i)
{
  try
  {
     // wide 310x150
     var tileXml = TileUpdateManager.GetTemplateContent
                   (TileTemplateType.TileWide310x150ImageAndText01);
     tileXml.GetElementsByTagName(textElementName)[0].InnerText = 
                                 string.Format("this is notification #{0}", i+1);
     var image = tileXml.GetElementsByTagName(imageElementName).FirstOrDefault();
     if (image != null)
     {
        var src = tileXml.CreateAttribute("src");
        src.Value = imgsrc[i];
        image.Attributes.SetNamedItem(src);
     }

     updater.Update(new TileNotification(tileXml));
  }
  catch (Exception ex)
  {
     Debug.WriteLine(ex.Message);
  }
}

以这种方式创建磁贴通知太明确，当您想支持多种磁贴尺寸（通常是这种情况）时会变得很麻烦，尤其是在磁贴模板具有许多元素（其中一些具有 20 多个文本和/或图像元素）时。 在这种情况下，磁贴文档的 visual 元素必须具有多个绑定。 下一个示例显示了如何为两个磁贴（一个普通磁贴和一个宽磁贴）创建通知。

// wide 310x150
var tileXml = TileUpdateManager.GetTemplateContent
                (TileTemplateType.TileWide310x150ImageAndText01);
tileXml.GetElementsByTagName(textElementName)[0].InnerText = 
                        string.Format("this is notification #{0}", i+1);
var image = tileXml.GetElementsByTagName(imageElementName).FirstOrDefault();
if (image != null)
{
  var src = tileXml.CreateAttribute("src");
  src.Value = imgsrc[i];
  image.Attributes.SetNamedItem(src);
}

// square 150x150
var squaredTileXml = TileUpdateManager.GetTemplateContent
                              (TileTemplateType.TileSquare150x150Text04);
squaredTileXml.GetElementsByTagName(textElementName)[0].InnerText = 
                           string.Format("this is notification #{0}", i+1);

var binding = tileXml.ImportNode(squaredTileXml.GetElementsByTagName("binding")[0], true);
tileXml.GetElementsByTagName("visual")[0].AppendChild(binding);
         
updater.Update(new TileNotification(tileXml));

使用 TileNotifications Pack

Tileotifications pack 是一个小型开源项目，可在 Codeplex 上获得，它提供了一组 .NET 类，使开发人员能够以比上述更简单、更安全的方式为 Windows 应用商店应用程序创建磁贴通知。 您无需创建或更新 XML 文档，而是以您习惯的面向对象的方式创建对象和对象集合。

下面的示例展示了如何为普通、宽和大尺寸的磁贴创建通知。

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.EnableNotificationQueue(true);
updater.Clear();

var imgsrc = new string[] {
  "ms-appx:///Images/image1.png",
  "ms-appx:///Images/image2.png",
  "ms-appx:///Images/image3.png",
  "ms-appx:///Images/image4.png",
  "ms-appx:///Images/image5.png",
};

for (int i = 0; i < 5; ++i)
{
  try
  {
     var tiles = new TileCollection()
     {
        new TileSquare150x150Image() {
           Binding = new TileBinding() { Branding = TileBranding.name },
           Image = new TileImage() { Src = imgsrc[i], Alt = imgsrc[i] }
        },
        new TileWide310x150ImageAndText01(){
           Image = new TileImage() { Src = imgsrc[i], Alt = imgsrc[i] },
           Text = string.Format("this is notification #{0}", i+1)
        },
        new TileSquare310x310ImageAndTextOverlay02() {
           Binding = new TileBinding() { Branding = TileBranding.none },
           Image = new TileImage() { Src = imgsrc[i], Alt = imgsrc[i] },
           Text = string.Format("this is notification #{0}", i+1),
           Text2 = string.Format("and this is a description for notification #{0}", i+1)
        }
     };

     updater.Update(tiles);
  }
  catch (Exception ex)
  {
     Debug.WriteLine(ex.Message);
  }
}

以下是实时磁贴可能的外观

要使用该包，您只需添加对程序集 TileNotificationsPack.dll 的引用。

该包定义了

  • 代表可用磁贴模板的类集合（例如 TileSquare150x150Image、TileSquare310x310ImageAndTextOverlay02 等，都派生自 Tile 类）
  • 用于定义其他视觉属性的类（例如 TileBranding）
  • TileUpdater 扩展方法，用于从 Tile 或 Tile 对象集合更新磁贴。

附加阅读材料

历史

  • 2013 年 12 月 20 日：初始版本
© . All rights reserved.