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;
    }
}

image image

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="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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="
http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://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}">

image

尚…

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

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>

image image

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

Comments (0)

Skip to main content