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

Article
01/17/2012

#wp7dev_jp

どのページも Dark とLightで統一したいというならうーん困った。リソースは書き換えられないし。自分でリソース作って適応するしかない。

欠点：この方法も各ページに適応しないといけないのでかっこは悪い。
利点：このようにアプリケーションリソースに作っておけば、適応は便利。

App.xaml

ここで、色のリソースは作っておきます。Blendで作ればグラデーションやテクスチャのリソースも簡単です。

<Application.Resources>
    <SolidColorBrush x:Key="DarkForeColor" Color="Yellow"/>
    <SolidColorBrush x:Key="DarkBackColor" Color="#FF000080"/>
    <SolidColorBrush x:Key="LightForeColor" Color="Red"/>
    <SolidColorBrush x:Key="LightBackColor" Color="Yellow"/>
</Application.Resources>

MainPage.xaml.cs

これをマイページ入れないといけない。コピペでいいんだけどね。

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);

    if ((Visibility)App.Current.Resources["PhoneDarkThemeVisibility"] == System.Windows.Visibility.Visible)
    {
        this.Foreground = App.Current.Resources["DarkForeColor"] as Brush;
        LayoutRoot.Background = App.Current.Resources["DarkBackColor"] as Brush;
    }
    else
    {
        this.Foreground = App.Current.Resources["LightForeColor"] as Brush;
        LayoutRoot.Background = App.Current.Resources["LightBackColor"] as Brush;
    }
}

Silverlightでは最上位の PhoneApplicationPage の Foregroundを設定すると、その後に配置したコントロールのForeGroundは設定しない限り、上位のPhoneApplicationPageのForeground設定を使います。なので、Foregroundはこの1か所で基本的にはOK。

「地底人」のTextBlockには色設定は入れてません。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Name="textBlock1" Text="地底人" FontSize="72" />
</Grid>

MainPage.xal

このままだと、画面デザインの時に困るので軽く適応。

<phone:PhoneApplicationPage
x:Class="PhoneApp97.MainPage"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource DarkForeColor}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<Grid x:Name="LayoutRoot" Background="{StaticResource DarkBackColor}">

尚...

ただし、タイトルについては、あらかじめテーマ設定がされているので、その中で色が付けれられてしまっています。なので、そこも変えるなら変えないと。

MainPage.xaml.cs

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
base.OnNavigatedTo(e);
if ((Visibility)App.Current.Resources["PhoneDarkThemeVisibility"] == System.Windows.Visibility.Visible)
{
this.Foreground = App.Current.Resources["DarkForeColor"] as Brush;
LayoutRoot.Background = App.Current.Resources["DarkBackColor"] as Brush;
        ApplicationTitle.Foreground = App.Current.Resources["DarkForeColor"] as Brush;
        PageTitle.Foreground = App.Current.Resources["DarkForeColor"] as Brush;
    }
else
{
this.Foreground = App.Current.Resources["LightForeColor"] as Brush;
LayoutRoot.Background = App.Current.Resources["LightBackColor"] as Brush;
        ApplicationTitle.Foreground = App.Current.Resources["LightForeColor"] as Brush;
        PageTitle.Foreground = App.Current.Resources["LightForeColor"] as Brush;
    }
}

MainPage.xaml

スマートじゃないですね。いまいち。

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

Additional resources