AppTheme Resources

Met AppThemeObject en AppThemeColor u kunt themabewuste resources maken voor uw toepassing die automatisch worden bijgewerkt wanneer het apparaatthema wordt bijgewerkt.

De AppThemeObject en AppThemeColor objecten zijn themabewuste resources waarmee u gemakkelijker kunt werken met kleuren, afbeeldingen en andere resources die moeten worden gewijzigd, afhankelijk van het huidige thema van de app. Deze objecten zijn gebaseerd op de concepten van de AppThemeBinding die beschikbaar is in .NET MAUI en maken het gemakkelijker om met deze typen resources te werken in een ResourceDictionary.

Daarom moet u deze API's doorgaans gebruiken via de ThemeResource markeringsextensie in XAML.

Syntax

Inclusief de XAML-naamruimte

Als u de toolkit in XAML wilt gebruiken, moet de volgende xmlns worden toegevoegd aan uw pagina of weergave:

xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

Daarom volgt het volgende:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

</ContentPage>

Zou als volgt worden gewijzigd om de xmlns op te nemen:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">

</ContentPage>

AppThemeResource

Dit AppThemeObject is een algemeen themabewust object waarmee u alle object objecten voor de Lighten DarkDefault eigenschappen kunt instellen. Omdat AppThemeObject niet sterk getypeerd is, worden tijdens runtime de waarden van elke eigenschap geëvalueerd en gecast.

In het volgende voorbeeld ziet u hoe u AppThemeObject via een ResourceDictionary gebruikt:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:AppThemeObject Light="dark.png" Dark="light.png" x:Key="MyImageSource" />
    </ContentPage.Resources>

    <VerticalStackLayout>
        <Image Source="{toolkit:AppThemeResource MyImageSource}" />
    </VerticalStackLayout>
</ContentPage>

AppThemeColor

Het AppThemeColor is een gespecialiseerd, themabewust Color waarmee u een Color kunt instellen voor de eigenschappen Light, Dark en Default.

In het volgende voorbeeld ziet u hoe u AppThemeColor via een ResourceDictionary gebruikt:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:AppThemeColor Light="Red" Dark="Green" x:Key="LabelTextColor" />
    </ContentPage.Resources>

    <VerticalStackLayout>
        <Label TextColor="{toolkit:AppThemeResource LabelTextColor}" />
    </VerticalStackLayout>
</ContentPage>

AppThemeColor en AppThemeResource via stijlen gebruiken

Omdat we deze themabewuste resources in een ResourceDictionarykunnen gebruiken, betekent dit dat we ze ook kunnen gebruiken via een Style.

In het volgende voorbeeld ziet u hoe u via een StyleAppThemeColor gebruikt:

<ContentPage
    x:Class="CommunityToolkit.Maui.Sample.Pages.MyPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit">
    <ContentPage.Resources>
        <toolkit:AppThemeColor Light="Red" Dark="Green" x:Key="LabelTextColor" />

        <Style x:Key="Headline" TargetType="Label">
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="10" />
            <Setter Property="TextColor" Value="{toolkit:AppThemeResource LabelTextColor}" />
        </Style>
    </ContentPage.Resources>

    <VerticalStackLayout>
        <Label Style="{StaticResource Headline}" />
    </VerticalStackLayout>
</ContentPage>

Extensibility

Beide AppThemeObject en AppThemeColor overnemen van de abstracte klasse AppThemeObject<T>. Als u een meer sterk getypte resource nodig hebt die niet beschikbaar is in de .NET MAUI Community Toolkit, kunt u uw eigen overname maken.

Eigenschappen

In de onderstaande tabel worden de eigenschappen van AppThemeObject en AppThemeColor beschreven. Voor AppThemeColor, de typen van elke eigenschap zal zijn Color in plaats van object.

Examples

U vindt een voorbeeld van AppThemeResource in actie in de voorbeeldtoepassing .NET MAUI Community Toolkit.

API

U vindt de broncode voor AppThemeResource in de .NET MAUI Community Toolkit GitHub opslagplaats.