エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone のテーマ リソースを適用する方法

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

 

テーマは、Windows Phone デバイスの視覚的要素をカスタマイズする際に使用する一連のリソースです。テーマによって、コントロールおよび UI 要素が Windows Phone アプリケーション間で一貫して表示されます。このトピックでは、テーマ リソースを使用して、テーマの背景とアクセント カラーをプログラムで特定するアプリケーションの作成方法について説明します。テーマ リソースの使用の詳細については、「Windows Phone のテーマ」を参照してください。

このトピックは、次のセクションで構成されています。

 

ユーザーがデバイスの [設定] メニューでシステム全体のテーマを有効にした場合、アプリケーションではテーマに関係する色だけが変更されます。フォントとコントロールのサイズは変更されません。たとえば、ユーザーがテーマの設定ページでアクセント カラーを紫色に設定した場合、アプリケーションでは該当するリソース ブラシで構成された UI 要素だけが紫色に変更されます。

メモメモ:

別のテーマを選択したときにアプリケーションが休止状態になっていると、新しいテーマはアプリケーションを次回起動するまで反映されません。

次のイメージに、このトピックで作成したアプリケーションがテーマの変更にどのように適応するかを示します。

THEME_ResourcesHowTo

左から右に、このイメージは背景が [] でアクセント カラーが [] の場合のアプリケーションを示しています。[設定] ページで [テーマ] を選択し、[テーマ] ページを開きます。[テーマ] ページで、テーマの背景を [] に、アクセント カラーを [マンゴー] に変更します。アプリケーションを再起動すると、新しいテーマの設定が反映されます。

この手順では、アプリケーションを作成し、アプリケーションとページのタイトルを設定して、四角形と 2 つの texBlock コントロールを追加します。各コントロールでは、テーマ リソースを使用するための異なる手法を示します。

アプリケーションを準備するには

  1. Visual Studio で、[ファイル] メニューの [新しいプロジェクト] をクリックして新しいプロジェクトを作成します。

  2. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開し、Windows Phone のテンプレートを選択します。

  3. Windows Phone アプリ のテンプレートを選択します。[名前] ボックスに選択した名前を入力します。

  4. [OK] をクリックします。Windows Phone のプラットフォームを選択するダイアログ ボックスが表示されます。

  5. [Windows Phone の対象バージョン] メニューで、Windows Phone OS 7.1 が選択されていることを確認します。

  6. [OK] をクリックします。新しいプロジェクトが作成され、Visual Studio のデザイナー ウィンドウに MainPage.xaml が表示されます。

  7. MainPage.xaml で、LayoutRoot という名前のグリッドを次のコードで置き換えます。

        <!--LayoutRoot is the root grid where all page content is placed-->
        <Grid x:Name="LayoutRoot" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
    
            <!--TitlePanel contains the name of the application and page title-->
            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="THEME RESOURCES" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="example" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>
    
            <!--ContentPanel - place additional content here-->
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    
            </Grid>
        </Grid>
    
    

リソースを適用するには

  1. MainPage.xaml で、ContentPanel という名前の Grid 内に次のコードを追加します。

                <Rectangle 
                    Height="100" 
                    HorizontalAlignment="Left" 
                    Margin="12,33,0,0" 
                    Name="rectangle1" 
                    Stroke="{StaticResource PhoneForegroundBrush}" 
                    StrokeThickness="1" 
                    VerticalAlignment="Top" 
                    Width="200" 
                    Fill="{StaticResource PhoneAccentBrush}" />
    
    

    このコードでは、ページの左上の部分に四角形を作成します。Fill 属性で StaticResource マークアップを使用して、PhoneAccentBrush というリソース ブラシを指定していることに注意してください。このブラシでは、システム全体のテーマの変更に合わせて四角形の色を変更できます。たとえば、ユーザーが電話の設定メニューでアクセント カラーを変更すると、四角形がその色に合わせて変更されます。

  2. MainPage.xaml で、ContentPanel という名前の Grid 内の四角形の下に、次のコードを追加します。

                <TextBlock 
                    Height="45" 
                    HorizontalAlignment="Left" 
                    Margin="20,154,0,0" 
                    Name="textBlock1" 
                    Text="background =" 
                    VerticalAlignment="Top" 
                    Width="400" 
                    FontFamily="{StaticResource PhoneFontFamilySemiLight}" 
                    FontSize="{StaticResource PhoneFontSizeLarge}"/>
    
    

    このコードでは、四角形の下に配置される TextBlock コントロールを textBlock1 という名前で作成します。StaticResource マークアップは FontFamily 属性と FontSize 属性に適用されています。TextBlock のテキストは、フォントが PhoneFontFamilySemiLight (Segoe WP SemiLight)、フォント サイズが PhoneFontSizeLarge (32) に設定されます。リソース定義の詳細については、「Windows Phone のテーマ リソース」を参照してください。

  3. MainPage.xaml で、ContentPanel という名前の Grid 内の textBlock1 の下に、次のコードを追加します。

                <TextBlock 
                    Height="35" 
                    HorizontalAlignment="Left" 
                    Margin="21,205,0,0" 
                    Name="textBlock2" 
                    Text="accent color = " 
                    VerticalAlignment="Top" 
                    Width="400" 
                    Style="{StaticResource PhoneTextAccentStyle}"/>
    
    

    このコードでは、2 番目の TextBlocktextBlock2 という名前で作成し、PhoneTextAccentStyle というスタイル リソースを適用します。このテーマ リソースでは、フォント (PhoneFontFamilySemiBold)、フォント サイズ (PhoneFontSizeNormal)、および前景 (PhoneAccentBrush) を適用します。システム全体のテーマが導入されると、電話のアクセント ブラシによって TextBlock のテキストの色が変更されます。

テーマの背景とアクセント カラーは、現在のアプリケーション リソースとして使用できます。このセクションでは、PhoneDarkThemeVisibility リソースと PhoneAccentColor リソースを使用して、テーマの背景とアクセント カラーをそれぞれ特定します。

メモメモ:

XNA Framework ベースの Windows Phone アプリケーションは、このセクションで説明するように、現在のアプリケーション オブジェクトにアクセスしてテーマ リソースを使用できます。使用可能なテーマ リソースの詳細については、「Windows Phone のテーマ リソース」を参照してください。

テーマの背景を特定するには

  • メイン ページの分離コード ファイル MainPage.xaml で、MainPage コンストラクターの InitializeComponent の呼び出しの下に、次のコードを追加します。

            // Determine the visibility of the dark background.
            Visibility darkBackgroundVisibility = 
                (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
    
            // Write the theme background value.
            if (darkBackgroundVisibility == Visibility.Visible)
            {
                textBlock1.Text = "background = dark";
            }
            else
            {
                textBlock1.Text = "background = light";
            }
    
    

    このコードは、アプリケーションのリソース設定から、現在のテーマの背景を特定する方法を示しています。ここでは、現在のテーマで使用されている背景の種類を特定し、それを textBlock1Text プロパティに書き込みます。

テーマのアクセント カラーを特定するには

  • MainPage.xaml で、MainPage コンストラクターの前の手順で追加したコードの下に、次のコードを追加します。

            // Determine the accent color.
            Color currentAccentColorHex = 
                (Color)Application.Current.Resources["PhoneAccentColor"];
    
            string currentAccentColor = "";
    
            switch (currentAccentColorHex.ToString())
            {
                case "#FF1BA1E2": currentAccentColor = "blue"; break;
    
                case "#FFA05000": currentAccentColor = "brown"; break;
    
                case "#FF339933": currentAccentColor = "green"; break;
    
                case "#FFE671B8": currentAccentColor = "pink"; break;
    
                case "#FFA200FF": currentAccentColor = "purple"; break;
    
                case "#FFE51400": currentAccentColor = "red"; break;
    
                case "#FF00ABA9": currentAccentColor = "teal (viridian)"; break;
    
                // Lime changed to #FFA2C139 in Windows Phone OS 7.1.
                case "#FF8CBF26": 
                case "#FFA2C139": currentAccentColor = "lime"; break;
    
                // Magenta changed to # FFD80073 in Windows Phone OS 7.1.
                case "#FFFF0097": 
                case "#FFD80073": currentAccentColor = "magenta"; break;
    
                // #FFF9609 (previously orange) is named mango in Windows Phone OS 7.1.
                case "#FFF09609": currentAccentColor = "mango (orange)"; break;
    
                // Mobile operator or hardware manufacturer color
                default: currentAccentColor = "custom eleventh color"; break;
            }
    
            // Write the current accent color.
            textBlock2.Text = "accent color = " + currentAccentColor;
    
    

    このコードは、アプリケーションのテーマ リソースから、アクセント カラーを特定する方法を示しています。ここでは、アクセント カラーの値を特定し、switch/case ステートメントを使用して textBlock2Text プロパティにわかりやすい名前を割り当てます。

このセクションでは、テーマの背景とアクセント カラーの変更前と変更後にアプリケーションを実行します。

アプリケーションをテストするには

  1. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これにより、エミュレーター ウィンドウが開き、アプリケーションが起動します。四角形と 2 つの TextBlock コントロールが画面に表示されます。四角形はシステムの現在のテーマと同じ色になり、2 つのテキスト ブロックには異なるフォントとフォント サイズが適用されます。また、2 番目の TextBlock のテキストの色は、前景に PhoneAccentBrush が適用されているため、システムの現在のテーマと同じになります。

  2. テーマの背景とアクセント カラーを変更します。[スタート] で [アプリ一覧] にスワイプし、[設定] をタップします。[設定] から [テーマ] をタップし、別の背景とアクセント カラーを選択します。

  3. アプリケーションを再起動し、新しいテーマに適応しているかを確認します。次のイメージに、このセクションの手順を示します。

    THEME_ResourcesHowTo

表示:
© 2014 Microsoft