Windows Phone で画像付きのタイル テンプレートを使う

ライブ タイルを更新できるようになったのですが、ちょっと地味なのでもう少し派手なテンプレートも使ってみましょう。

タイル テンプレート カタログ を見てみると Phone でも使える画像付きのタイルを見つけることができます。

TileSquare150x150PeekImageAndText01 の例

親切に画像サイズが指定されていますが、これは Windows 用のサイズです。Windows Phone では 240% 140% 100% を使うので 360 × 360*1 の画像を作って ファイル名.scale-240.png として作成しました。

作成した画像はプロジェクトの Assets フォルダに追加して 他の画像と同じように ビルドアクションを「コンテンツ」、出力ディレクトリへのコピーを「コピーしない」にしておきます。

あとはテンプレートで指定するだけ...なのですが、image タグの src 属性に指定する必要があるので 今までの文字列とは少し指定方法が違います。やはりスマートではないですよね。

var tileXml = TileUpdateManager.GetTemplateContent(
    TileTemplateType.TileSquare150x150PeekImageAndText01);

var imageElement = tileXml.GetElementsByTagName("image").Single();
imageElement.Attributes.GetNamedItem("src").NodeValue = "ms-appx:///Assets/od_tile.png";
//imageElement.Attributes.GetNamedItem("alt").NodeValue = "by @ch3cooh"; 

tileXml.GetElementsByTagName("text")[0].InnerText = string.Format("{0:#,0} MB", volume);

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.Update(new TileNotification(tileXml));

更に ここでちょっと引っかかったのは、テンプレートカタログの XML の例に alt 属性があったので設定しようとしたところ、例外で落ちてしまいました。確認してみると id と src しか返ってこないのでドキュメントの誤りのような気がします。

foreach (var a in imageElement.Attributes)
{
    // id と src しかない...
    System.Diagnostics.Debug.WriteLine(a.LocalName);
}

ともあれ、無事に画像付きのテンプレートが使えるようになりました。*2

　
裏面に回ると本来の情報もこの通り。

やはりライブタイルは動きがある方がいいですね。

*1:150 × 240% ね

*2:画像には酢酸先生作成のフリー素材を使用させて頂いております。