Svara på ändringar i systemtemat

Bläddra i exemplet

Enheter innehåller vanligtvis ljusa och mörka teman, som var och en refererar till en bred uppsättning utseendeinställningar som kan anges på operativsystemnivå. Appar bör respektera dessa systemteman och svara direkt när systemtemat ändras.

Systemtemat kan ändras av olika orsaker, beroende på enhetskonfigurationen. Detta inkluderar systemtemat som uttryckligen ändras av användaren, det ändras på grund av tiden på dagen och det ändras på grund av miljöfaktorer som svagt ljus.

.NET Multi-platform App UI-appar (.NET MAUI) kan svara på ändringar i systemtemat genom att använda resurser med AppThemeBinding markup-tillägget och extension-metoderna SetAppThemeColor och SetAppTheme<T>.

Följande skärmbild visar temasidor för det ljusa systemtemat på iOS och det mörka systemtemat på Android:

Definiera och använda temaresurser

Resurser för ljusa och mörka teman kan användas med markeringstillägget AppThemeBinding, och utökningsmetoderna SetAppThemeColor och SetAppTheme<T>. Med dessa metoder tillämpas resurser automatiskt baserat på värdet för det aktuella systemtemat. Dessutom uppdateras objekt som använder dessa resurser automatiskt om systemtemat ändras medan en app körs.

AppThemeBinding-markeringstillägg

Med AppThemeBinding markeringstillägget kan du använda en resurs, till exempel en bild eller färg, baserat på det aktuella systemtemat.

Det AppThemeBinding markeringstillägget stöds av klassen AppThemeBindingExtension, som definierar följande egenskaper:

• Default, av typen object, som du anger till den resurs som ska användas som standard.
• Light, av typen object, som du anger till den resurs som ska användas när enheten använder sitt ljustema.
• Dark, av typen object, som du anger till den resurs som ska användas när enheten använder sitt mörka tema.
• Value, av typen object, som returnerar den resurs som för närvarande används av markupförlängningen.

Egenskapen Default är innehållsegenskapen för AppThemeBindingExtension. För XAML-markeringsuttryck som uttrycks med klammerparenteser kan du därför eliminera Default= del av uttrycket förutsatt att det är det första argumentet.

I följande XAML-exempel visas hur du använder markupförlängningen AppThemeBinding.

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

I det här exemplet är textfärgen för den första Label inställd på grön när enheten använder sitt ljustema och är inställd på rött när enheten använder sitt mörka tema. På samma sätt visas en annan bildfil baserat på det aktuella systemtemat Image .

Resurser som definieras i en ResourceDictionary kan användas i ett AppThemeBinding med markeringstillägget StaticResource :

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

I det här exemplet ändras bakgrundsfärgen för både Grid och Button beroende på om enheten använder sitt ljustema eller mörka tema.

Dessutom kan resurser som definierats i en ResourceDictionary också användas i ett AppThemeBinding med markeringstillägget DynamicResource :

<ContentPage ...>
    <ContentPage.Resources>
        <Color x:Key="Primary">DarkGray</Color>
        <Color x:Key="Secondary">HotPink</Color>
        <Color x:Key="Tertiary">Yellow</Color>
        <Style x:Key="labelStyle" TargetType="Label">
            <Setter Property="Padding" Value="5"/>
            <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Primary}}" />
            <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={DynamicResource Primary}, Dark={DynamicResource Secondary}}" />
        </Style>
    </ContentPage.Resources>
    <Label x:Name="myLabel"
           Style="{StaticResource labelStyle}"/>
</ContentPage>

Tilläggsmetoder

.NET MAUI innehåller SetAppThemeColor och SetAppTheme<T> tilläggsmetoder som gör det möjligt för VisualElement-objekt att svara på ändringar i systemtemat.

Metoden SetAppThemeColor gör det möjligt Color att ange objekt som ska anges på en målegenskap baserat på det aktuella systemtemat:

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

I det här exemplet sätts textfärgen på Label till grön när enheten använder sitt ljustema och till röd när enheten använder sitt mörka tema.

Metoden SetAppTheme<T> gör det möjligt att ange objekt av typen T som ska anges på en målegenskap baserat på det aktuella systemtemat:

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

I det här exemplet Image visas lightlogo.png när enheten använder sitt ljustema och darklogo.png när enheten använder sitt mörka tema.

Identifiera det aktuella systemtemat

Det aktuella systemtemat kan identifieras genom att hämta värdet för Application.RequestedTheme egenskapen:

AppTheme currentTheme = Application.Current.RequestedTheme;

Egenskapen RequestedTheme returnerar en AppTheme uppräkningsmedlem. Uppräkningen AppTheme definierar följande medlemmar:

• Unspecified, vilket anger att enheten använder ett ospecificerat tema.
• Light, vilket indikerar att enheten använder sitt ljustema.
• Dark, vilket indikerar att enheten använder sitt mörka tema.

Ange aktuellt användartema

Det tema som används av appen kan anges med Application.UserAppTheme egenskapen, som är av typen AppTheme, oavsett vilket systemtema som för närvarande används:

Application.Current.UserAppTheme = AppTheme.Dark;

I det här exemplet är appen inställd på att använda det tema som definierats för systemets mörka läge, oavsett vilket systemtema som för närvarande används.

Reagera på temaändringar

Systemtemat på en enhet kan ändras av olika orsaker, beroende på hur enheten är konfigurerad. .NET MAUI-appar kan meddelas när systemtemat ändras genom att hantera Application.RequestedThemeChanged händelsen:

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

Objektet AppThemeChangedEventArgs , som medföljer RequestedThemeChanged händelsen, har en enda egenskap med namnet RequestedTheme, av typen AppTheme. Den här egenskapen kan undersökas för att identifiera det begärda systemtemat.