hyoromoのブログ

最近はVRSNS向けに作ったものについて書いています

LiveTileで複数画像切り替える方法


WindowsPhone8からLiveTile周りに色々回収が入りました。
その1つとして今までLiveTileは表と裏に設定した2枚の画像が捲れるアニメーションしか設定出来なかったのが、1〜9枚の設定画像が縦スクロールのアニメーションをしながら切り替わる方法が追加されました。

コード

その際に/Assets/LiveTilesディレクトリにある9枚の画像をLiveTileの画像として設定し、スタート画面に新規作成するコードになります。
WindowsPhone8から追加されたAPIであるCycleTileDataを使って画像を設定しています。

ShellTile appTile = ShellTile.ActiveTiles.First();
if (appTile != null)
{
    CycleTileData cycleTileData = new CycleTileData()
    {
       CycleImages = new Uri[]
       {
          new Uri("/Assets/LiveTiles/tile1.jpg", UriKind.Relative), 
          new Uri("/Assets/LiveTiles/tile2.jpg", UriKind.Relative), 
          new Uri("/Assets/LiveTiles/tile3.jpg", UriKind.Relative), 
          new Uri("/Assets/LiveTiles/tile4.jpg", UriKind.Relative), 
          new Uri("/Assets/LiveTiles/tile5.jpg", UriKind.Relative), 
          new Uri("/Assets/LiveTiles/tile6.jpg", UriKind.Relative), 
          new Uri("/Assets/LiveTiles/tile7.jpg", UriKind.Relative), 
          new Uri("/Assets/LiveTiles/tile8.jpg", UriKind.Relative), 
          new Uri("/Assets/LiveTiles/tile9.jpg", UriKind.Relative), 
       }
    };
    ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), cycleTileData, true);
}

適当に書いたコードなので、他プロパティを設定していない上、スタート画面に1件以上LiveTileがあるとエラーになります。
実際に使用する際はチェック処理を入れといてくださいね。

動画

どんな感じのアニメーションか撮影してみました

特徴

主な特徴は以下のようになります。

  • 1つの画像で縦スクロールが完了すると、次の画像へ一気にスクロールして切り替わる
  • 画像は設定順で表示される
  • 画像は1〜9枚まで設定可能である
  • 複数画像が設定可能なLiveTileサイズはMedium(中)とWide(大)で、Small(小)は1枚のみ*1
  • 画像切り替えは1回のアニメーション中に数回行われる。すべて行われる訳ではない
  • アニメーション契機は端末操作を止め、再度操作すると行われる*2

今回使用したキャラクタについて

ITちゃんを使わせて頂きました。
http://commons.nicovideo.jp/user/17149

*1:LiveTileの詳しいサイズに関しては[http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh202948.aspx:title=こちら]を参照

*2:続きから画像更新される