Aracılığıyla paylaş

Uygulamalarda sistem teması değişikliklerine Xamarin.Forms yanıt verme

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.

Xamarin.Formsuygulamaları, işaretleme uzantısı ve ve SetOnAppTheme<T> uzantı yöntemleriyle AppThemeBinding kaynakları kullanarak sistem teması değişikliklerine SetAppThemeColor yanıt verebilir.

Sistem teması değişikliğine yanıt vermek için Xamarin.Forms aşağıdaki gereksinimlerin karşılanması gerekir:

  • Xamarin.Forms 4.6.0.967 veya üzeri.
  • iOS 13 veya üzeri.
  • Android 10 (API 29) veya üzeri.
  • UWP derlemesi 14393 veya üzeri.
  • macOS 10.14 veya üzeri.

Aşağıdaki ekran görüntüleri, iOS ve Android'de açık ve koyu sistem temaları için temalı sayfaları gösterir:

iOS ve Android'de temalı bir uygulamanın ana sayfasının ekran görüntüsüiOS ve Android'de temalı bir uygulamanın ayrıntı sayfasının ekran görüntüsü

Tema kaynaklarını tanımlama ve kullanma

Açık ve koyu temalar için kaynaklar işaretleme uzantısı ve SetAppThemeColor ve SetOnAppTheme<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ı

İşaretleme AppThemeBinding uzantısı, geçerli sistem temasına göre görüntü veya renk gibi bir kaynak kullanmanıza olanak tanır:

<ContentPage ...>
    <StackLayout Margin="20">
        <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>
</ContentPage>

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.

Buna ek olarak, içinde ResourceDictionary tanımlanan kaynaklar işaretleme uzantısıyla StaticResource 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.

İşaretlemeyi genişletme hakkında AppThemeBinding daha fazla bilgi için bkz . AppThemeBinding işaretleme uzantısı.

Genişletme yöntemleri

Xamarin.Forms, nesnelerin sistem teması değişikliklerine yanıt vermesini sağlayan VisualElement ve SetOnAppTheme<T> uzantı yöntemlerini 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, Color.Green, Color.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, SetOnAppTheme<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.SetOnAppTheme<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:

OSAppTheme currentTheme = Application.Current.RequestedTheme;

RequestedTheme özelliği bir OSAppTheme numaralandırma üyesi döndürür. Numaralandırma OSAppTheme 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 OSAppThemeolan özelliğiyle ayarlanabilir:

Application.Current.UserAppTheme = OSAppTheme.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 OSAppTheme.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. Xamarin.Forms sistem teması değiştiğinde, olayı işleyerek Application.RequestedThemeChanged uygulamalara bildirimde bulunabilirsiniz:

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

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

Önemli

Android'de tema değişikliklerine yanıt vermek için bayrağını ConfigChanges.UiMode sınıfınızın MainActivity özniteliğine Activity eklemeniz gerekir.

  • Last updated on