アプリケーションのシステムテーマの変更に応答する Xamarin.FormsRespond to system theme changes in Xamarin.Forms applications

サンプルのダウンロードサンプルのダウンロードDownload Sample Download the sample

通常、デバイスには明るいテーマとダークテーマが含まれており、それぞれがオペレーティングシステムレベルで設定できるさまざまな外観設定を参照しています。Devices typically include light and dark themes, which each refer to a broad set of appearance preferences that can be set at the operating system level. アプリケーションはこれらのシステムテーマを尊重し、システムテーマが変更されたときに直ちに応答する必要があります。Applications should respect these system themes, and respond immediately when the system theme changes.

システムテーマは、デバイスの構成によっては、さまざまな理由で変更される可能性があります。The system theme may change for a variety of reasons, depending on the device configuration. これには、ユーザーによって明示的に変更されたシステムテーマが含まれ、時刻によって変化します。また、低光などの環境要因によって変化します。This includes the system theme being explicitly changed by the user, it changing due to the time of day, and it changing due to environmental factors such as low light.

Xamarin.Formsアプリケーションは、マークアップ拡張機能を使用してリソースを消費することによって、システムテーマの変更に応答でき AppThemeBinding SetAppThemeColor ます。また、およびの拡張メソッドも対象と SetOnAppTheme<T> なります。 applications can respond to system theme changes by consuming resources with the AppThemeBinding markup extension, and the SetAppThemeColor and SetOnAppTheme<T> extension methods.

重要

システムテーマの変更への対応は、現在試験段階であり、フラグを設定することによってのみ使用でき AppTheme_Experimental ます。Responding to a system theme change is currently experimental, and can only be used by setting the AppTheme_Experimental flag. 詳細については、「試験的なフラグ」を参照してください。For more information, see Experimental Flags.

Xamarin.Formsシステムテーマの変更に応答するには、次の要件を満たす必要があります。The following requirements must be met for Xamarin.Forms to respond to a system theme change:

  • Xamarin.Forms4.6.0.967 以上。 4.6.0.967 or greater.
  • iOS 13 以上。iOS 13 or greater.
  • Android 10 (API 29) 以上。Android 10 (API 29) or greater.
  • UWP ビルド14393以上。UWP build 14393 or greater.

次のスクリーンショットは、iOS および Android の明るいシステムテーマとダークシステムテーマのテーマが適用されたページを示しています。The following screenshots show themed pages, for light and dark system themes on iOS and Android:

IOS および Android でのテーマ付きアプリのメインページのスクリーンショット テーマが適用されたアプリの詳細ページのスクリーンショット (IOS と Android)Screenshot of the main page of a themed app, on iOS and Android Screenshot of the detail page of a themed app, on iOS and Android

テーマリソースの定義と使用Define and consume theme resources

ライトおよびダークテーマのリソースは、 AppThemeBinding マークアップ拡張機能と、および拡張メソッドを使用して使用でき SetAppThemeColor SetOnAppTheme<T> ます。Resources for light and dark themes can be consumed with the AppThemeBinding markup extension, and the SetAppThemeColor and SetOnAppTheme<T> extension methods. これらの方法では、現在のシステムテーマの値に基づいてリソースが自動的に適用されます。With these approaches, resources are automatically applied based on the value of the current system theme. また、これらのリソースを使用するオブジェクトは、アプリの実行中にシステムテーマが変更されると、自動的に更新されます。In addition, objects that consume these resources are automatically updated if the system theme changes while an app is running.

AppThemeBinding のマークアップ拡張機能AppThemeBinding markup extension

AppThemeBindingマークアップ拡張機能を使用すると、現在のシステムテーマに基づいて、イメージや色などのリソースを使用できます。The AppThemeBinding markup extension enables you to consume a resource, such as an image or color, based on the current system theme:

<ContentPage ...>
    <StackLayout Margin="20">
        <Label Text="This text is green in light mode, and red in dark mode."
               TextColor="{AppThemeBinding Light=Green, Dark=Red}" />
        <Image Source="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}" />
    </StackLayout>
</ContentPage>

この例では、デバイスが明るいテーマを使用している場合、最初のテキストの色 Label が緑色に設定されています。また、デバイスがダークテーマを使用している場合は赤に設定されます。In this example, the text color of the first Label is set to green when the device is using its light theme, and is set to red when the device is using its dark theme. 同様に、は、 Image 現在のシステムテーマに基づいて異なるイメージファイルを表示します。Similarly, the Image displays a different image file based upon the current system theme.

また、で定義されているリソースは、 ResourceDictionary StaticResource マークアップ拡張機能で使用できます。In addition, resources defined in a ResourceDictionary can be consumed with the StaticResource markup extension:

<ContentPage ...>
    <ContentPage.Resources>

        <!-- Light colors -->
        <Color x:Key="LightPrimaryColor">WhiteSmoke</Color>
        <Color x:Key="LightSecondaryColor">Black</Color>

        <!-- Dark colors -->
        <Color x:Key="DarkPrimaryColor">Teal</Color>
        <Color x:Key="DarkSecondaryColor">White</Color>

        <Style x:Key="ButtonStyle"
               TargetType="Button">
            <Setter Property="BackgroundColor"
                    Value="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}" />
            <Setter Property="TextColor"
                    Value="{AppThemeBinding Light={StaticResource LightSecondaryColor}, Dark={StaticResource DarkSecondaryColor}}" />
        </Style>

    </ContentPage.Resources>

    <Grid BackgroundColor="{AppThemeBinding Light={StaticResource LightPrimaryColor}, Dark={StaticResource DarkPrimaryColor}}">
      <Button Text="MORE INFO"
              Style="{StaticResource ButtonStyle}" />
    </Grid>    
</ContentPage>    

この例では、の背景色 Grid とスタイルは、 Button デバイスが明るいテーマとダークテーマのどちらを使用しているかに基づいて変化します。In this example, the background color of the Grid and the Button style changes based on whether the device is using its light theme or dark theme.

マークアップ拡張機能の詳細については AppThemeBinding 、「 AppThemeBinding markup extension」を参照してください。For more information about the AppThemeBinding markup extension, see AppThemeBinding markup extension.

拡張メソッドExtension methods

Xamarin.FormsSetAppThemeColorオブジェクトが SetOnAppTheme<T> VisualElement システムテーマの変更に応答できるようにするおよび拡張メソッドを含みます。 includes SetAppThemeColor and SetOnAppTheme<T> extension methods that enable VisualElement objects to respond to system theme changes.

SetAppThemeColorメソッドを使用すると、現在の Color システムテーマに基づいてターゲットプロパティに設定されるオブジェクトを指定できます。The SetAppThemeColor method enables Color objects to be specified that will be set on a target property based on the current system theme:

Label label = new Label();
label.SetAppThemeColor(Label.TextColorProperty, Color.Green, Color.Red);

この例では、デバイスが明るいテーマを使用している場合、のテキストの色 Label は緑色に設定されており、デバイスがダークテーマを使用している場合は赤に設定されます。In this example, the text color of the Label is set to green when the device is using its light theme, and is set to red when the device is using its dark theme.

SetOnAppTheme<T>メソッドを使用すると、 T 現在のシステムテーマに基づいてターゲットプロパティに設定される型のオブジェクトを指定できます。The SetOnAppTheme<T> method enables objects of type T to be specified that will be set on a target property based on the current system theme:

Image image = new Image();
image.SetOnAppTheme<FileImageSource>(Image.SourceProperty, "lightlogo.png", "darklogo.png");

この例では、 Image デバイスがライトテーマを使用している lightlogo.png ときと、 darklogo.png デバイスがダークテーマを使用しているときにが表示されます。In this example, the Image displays lightlogo.png when the device is using its light theme, and darklogo.png when the device is using its dark theme.

現在のシステムテーマの検出Detect the current system theme

現在のシステムテーマを検出するには、プロパティの値を取得し Application.RequestedTheme ます。The current system theme can be detected by getting the value of the Application.RequestedTheme property:

OSAppTheme currentTheme = Application.Current.RequestedTheme;

プロパティは、 RequestedTheme OSAppTheme 列挙体のメンバーを返します。The RequestedTheme property returns an OSAppTheme enumeration member. OSAppTheme 列挙体を使って、次のメンバーを定義できます。The OSAppTheme enumeration defines the following members:

  • Unspecified。デバイスが指定されていないテーマを使用していることを示します。Unspecified, which indicates that the device is using an unspecified theme.
  • Light。デバイスがライトテーマを使用していることを示します。Light, which indicates that the device is using its light theme.
  • Dark。デバイスがダークテーマを使用していることを示します。Dark, which indicates that the device is using its dark theme.

現在のユーザーのテーマを設定するSet the current user theme

アプリケーションで使用されるテーマは、 Application.UserAppTheme OSAppTheme 現在どのシステムテーマが動作しているかに関係なく、型のプロパティを使用して設定できます。The theme used by the application can be set with the Application.UserAppTheme property, which is of type OSAppTheme, regardless of which system theme is currently operational:

Application.Current.UserAppTheme = OSAppTheme.Dark;

この例では、アプリケーションは、現在どのシステムテーマが動作しているかに関係なく、システムのダークモードで定義されたテーマを使用するように設定されています。In this example, the application is set to use the theme defined for the system dark mode, regardless of which system theme is currently operational.

注意

プロパティをに設定すると、 UserAppTheme OSAppTheme.Unspecified オペレーティングシステムのテーマが既定値に設定されます。Set the UserAppTheme property to OSAppTheme.Unspecified to default to the operational system theme.

テーマの変更に反応するReact to theme changes

デバイスのシステムテーマは、デバイスの構成方法に応じて、さまざまな理由で変更される可能性があります。The system theme on a device may change for a variety of reasons, depending on how the device is configured. Xamarin.Formsアプリは、イベントを処理することによってシステムテーマが変更されたときに通知を受けることができ Application.RequestedThemeChanged ます。 apps can be notified when the system theme changes by handling the Application.RequestedThemeChanged event:

Application.Current.RequestedThemeChanged += (s, a) =>
{
    // Respond to the theme change
};

AppThemeChangedEventArgsイベントに付随するオブジェクトに RequestedThemeChanged は、型のという名前のプロパティが1つあり RequestedTheme OSAppTheme ます。The AppThemeChangedEventArgs object, which accompanies the RequestedThemeChanged event, has a single property named RequestedTheme, of type OSAppTheme. このプロパティは、要求されたシステムテーマを検出するために調べることができます。This property can be examined to detect the requested system theme.