[WP]アプリケーションバーを設置する

前回システムトレイの背景透過をやりました。
Windows Phoneの仕様なのかどうかわかりませんが、
システムトレイとアプリケーションバーは完全不透明にするとその分コンテンツ領域の高さが削られるみたいです。
フルスクリーンで使う場合は透過する必要があります。
今回もそれに関する部分踏まえて実装していきます。

今回の到達地点は上画像の様な感じでまとめると以下の通り。
・アプリケーションバーの背景色を変える(今回はアクセントカラー)
・ボタンアイコンをWindowsPhoneの背景色設定に応じて表示できるようにする。
・アプリケーションバーのメニューアイテムを表示している時と非表示の時で色を変える。

背景の藍澤光はわかりやすいように仮で設置してあるだけです。
画像サイズは800×480にしてあるので邪魔するものがなければ余白は出来ません。

XAMLの一番下にコメントアウトされてる部分があると思いますが、コイツのコメントアウトを外すとアプリケーションバーが表示されます。

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

この状態ではフルスクリーンで使えず、画像が若干縮小して両サイドに余白がでる。
が、とりあえずまず色を変えていきます。

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" BackgroundColor="{StaticResource PhoneAccentColor}">

色が変わったので画像がフルスクリーンで表示されるように透過します。
システムトレイと同じ要領で一旦XAML”で非表示にしてコードで表示させます。
色もXAMLで指定してしまいます。
XAML

<shell:ApplicationBar IsVisible="False" IsMenuEnabled="True" BackgroundColor="{StaticResource PhoneAccentColor}">

C#

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
	base.OnNavigatedTo(e);
	// アプリケーションバーを表示する
	ApplicationBar.IsVisible = true;
	// アクセントカラーを取得する
	Color accentColor = ApplicationBar.BackgroundColor;
	// 透過する
	accentColor.A = 0x77;
	ApplicationBar.BackgroundColor = accentColor;
}

画像がフルスクリーンになりましたが、メニューの文字が見づらい気がするので、
メニューが出ているときは濃い色にしたいと思います。
XAMLのアプリケーションバーあたりを選択してからプロパティを開いてイベントタブを選択すると画像のようになるかと思います。

このStateChangeをタブルクリックするとC#側に勝手にコードが追加されます。
追加された部分に更に記述して以下の様にします。

private void ApplicationBar_StateChanged(object sender, ApplicationBarStateChangedEventArgs e)
{
	// ApplicatoinBarの背景色を透過する
	Color applicationBarColor = ApplicationBar.BackgroundColor;
	if (applicationBarColor.A == 0x77)
		applicationBarColor.A = 0xFE;
	else
		applicationBarColor.A = 0x77;

	ApplicationBar.BackgroundColor = applicationBarColor;
}


アルファ値を0xFFにしてしまうと左のように縮小してしまうので、0xFEと1つ下げるのがミソです。
人の目には早々わかりません。

次はボタンアイコンを表示します。
コードでは書かずにBlendを使います。

Visual Studioのメニューにプロジェクトがあるのでその中にいます。
起動して画面左下にオブジェクトとタイムラインが表示されています。
ツリー式になっているのでApplicationBar – MenuItems – ApplicationBarIconButtonを選んでください。

選択したら画面右上に共通プロパティがあるのでそこのIconUriをプルダウンすると色々出てきます。

好きなものを選択すると適用されます。

保存したらVisual Studioに戻ってソリューションエクスプローラを確認してください。
以下のように勝手に画像が追加されています。

あとXAMLのアプリケーションバーのIconUriも書き換えられています。
ちなみにどんな画像かというと、透明背景に白地のアイコンです。

以上で完了です。

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中