Aracılığıyla paylaş

Uygulama teması

  • Makale

Örneğe göz atın. Örneğe göz atın

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) uygulamaları, işaretleme uzantısını kullanarak stil değişikliklerine DynamicResource çalışma zamanında dinamik olarak yanıt verebilir. Bu işaretleme uzantısı, işaretleme uzantısına StaticResource benzer; bu uzantıda her ikisi de bir sözlük anahtarı kullanarak bir değerinden ResourceDictionarybir değer getirir. Ancak, işaretleme uzantısı tek bir sözlük araması gerçekleştirirken StaticResource , DynamicResource işaretleme uzantısı sözlük anahtarına bir bağlantı tutar. Bu nedenle, anahtarla ilişkili değer değiştirilirse, değişiklik öğesine VisualElementuygulanır. Bu, çalışma zamanı temalı uygulamaların .NET MAUI uygulamalarında uygulanmasını sağlar.

.NET MAUI uygulamasında çalışma zamanı temalı uygulama işlemi aşağıdaki gibidir:

  1. içindeki ResourceDictionaryher tema için kaynakları tanımlayın. Daha fazla bilgi için bkz . Tema tanımlama.
  2. Uygulamanın App.xaml dosyasında varsayılan temayı ayarlayın. Daha fazla bilgi için bkz . Varsayılan temayı ayarlama.
  3. İşaretlemeyi kullanarak DynamicResource uygulamadaki tema kaynaklarını kullanın. Daha fazla bilgi için bkz . Tema kaynaklarını kullanma.
  4. Çalışma zamanında tema yüklemek için kod ekleyin. Daha fazla bilgi için bkz . Çalışma zamanında tema yükleme.

Önemli

Uygulamanızın StaticResource çalışma zamanında temaları dinamik olarak değiştirmesi gerekmiyorsa işaretleme uzantısını kullanın. Uygulama çalışırken temaları değiştirmeyi düşünüyorsanız, kaynakların çalışma zamanında güncelleştirilmeye olanak tanıyan işaretleme uzantısını kullanın DynamicResource .

Aşağıdaki ekran görüntüsünde, açık tema kullanan iOS uygulaması ve koyu tema kullanan Android uygulaması ile temalı sayfalar gösterilmektedir:

Temalı bir uygulamanın ana sayfasının ekran görüntüsü.

Not

Çalışma zamanında bir temayı değiştirmek için XAML veya C# stil tanımlarının kullanılması gerekir ve CSS kullanılması mümkün değildir.

.NET MAUI ayrıca sistem teması değişikliklerine yanıt verme özelliğine sahiptir. Sistem teması, cihaz yapılandırmasına bağlı olarak çeşitli nedenlerle değişebilir. Buna kullanıcı tarafından açıkça değiştirilen sistem teması, günün saati nedeniyle değişen ve düşük ışık gibi çevresel faktörlerden dolayı değişen sistem teması dahildir. Daha fazla bilgi için bkz . Sistem teması değişikliklerini yanıtlama.

Tema tanımlama

Tema, içinde ResourceDictionarydepolanan kaynak nesneleri koleksiyonu olarak tanımlanır.

Aşağıdaki örnekte adlı LightThemeaçık tema için bir ResourceDictionary gösterilmektedir:

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="ThemingDemo.LightTheme">
    <Color x:Key="PageBackgroundColor">White</Color>
    <Color x:Key="NavigationBarColor">WhiteSmoke</Color>
    <Color x:Key="PrimaryColor">WhiteSmoke</Color>
    <Color x:Key="SecondaryColor">Black</Color>
    <Color x:Key="PrimaryTextColor">Black</Color>
    <Color x:Key="SecondaryTextColor">White</Color>
    <Color x:Key="TertiaryTextColor">Gray</Color>
    <Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary>

Aşağıdaki örnekte adlı DarkThemekoyu renkli tema için bir ResourceDictionary gösterilmektedir:

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="ThemingDemo.DarkTheme">
    <Color x:Key="PageBackgroundColor">Black</Color>
    <Color x:Key="NavigationBarColor">Teal</Color>
    <Color x:Key="PrimaryColor">Teal</Color>
    <Color x:Key="SecondaryColor">White</Color>
    <Color x:Key="PrimaryTextColor">White</Color>
    <Color x:Key="SecondaryTextColor">White</Color>
    <Color x:Key="TertiaryTextColor">WhiteSmoke</Color>
    <Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary>

Her ResourceDictionary biri, ResourceDictionary her biri aynı anahtar değerleri kullanan ilgili temalarını tanımlayan kaynaklar içerirColor. Kaynak sözlükleri hakkında daha fazla bilgi için bkz . Kaynak Sözlükleri.

Önemli

Yöntemini çağıran InitializeComponent her ResourceDictionarybiri için dosyanın arkasındaki bir kod gereklidir. Seçilen temayı temsil eden bir CLR nesnesinin çalışma zamanında oluşturulabilmesi için bu gereklidir.

Varsayılan temayı ayarlama

Bir uygulama, denetimlerin kullandıkları kaynaklar için değerlere sahip olması için varsayılan bir tema gerektirir. Varsayılan tema, temanın ResourceDictionary App.xaml içinde tanımlanan uygulama düzeyiyle ResourceDictionary birleştirilerek ayarlanabilir:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ThemingDemo.App">
    <Application.Resources>
        <ResourceDictionary Source="Themes/LightTheme.xaml" />
    </Application.Resources>
</Application>

Kaynak sözlüklerini birleştirme hakkında daha fazla bilgi için bkz . Birleştirilmiş kaynak sözlükleri.

Tema kaynaklarını kullanma

Bir uygulama, temayı temsil eden bir kaynakta depolanan bir ResourceDictionary kaynağı kullanmak istediğinde, bunu işaretleme uzantısıyla DynamicResource yapmalıdır. Bu, çalışma zamanında farklı bir tema seçilirse yeni temadaki değerlerin uygulanmasını sağlar.

Aşağıdaki örnekte, uygulamadaki tüm Label nesnelere uygulanabilecek üç stil gösterilmektedir:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ThemingDemo.App">
    <Application.Resources>

        <Style x:Key="LargeLabelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{DynamicResource SecondaryTextColor}" />
            <Setter Property="FontSize"
                    Value="30" />
        </Style>

        <Style x:Key="MediumLabelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{DynamicResource PrimaryTextColor}" />
            <Setter Property="FontSize"
                    Value="25" />
        </Style>

        <Style x:Key="SmallLabelStyle"
               TargetType="Label">
            <Setter Property="TextColor"
                    Value="{DynamicResource TertiaryTextColor}" />
            <Setter Property="FontSize"
                    Value="15" />
        </Style>

    </Application.Resources>
</Application>

Bu stiller, birden çok sayfa tarafından kullanılabilmesi için uygulama düzeyinde kaynak sözlüğünde tanımlanır. Her stil, işaretleme uzantısıyla DynamicResource tema kaynaklarını kullanır.

Bu stiller daha sonra sayfalar tarafından tüketilir:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ThemingDemo"
             x:Class="ThemingDemo.UserSummaryPage"
             Title="User Summary"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    ...
    <ScrollView>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="200" />
                <RowDefinition Height="120" />
                <RowDefinition Height="70" />
            </Grid.RowDefinitions>
            <Grid BackgroundColor="{DynamicResource PrimaryColor}">
                <Label Text="Face-Palm Monkey"
                       VerticalOptions="Center"
                       Margin="15"
                       Style="{StaticResource MediumLabelStyle}" />
                ...
            </Grid>
            <StackLayout Grid.Row="1"
                         Margin="10">
                <Label Text="This monkey reacts appropriately to ridiculous assertions and actions."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; Cynical but not unfriendly."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; Seven varieties of grimaces."
                       Style="{StaticResource SmallLabelStyle}" />
                <Label Text="  &#x2022; Doesn't laugh at your jokes."
                       Style="{StaticResource SmallLabelStyle}" />
            </StackLayout>
            ...
        </Grid>
    </ScrollView>
</ContentPage>

Bir tema kaynağı doğrudan tüketildiğinde, işaretleme uzantısıyla birlikte DynamicResource kullanılmalıdır. Ancak, işaretleme uzantısını DynamicResource kullanan bir stil kullanıldığında, işaretleme uzantısıyla birlikte StaticResource kullanılmalıdır.

Stil oluşturma hakkında daha fazla bilgi için bkz . XAML kullanan stil uygulamaları. İşaretlemeyi genişletme hakkında DynamicResource daha fazla bilgi için bkz . Dinamik stiller.

Çalışma zamanında tema yükleme

Çalışma zamanında bir tema seçildiğinde, bir uygulama şunları yapmalıdır:

  1. Geçerli temayı uygulamadan kaldırın. Bu, uygulama düzeyi ResourceDictionaryözelliğini temizleyerek MergedDictionaries elde edilir.
  2. Seçili temayı yükleyin. Bu, seçili temanın bir örneğini uygulama düzeyi ResourceDictionaryözelliğine MergedDictionaries ekleyerek elde edilir.

İşaretlemeyi uzantılı DynamicResource özellikleri ayarlayan tüm VisualElement nesneler, yeni tema değerlerini uygular. Bu durum, işaretleme uzantısının DynamicResource sözlük anahtarlarına bir bağlantı tutması nedeniyle oluşur. Bu nedenle, anahtarlarla ilişkili değerler değiştirildiğinde, değişiklikler nesnelere VisualElement uygulanır.

Örnek uygulamada, içeren kalıcı bir sayfa aracılığıyla bir Pickertema seçilir. Aşağıdaki kod, seçili tema değiştiğinde OnPickerSelectionChanged yürütülen yöntemini gösterir:

Aşağıdaki örnekte geçerli temayı kaldırma ve yeni bir tema yükleme gösterilmektedir:

ICollection<ResourceDictionary> mergedDictionaries = Application.Current.Resources.MergedDictionaries;
if (mergedDictionaries != null)
{
    mergedDictionaries.Clear();
    mergedDictionaries.Add(new DarkTheme());
}