Windows 8 タイル


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

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

imageimage

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

image

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

image

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

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 スタイル アプリ)

image

 

image

コードは次の通り。
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までの数字を表示できます。

image

コードは次の通りです。

UpdateBadgeWithNumber(99);

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

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

}

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

image

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

image

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

広告

コメント / トラックバック1件 to “Windows 8 タイル”

  1. .NET Clips Says:

    Windows 8 タイル | C# 研究室…

    素敵なエントリーの登録ありがとうございます – .NET Clipsからのトラックバック…

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中


%d人のブロガーが「いいね」をつけました。