このページは役に立ちましたか。
このページのコンテンツについての ご意見をお待ちしております
その他にご意見はありますか。
残り 1500 文字
エクスポート (0) 印刷
すべて展開

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

2012/02/09

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

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

注注:

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

このトピックでは、次の主な手順で、テーマ リソースを使用するアプリケーションの作成方法について説明します。

  1. テーマ リソースの適用

  2. テーマの背景およびアクセント カラーの決定

  3. アプリケーションのテスト

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

THEME_ResourcesHowTo

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

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

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

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

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

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

  4. [OK] をクリックします。[新しい Windows Phone アプリケーション] ウィンドウが表示されます。

  5. [ターゲットの Windows Phone のバージョン] メニューで、Windows Phone 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}"/>
    
    

    このコードは、四角形の下に配置される textBlock1 という名前の TextBlock コントロールを作成します。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}"/>
    
    

    このコードは、textBlock2 という名前の 2 番目の TextBlock を作成し、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 つのテキスト ブロックが適用されます。また、PhoneAccentBrush が前景に適用されているため、2 番目の TextBlock のテキスト色はシステムの現在のテーマと一致する色になることに注意してください。

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

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

    THEME_ResourcesHowTo

表示:
© 2015 Microsoft