Xamarin.Forms için Uygulama Temaları

Tüm büyük işletim sistemleri artık karanlık ve aydınlık uygulama temalarını destekliyor. Xamarin.Forms 4.7 sürümü de bu desteği sağlamaya başladı. İlk aşamada bir aksiyon almanıza da gerek yok. Xamarin.Forms uygulamaları kullanıcının işletim sistemi tercihine göre tema rengini belirliyor. Bunun yanısıra arayüzünüzde kullanılan açık ve koyu renkleri özelleştirebilir ve hatta kullanıcıya kendi uygulama temasını kontrol etme seçeneğini sunabilirsiniz.


Örnek Üzerinden İnceleyelim


Uygulamanızı oluşturduğunuzda varsayılan olarak çalışır.


<StackLayout>
            <Frame BackgroundColor="#2196F3" Padding="36,48,36,36" CornerRadius="0">
                <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36" />
            </Frame>
            <Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10" />
            <Label Text="Make changes to your XAML file and save to see your UI update in the running app with XAML Hot Reload. Give it a try!" FontSize="16" Padding="30,0,30,0" />
            <Label FontSize="16" Padding="30,24,30,0">
                <Label.FormattedText>
                    <FormattedString>
                        <FormattedString.Spans>
                            <Span Text="Learn more at " />
                            <Span Text="https://aka.ms/xamarin-quickstart" FontAttributes="Bold" />
                        </FormattedString.Spans>
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </StackLayout>


Görsel Referansı


iOS simülatörünü karanlık ve aydınlık modlar (CMD + SHFT + A) ile değiştirebiliriz.

ContentPage arasında değişiklik yapıldığında , arka plan beyaz ise siyah, metin siyah ise beyaz renge dönüşür. Metnin siyahtan beyaza değiştiğini görebilirsiniz. Bunlar default platform renkleridir.


Üst panelde mavi arkaplan ve beyaz text'in değişmediğini görebilirsiniz. Bu kısım kodda set edilmiştir.


Renk Kontrolü Nasıl Yapılır


Statik renklerin, runtime'da OS tema ayarlarına tepki vermesi için AppThemeBinding ile değiştirilmesi gerekiyor.


  • App.xaml.cs dosyasında temayı flag olarak setleyin.

public App()
{
    Device.SetFlags(new string[]{ "AppTheme_Experimental" });

    InitializeComponent();
}

  • Header'ı aşağıdaki şekilde update edin.

<Frame BackgroundColor="{AppThemeBinding Dark=#2196F3, Light=#2196F3}" Padding="36,48,36,36" CornerRadius="0">
                <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="{AppThemeBinding Dark=DarkBlue, Light=White}" FontSize="36" />
            </Frame>

  • · Stil dosyasını aşağıdaki şekilde refactor edebilirsiniz.

<ContentPage.Resources>
    <Style x:Key="HeaderBg" TargetType="Frame">
        <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark=#1d1d1d, Light=#2196F3}"/>
        <Setter Property="Padding" Value="36,48,36,36"/>
        <Setter Property="CornerRadius" Value="0"/>
    </Style>

    <Style x:Key="HeaderTitle" TargetType="Label">
        <Setter Property="TextColor" Value="{AppThemeBinding Dark=#F1F1F1, Light=White}"/>
        <Setter Property="HorizontalTextAlignment" Value="Center"/>
        <Setter Property="FontSize" Value="36"/>
    </Style>
</ContentPage.Resources>

<Frame Style="{StaticResource HeaderBg}">
    <Label
        Style="{StaticResource HeaderTitle}"
        Text="Welcome to Xamarin.Forms!" />
</Frame>

  • Önceden tanımlanmış renk stillerini de aşağıdaki şekilde kullanabilirsiniz.

<Color x:Key="Background_Dark">#1d1d1d</Color>
<Color x:Key="Background_Light">#1d1d1d</Color>
<Style x:Key="HeaderBg" TargetType="Frame">
    <Setter Property="BackgroundColor" Value="{AppThemeBinding Dark={StaticResource Background_Dark}, Light={StaticResource Background_Light}}"/>

Görsel Referansı


Yazının devamında kullanıcı tercihlerine göre tema ayarları nasıl değişir inceleyebilirsiniz.


Bu inceleme aşağıdaki kaynaktan çevrilmiştir:

https://devblogs.microsoft.com/xamarin/app-themes-xamarin-forms/


#Microsoft #xamarin

0 yorum

Son Paylaşımlar

Hepsini Gör

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2021 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın