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ı, AppThemeBinding işaretleme uzantısını ve SetAppThemeColor ile SetAppTheme<T> uzantı yöntemlerini kullanarak kaynakları tüketmek suretiyle sistem teması değişikliklerine yanıt verebilir.

Uyarı

.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 AppThemeBinding işaretleme uzantısı ve SetAppThemeColor ve SetAppTheme<T> uzantı yöntemleriyle 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ı

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

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

• Default, varsayılan olarak kullanılmak üzere ayarladığınız object türündedir.
• Light, cihaz ışık temasını kullandığında kullanılacak kaynağa ayarladığınız object türündedir.
• Dark, cihazın koyu temayı kullanırken kullanılacak kaynağa yönelik ayarladığınız türdeki object şeklindedir.
• Value, object türündeki biçimlendirme uzantısı tarafından hâlihazırda kullanılmakta olan kaynağı döndürür.

Uyarı

XAML ayrıştırıcısı, AppThemeBindingExtension sınıfının AppThemeBindingolarak kısaltılmasına olanak tanır.

Default özelliği, AppThemeBindingExtensionöğesinin içerik özelliğidir. Bu nedenle, kıvırcık ayraçlarla ifade edilen XAML işaretleme ifadeleri için, ilk bağımsız değişken olması şartıyla ifadenin Default= bölümünü kaldırabilirsiniz.

Aşağıdaki XAML örneği, AppThemeBinding işaretleme uzantısının 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, Image, geçerli sistem temasına bağlı olarak farklı bir görüntü dosyası gösterir.

ResourceDictionary içinde tanımlanan kaynaklar, StaticResource işaretleme uzantısıyla bir AppThemeBinding 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 veya koyu temasını kullanmasına bağlı olarak Grid ve Button stilinin arka plan rengi değişir.

Buna ek olarak, ResourceDictionary içinde tanımlanan kaynaklar, DynamicResource işaretleme uzantısıyla AppThemeBinding içinde 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 SetAppThemeColor ve SetAppTheme<T> uzantı yöntemleri içerirVisualElement.

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 lightlogo.png cihaz koyu temasını kullandığında görüntülenirdarklogo.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. AppTheme numaralandırması 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 çalıştığına bakılmaksızın, Application.UserAppTheme türünde olan AppTheme ö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.

Uyarı

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 Application.RequestedThemeChanged olayını işleyerek bilgilendirilebilir:

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

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

Önemli

Android'deki tema değişikliklerine yanıt vermek için MainActivity sınıfınızın Activity özniteliğinde ConfigChanges.UiMode bayrağına sahip olması gerekir. Visual Studio proje şablonlarıyla oluşturulan .NET MAUI uygulamaları otomatik olarak bu bayrağı içerir.