Windows Phoneの色使いとTileをアプリに生かせ！：Silverlightベースで作るWP7アプリ開発入門（2）（3/3 ページ）

» 2011年07月27日 00時00分公開

[泉本優輝，WP Arch]

前のページへ 1|2|3 　　　　　　

ホーム画面にアプリのTileを追加するには

　プロジェクトをビルドして実行してください。実行後ホーム画面に戻って、右のアプリケーションリストからアプリケーションを選んで、タップ＆ホールド（長押し）します。

　すると、コンテクストメニューが表示されます。コンテクストメニューの中にある「pin to start」をタップしてみましょう。ホーム画面に選んだアプリのTileが追加されます。

図4　Internet ExplorerのTile（左）と作成したサンプルアプリのTile（右）

　しかし、SettingsやInternet ExplorerなどといったPhoneAccentColorで塗りつぶされたTileとは違って、ベタ塗りのアイコンです。これは、デフォルトのアイコンが以下のような画像になっているためです。

ホーム画面のTileの色を変えるには

　PhoneAccentColorによってTileの色を変えたい場合は、アイコンの画像に使用している「ApplicationIcon.png」を編集します。

　例えば、Photoshopなどで以下のように、ApplicationIcon.pngの一部を透明にして再ビルドして実行してみましょう。

　すると、透明にした部分がPhoneAccentColorで塗りつぶされていて、図4から変わっていることが分かると思います。

図5　Internet ExplorerのTile（左）と色が変わったサンプルアプリのTile（右）

　では、以下のような一部が半透明なアイコンだとどうなるか試してみましょう。

　テーマカラーの青に赤が重なって紫色になります。

　試しに今度は、テーマカラーを「lime」に変えてみました。緑に赤が重なって茶色になりました。

　これにより、Tileが以下のような構造でできていることが考えられます。

図6　テーマカラー（下）とタイルの画像（上）が重なっている

　Windows Phone OS 7.0（NoDo）ではホーム画面にのみPhoneAccentColorが適用されていましたが、Windows Phone OS 7.5（Mango）では同じ方法でアプリケーションリストでもPhoneAccentColorが適用されます。

Tileがひっくり返る「Shell Tile」にするには

　最後に、Live Tileの実装方法を紹介します。Mangoでは、Live Tileの実装方法として「Shell Tile」があります。Shell TileとはTileを表と裏で別の画像を用意し、一定時間経つとTileがひっくり返るLive Tileです。

　早速、試してみましょう。まずは、Tileの表と裏の画像を用意します。用意した画像はプロジェクトに追加して、ビルドアクションをコンテンツに設定します。

　ボタンを設置します。

　設置したボタンのClickイベントを以下のように記述します。

        private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            StandardTileData d = new StandardTileData();
            // 表側のプロパティ
            d.Title = "おもて";
            d.Count = 10;
            d.BackgroundImage = new Uri("/Forword.png", UriKind.Relative);
            // 裏側のプロパティ
            d.BackTitle = "うら";
            d.BackContent = "てきすと";
            d.BackBackgroundImage = new Uri("/Back.png", UriKind.Relative);
            // タイルを作成
            ShellTile.Create(new Uri("/MainPage.xaml", UriKind.Relative), d);
        }

　実行して、ボタンをタップしましょう。ホーム画面にTileが生成され、しばらくすると、ひっくり返ります。