Dark と Light のテーマでいろいろ表示を変えたい

#wp7dev_jp

以前、 Light のテーマとDark のテーマでスマートに表示を切り替える。 記事を公開しましたが、これはあくまでも表示非表示で切り替えるもので、多くのコントロールの場合にはやってられません。

といって、これといったスマートな方法がシステム的に提供されていないのでいかんともしがたいところですが、今回は「こんな方法もあるよ」というのをご紹介します。ちなみにこの方法の欠点は、各ページごとに設定しないといけないという点です。

今回は黒（Dark) をベースとして白（Light）の設定を追加する感じで行います。VisualStateManagerを使います。

状態の作成

まずは Visual State Manager で状態を作りましょう。VisualStateGroupを作って、さらに状態を1つ追加します。新しい状態は「Light」と名前を付けます。

Blend を起動するのが面倒な人は、XAML直接追記でもいいかも。でも結局それぞれの状態の画面作りでは Blendを使うことになるんですよね。実装はLayoutRoot の中に実装します。

<Grid x:Name="LayoutRoot" Background="Transparent">

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Light" />
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

状態の切り替えの実装

それから、この状態の切り替えのコーディング。あらかじめ組み込まれているPhoneLightThemeVisibilityリソースの状態で判断します。画面表示中にテーマが変わることはないので、あくまでこの画面が表示されたとき（OnNavigatedTo）に切り替えます。

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
    if ((Visibility)App.Current.Resources["PhoneLightThemeVisibility"]  == System.Windows.Visibility.Visible)
        VisualStateManager.GoToState(this, "Light", false);           
}

Light の画面を作る

さて、画面の作り方。Darkの方は通常通り創ります。そしてLight。まずは、Blend をLightに設定しましょう。デバイスタブで、切り替えます。テーマの右のスイッチを切り替えます。

そして、状態タブで先ほど作った Lightを選択します。画面が赤枠で囲まれたら、Lightでの画面設定をします。

テスト

まずはそのまま実行します。Darkでの状態ですね。そして ホームボタンを押して 設定 → テーマ → 背景を白に → ホームボタン → アプリケーションリストからアプリを起動すると、白画面での設定になっていることがわかります。

この辺が PhoneApplicationPageに組み込まれているとうれしいのですが、残念ながらまだ組み込まれていないですね。リクエスト出さないといけないなぁ。