Reagieren auf Systemdesignänderungen in Xamarin.Forms Anwendungen

Artikel
07/13/2023

Geräte enthalten in der Regel helle und dunkle Designs, die jeweils auf eine breite Reihe von Darstellungseinstellungen verweisen, die auf Betriebssystemebene festgelegt werden können. Anwendungen sollten diese Systemdesigns berücksichtigen und sofort reagieren, wenn sich das Systemdesign ändert.

Das Systemdesign kann sich je nach Gerätekonfiguration aus verschiedenen Gründen ändern. Dazu gehört, dass das Systemdesign vom Benutzer explizit geändert wird, es sich aufgrund der Tageszeit ändert und es sich aufgrund von Umgebungsfaktoren wie schlechtem Licht ändert.

Xamarin.Forms Anwendungen können auf Änderungen des Systemdesigns reagieren, indem sie Ressourcen mit der AppThemeBinding Markuperweiterung und den SetAppThemeColor Erweiterungsmethoden und SetOnAppTheme<T> verbrauchen.

Die folgenden Anforderungen müssen erfüllt Xamarin.Forms sein, um auf eine Änderung des Systemdesigns zu reagieren:

Xamarin.Forms 4.6.0.967 oder höher.
iOS 13 oder höher.
Android 10 (API 29) oder höher.
UWP-Build 14393 oder höher.
macOS 10.14 oder höher.

Die folgenden Screenshots zeigen Themenseiten für helle und dunkle Systemdesigns unter iOS und Android:

Definieren und Nutzen von Designressourcen

Ressourcen für helle und dunkle Designs können mit der AppThemeBinding Markuperweiterung und den SetAppThemeColor Erweiterungsmethoden genutzt SetOnAppTheme<T> werden. Bei diesen Ansätzen werden Ressourcen automatisch basierend auf dem Wert des aktuellen Systemdesigns angewendet. Darüber hinaus werden Objekte, die diese Ressourcen nutzen, automatisch aktualisiert, wenn sich das Systemdesign ändert, während eine App ausgeführt wird.

Markuperweiterung AppThemeBinding

Mit der AppThemeBinding Markuperweiterung können Sie eine Ressource, z. B. ein Bild oder eine Farbe, basierend auf dem aktuellen Systemdesign nutzen:

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

In diesem Beispiel wird die Textfarbe der ersten Label auf Grün festgelegt, wenn das Gerät sein helles Design verwendet, und wird auf rot festgelegt, wenn das Gerät sein dunkles Design verwendet. Image In ähnlicher Weise wird eine andere Bilddatei basierend auf dem aktuellen Systemdesign angezeigt.

Darüber hinaus können in einem ResourceDictionary definierte Ressourcen mit der StaticResource Markuperweiterung genutzt werden:

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

In diesem Beispiel ändert sich die Hintergrundfarbe des Grid und des Button Stils, je nachdem, ob das Gerät sein helles oder dunkles Design verwendet.

Weitere Informationen zur AppThemeBinding Markuperweiterung finden Sie unter AppThemeBinding-Markuperweiterung.

Erweiterungsmethoden

Xamarin.Forms enthält SetAppThemeColor - und SetOnAppTheme<T> Erweiterungsmethoden, mit denen VisualElement Objekte auf Änderungen des Systemdesigns reagieren können.

Mit SetAppThemeColor der -Methode können Color Objekte angegeben werden, die basierend auf dem aktuellen Systemdesign für eine Zieleigenschaft festgelegt werden:

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

In diesem Beispiel wird die Textfarbe des Label auf Grün festgelegt, wenn das Gerät sein helles Design verwendet, und wird auf rot festgelegt, wenn das Gerät sein dunkles Design verwendet.

Mit SetOnAppTheme<T> der -Methode können Objekte vom Typ T angegeben werden, die basierend auf dem aktuellen Systemdesign für eine Zieleigenschaft festgelegt werden:

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

In diesem Beispiel wird angezeigt Imagelightlogo.png , wenn das Gerät sein helles Design verwendet und darklogo.png wenn das Gerät sein dunkles Design verwendet.

Erkennen des aktuellen Systemdesigns

Das aktuelle Systemdesign kann erkannt werden, indem der Wert der Application.RequestedTheme Eigenschaft abgerufen wird:

OSAppTheme currentTheme = Application.Current.RequestedTheme;

Die RequestedTheme -Eigenschaft gibt ein Enumerationsmember OSAppTheme zurück. Die OSAppTheme-Enumeration definiert die folgenden Member:

Unspecified, was angibt, dass das Gerät ein nicht angegebenes Design verwendet.
Light, was angibt, dass das Gerät sein lichtes Design verwendet.
Dark, was angibt, dass das Gerät sein dunkles Design verwendet.

Festlegen des aktuellen Benutzerdesigns

Das von der Anwendung verwendete Design kann mit der Application.UserAppTheme -Eigenschaft vom Typ OSAppThemefestgelegt werden, unabhängig davon, welches Systemdesign derzeit betriebsbereit ist:

Application.Current.UserAppTheme = OSAppTheme.Dark;

In diesem Beispiel ist die Anwendung so festgelegt, dass sie das design verwendet, das für den dunklen Systemmodus definiert ist, unabhängig davon, welches Systemdesign derzeit betriebsbereit ist.

Hinweis

Legen Sie die UserAppTheme -Eigenschaft auf OSAppTheme.Unspecified auf standard auf das Betriebssystemdesign fest.

React zu Designänderungen

Das Systemdesign auf einem Gerät kann sich aus verschiedenen Gründen ändern, je nachdem, wie das Gerät konfiguriert ist. Xamarin.Forms Apps können benachrichtigt werden, wenn sich das Systemdesign ändert, indem sie das Application.RequestedThemeChanged Ereignis behandeln:

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

Das AppThemeChangedEventArgs -Objekt, das das RequestedThemeChanged Ereignis begleitet, verfügt über eine einzelne Eigenschaft mit dem Namen RequestedTheme, vom Typ OSAppTheme. Diese Eigenschaft kann untersucht werden, um das angeforderte Systemdesign zu erkennen.

Wichtig

Um auf Designänderungen unter Android reagieren zu können, müssen Sie das ConfigChanges.UiMode Flag in das Activity Attribut Ihrer MainActivity Klasse einschließen.