Windows 8 タイル

環境： Windows 8 Release Preview Build 8400 + Visual Studio 2012 RC

タイルに画像を表示する方法

これらの画像の設定は、”Package.appxmanifest” ファイルから、ロゴ (150 x 150 ピクセル)、ワイドロゴ(310 x 150 ピクセル)で設定します。

タイルに文字を表示する方法

タイルに文字を表示するためには、NotificationExtensions を組み込む必要があります。NotificationExtensions の入手方法は、次のサンプルパックをダウンロードします。このサンプルには１００以上のサンプルコードが提供されています。

Windows 8 Release Preview Metro style app samples – C#, VB.NET, C++, JavaScript

この中の “App tiles and badges sample” というサンプルを展開します。このプロジェクトの中に、NotificationsExtensions が含まれています。この中から、NotificationsExtensions.winmd をプロジェクトに配置します。配置方法は、次のURLで解説されています。

NotificationsExtensions を使ったバッジ、タイル、トースト テンプレートの設定 (JavaScript と HTML を使った Metro スタイル アプリ)

 

コードは次の通り。
ITileWideText03 tileContent =TileContentFactory.CreateTileWideText03();

tileContent.TextHeadingWrap.Text = “Hello World! Uchukamen.com”;

ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();
squareContent.TextBodyWrap.Text = “Hello World! Uchukamen.com Square”;
tileContent.SquareContent = squareContent;

TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

ファイルからタイルの画像を設定する方法

ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();

tileContent.TextCaptionWrap.Text = “Hello World! Uchukamen.com”;
tileContent.Image.Src = “ms-appx:///assets/uchukamen310x150.png”;
tileContent.Image.Alt = “uchukamen310x150”;

ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();
tileContent.TextCaptionWrap.Text = “Hello World! Uchukamen.com Square”;
squareContent.Image.Src = “ms-appx:///assets/uchukamen150.png”;
squareContent.Image.Alt = “uchukamen150”;
tileContent.SquareContent = squareContent;

TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

バッジを表示する方法

バッジとは、次の図のようなタイルの右下の小さな数字で、0-99までの数字を表示できます。

コードは次の通りです。

UpdateBadgeWithNumber(99);

void UpdateBadgeWithNumber(int number)
{
    BadgeNumericNotificationContent badgeContent = new BadgeNumericNotificationContent((uint)number);

    BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());

}

背景色は、”Package.appxmanifest” のタイルの背景色で設定します。

ちなみに、バッジに表示できるのは0-99 までですが、99を超えると 99+と表示されるんですね。

マイナスや、小数点以下は、BadgeNumericNotificationContentの引数がunsinged int なので、そもそも渡すことができません。