Sistem teması değişikliklerine yanıt verme

Örneğe göz atın

Cihazlar genellikle, her biri işletim sistemi düzeyinde ayarlanabilen geniş bir görünüm tercihleri kümesine başvuran açık ve koyu temalar içerir. Uygulamalar bu sistem temalarına saygı duymalı ve sistem teması değiştiğinde hemen yanıt vermelidir.

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.

.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) uygulamaları, işaretleme uzantısı ve ve SetAppTheme<T> uzantı yöntemleriyle AppThemeBinding kaynakları kullanarak sistem teması değişikliklerine SetAppThemeColor yanıt verebilir.

Not

.NET MAUI uygulamaları iOS 13 veya üzeri, Android 10 (API 29) veya üzeri, macOS 10.14 veya üzeri ve Windows 10 veya üzeri sürümlerde sistem teması değişikliklerine yanıt verebilir.

Aşağıdaki ekran görüntüsünde, iOS'taki ışık sistemi teması ve Android'de koyu sistem teması için temalı sayfalar gösterilmektedir:

Tema kaynaklarını tanımlama ve kullanma

Açık ve koyu temalar için kaynaklar işaretleme uzantısı ve SetAppThemeColor ve SetAppTheme<T> uzantı yöntemleriyle AppThemeBinding kullanılabilir. Bu yaklaşımlarla kaynaklar, geçerli sistem temasının değerine göre otomatik olarak uygulanır. Ayrıca, bir uygulama çalışırken sistem teması değişirse bu kaynakları kullanan nesneler otomatik olarak güncelleştirilir.

AppThemeBinding işaretleme uzantısı

İşaretlemeyi AppThemeBinding genişletme, geçerli sistem temasına göre görüntü veya renk gibi bir kaynak kullanmanıza olanak tanır.

biçimlendirme AppThemeBinding uzantısı, aşağıdaki özellikleri tanımlayan sınıfı tarafından AppThemeBindingExtension desteklenir:

• Default, varsayılan olarak kullanılacak kaynağa ayarladığınız türündedir object.
• Light, cihaz ışık temasını kullanırken kullanılacak kaynağa ayarladığınız türündedir object.
• Dark, cihaz koyu temasını kullanırken kullanılacak kaynağa ayarladığınız türündedir object.
• Value, türündeki objectbiçimlendirme uzantısı tarafından kullanılmakta olan kaynağı döndürür.

Not

XAML ayrıştırıcısı sınıfın AppThemeBindingExtension olarak AppThemeBindingkısaltılmasına izin verir.

Default özelliği, içerik özelliğidirAppThemeBindingExtension. Bu nedenle, küme ayraçlarıyla ifade edilen XAML işaretleme ifadeleri için, ilk bağımsız değişken olması koşuluyla ifadenin bölümünü ortadan kaldırabilirsiniz Default= .

Aşağıdaki XAML örneği, işaretleme uzantısının AppThemeBinding nasıl kullanılacağını gösterir:

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

Bu örnekte, ilkinin Label metin rengi, cihaz açık temasını kullanırken yeşil olarak, cihaz koyu temasını kullanırken ise kırmızı olarak ayarlanır. Benzer şekilde, geçerli Image sistem temasını temel alan farklı bir görüntü dosyası görüntüler.

içinde ResourceDictionary tanımlanan kaynaklar, işaretleme uzantısıyla bir AppThemeBinding StaticResource içinde kullanılabilir:

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

Bu örnekte, cihazın açık temasını mı yoksa koyu temasını mı kullandığına bağlı olarak ve Button stilinin arka plan rengi Grid değişir.

Buna ek olarak, içinde ResourceDictionary tanımlanan kaynaklar işaretleme uzantısıyla birlikte DynamicResource içinde AppThemeBinding de kullanılabilir:

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

Genişletme yöntemleri

.NET MAUI, nesnelerin sistem teması değişikliklerine yanıt vermesini sağlayan VisualElement ve SetAppTheme<T> uzantı yöntemleri içerirSetAppThemeColor.

yöntemi, SetAppThemeColor geçerli sistem temasına göre bir hedef özelliğinde ayarlanacak nesnelerin belirtilmesine olanak tanır Color :

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

Bu örnekte, cihazın metin rengi Label açık temasını kullanırken yeşil olarak, cihaz koyu temasını kullanırken ise kırmızı olarak ayarlanır.

yöntemi, SetAppTheme<T> geçerli sistem temasına göre bir hedef özelliğinde ayarlanacak türde T nesnelerin belirtilmesine olanak tanır:

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

Bu örnekte, Image cihaz açık temasını kullandığında ve darklogo.png cihaz koyu temasını kullandığında görüntülenirlightlogo.png.

Geçerli sistem temasını algılama

Geçerli sistem teması, özelliğin Application.RequestedTheme değeri alınarak algılanabilir:

AppTheme currentTheme = Application.Current.RequestedTheme;

RequestedTheme özelliği bir AppTheme numaralandırma üyesi döndürür. Numaralandırma AppTheme aşağıdaki üyeleri tanımlar:

• Unspecified, cihazın belirtilmeyen bir tema kullandığını gösterir.
• Light, cihazın ışık temasını kullandığını gösterir.
• Dark, cihazın koyu temasını kullandığını gösterir.

Geçerli kullanıcı temasını ayarlama

Uygulama tarafından kullanılan tema, şu anda hangi sistem temasının Application.UserAppTheme çalışır durumda olduğuna bakılmaksızın türünde AppThemeolan özelliğiyle ayarlanabilir:

Application.Current.UserAppTheme = AppTheme.Dark;

Bu örnekte uygulama, şu anda hangi sistem temasının çalışır durumda olduğuna bakılmaksızın sistem koyu modu için tanımlanan temayı kullanacak şekilde ayarlanmıştır.

Not

UserAppTheme özelliğini varsayılan olarak AppTheme.Unspecified işletim sistemi temasına ayarlayın.

Tema değişikliklerine tepki verme

Bir cihazdaki sistem teması, cihazın nasıl yapılandırıldığına bağlı olarak çeşitli nedenlerle değişebilir. .NET MAUI uygulamaları, sistem teması değiştiğinde olayı işleyerek Application.RequestedThemeChanged bilgilendirilebilir:

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

Olaya AppThemeChangedEventArgs eşlik eden nesnesinin RequestedThemeChanged türünde AppThemeadlı RequestedThemetek bir özelliği vardır. İstenen sistem temasını algılamak için bu özellik incelenebilir.

Önemli

Android'de tema değişikliklerini yanıtlamak için sınıfınızın MainActivity özniteliğine bayrağını ConfigChanges.UiMode içermesi Activity gerekir. Visual Studio proje şablonlarıyla oluşturulan .NET MAUI uygulamaları otomatik olarak bu bayrağı içerir.