MetroStyleApp入門 vol15:タイルを利用する(その1)

月曜日 , 7, 5月 2012 Leave a comment

 Windows 8のタイルはWindowsPhoneと同様、アプリを起動しなくても色々な情報を伝えることができる大事な画面です。

 タイルの作り方によってアプリを起動してもらえるか如何に影響が出ますので、タイルは有意義に使いたいですね。

 

 というわけで、まずはタイルの基礎から。

設定できるファイルの大きさは2種類

 

 初期状態のタイルはPackage.appxmanifestで定義できます。

 「ロゴ」と「ワイド ロゴ」の2種類が定義可能です。それぞれサイズが150×150、310×150となっています。

 

 

 ワイド ロゴが設定されているとアプリ起動時のタイルはワイド ロゴ(310×150)のものに、指定してない場合はロゴ(150×150)となります。

ワイド ロゴが設定されている場合は初期状態はワイドロゴ

 

 ワイドのログをユーザー側で変更したい場合は右クリック(マウス操作の場合)かアイコンをちょっと下にずらす操作(タッチ操作時)でメニューを表示。「小さくする」を選択します。

 

 

 画像の「短い名前」という表記はアプリ名とは別にPackage.appxmanifestの「短い名前」項目で設定できる文字列です。

 (「短い名前」の指定がない場合はアプリ名が表示されます)

 

ライブタイルを利用する

 

 タイルには色々な情報を動的に表示することができます。

 そのように動的に情報を表示するタイルをライブタイルと呼びます。

 

 まずは簡単なライブタイルを表示してみましょう。

 

 ライブタイルで利用できるパターンはいくつか定義されており、そのテンプレートに表示を当てはめる形で設定します。

 テンプレートの種類は下記ページを参考にしてください。

 

Choosing a tile template

 

 ライブタイルを設定するコードは以下のようになります。

 

            XmlDocument doc = new XmlDocument();
            string str = 
                "<title><visual version=\"1\" lang=\"ja-JP\">"
              +     "<binding template=\"TileSquareText01\">"
              +         "<text id=\"1\">Tile</text>"
              +         "<text id=\"2\">ライブタイル</text>"
              +         "<text id=\"3\">TileSquareText01</text>"
              +         "<text id=\"4\">のサンプルです</text>"
              +     "</binding>"
              + "</visual></title>";

            doc.LoadXml(str);
            var tileNotification = new Windows.UI.Notifications.TileNotification(doc);

            var updater = TileUpdateManager.CreateTileUpdaterForApplication();
            updater.Update(tileNotification);

 

 あまり表示できる文字数は多くないので注意ですね。

 

バッジの表示

 

 メールの未読件数のような数字やいくつかのアイコンをバッジとして表示することが可能です。

 

 バッジとして利用可能な数字ないしアイコンは以下が参考になります。

 

Choosing a badge image

 

 バッジを表示するコードは以下です。

 

            var badgeXml = Windows.UI.Notifications.BadgeUpdateManager.GetTemplateContent(Windows.UI.Notifications.BadgeTemplateType.BadgeNumber);
            XmlElement badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
            badgeElement.SetAttribute("value", "7");
            
            BadgeNotification badge = new BadgeNotification(badgeXml);
            BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);

 

 

 

  次回以降はさらにバッジについて掘り下げていこうと思います。


Please give us your valuable comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です