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

#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には色設定は入れてません。

<!--ContentPanel - 追加コンテンツをここに入力します-->
<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">

    <!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
    <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

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"
Foreground="{StaticResource DarkForeColor}" />
<TextBlock x:Name="PageTitle" Text="ページ名" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"
           Foreground="{StaticResource DarkForeColor}" />
</StackPanel>

 

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