Kamer Gozecarpan
- 30 Tem 2020
- 2 dakikada okunur

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}}"/>