Harun Özer


Proje veya dijital katalog yaptırmak için
iletişim formu doldurabilirsiniz..

<< Xamarin Form Kontrolleri |

Xamarin Resource Style Tanımlama

Yazar harunozer 26 September 2017

Xamarin Resource Style Tanımlama Bu makalemizde xamarin de page ve application bazında style tanımlamalarını, birden fazla tema tanımlamayı ve uygulama çalışırken tema değiştirmeyi inceleyeceğiz. Style tanımlamalarını .xaml tarafından yapabileceğimiz gibi .cs tarafında da yapabiliriz.

Örneklerimiz için yeni bir Blank App(Xamarin.Forms.Partable) projesi açalım. İlk olarak page bazında .xaml dosyasında style tanımlaması yapalım. Projemize “StylePage.cs” adında Forms Xaml Page ekleyelim ve app.cs de bu sayfadan başlayacak şekilde ayarlayalım. StylePage.xaml de ContentPage node içeriği aşağıdaki gibi olacaktır.

  <ContentPage.Resources>

    <ResourceDictionary>

      <!--StylePage de tanımlı olduğundan sadece bu sayfada geçerli olur-->

      <Stylex:Key="LocalStyle"TargetType="Label">

        <SetterProperty="TextColor"Value="Red"></Setter>

        <SetterProperty="FontSize"Value="24"></Setter>

        <SetterProperty="HorizontalTextAlignment"Value="Center"></Setter>

      </Style>

 

    </ResourceDictionary>

  </ContentPage.Resources>

 

  <ContentPage.Content>

    <StackLayout>

      <LabelText="Test Label1 Style Yok"></Label>

      <LabelText="Test LocalStyle"Style="{StaticResource LocalStyle}"></Label>

    </StackLayout>

  </ContentPage.Content>

Burada ResourceDictionary altında bu sayfada geçerli Style tanımlamaları yapılmıştır. x:Key ile isim belirtilmez ise bütün TargetType da belirtilen türde ki kontrollere uygulanır. Key ile isim belirtilmiş ise ilgili kontrolde Style özelliği yukarıdaki gibi belirtilmelidir. Örnekte 1. Label da belirtilmediği için tanımlanan style değerleri bu kontrole uygulanmamıştır.

Style tanımlamaları BasedOn özelliği ile birbirlerinden miras da alabilirler. Yukarıdaki örnekte Label için yeni bir style tanımı daha yapalım. LocalStyle tanımlarına ek olarak Bold olsun. Bunun için mevcut style tanımlamasının altına aşağıdaki gibi bir style node tanımı daha yapabiliriz.

<Stylex:Key="LabelStyleMiras"TargetType="Label"BasedOn="{StaticResource LocalStyle}">

      <SetterProperty="FontAttributes"Value="Bold"></Setter>

</Style>

Mevcut label kontrollerinin altına aşağıdaki gibi LabelStyleMiras Style tanımlanmış bir label ekleyelim.

<LabelText="Test LabelStyleMiras"Style="{StaticResource LabelStyleMiras}"></Label>

.cs kısmında da style tanımlaması yapılabilir. Yukarıdaki örnekte Label altına aşağıdaki gibi bir button ekleyelim ve style tanımlamasını StylePage.cs de oluşturalım.

<Buttonx:Name="button1"Text="buttonStyle .cs"></Button>

StylePage.cs de initilize metodunu da aşağıdaki gibi düzenleyelim.

varbuttonStyle = newStyle(typeof(Button))

{

    Setters = {

        newSetter{ Property = Button.TextColorProperty,   Value = Color.Red }

    }

};

button1.Style = buttonStyle;

Uygulama bazında global style tanımlaması yapmak:

Style tanımları application bazında da yapılabilir. Bu tanımlamaları da xaml veya cs kısmında yapabiliriz.

İlk olarak .xaml kısmında global style tanımlaması yapalım. Bunun için projemizde ki App.cs dosyasını silip App.cs adında Forms Xaml Page ekleyelim. Eklediğimiz page ContentPage sınıfından türetilmiş olarak üretilecektir. Bunu Application sınıfından türeyecek şekilde düzenleyelim ve MainPage atamasını yapalım. Eklediğimiz sayfanın .cs kısmı aşağıdaki gibi olacaktır.

publicApp()

{

    InitializeComponent();

 

    MainPage = newStylePage();

}

Sayfamızın .xaml kısmında ki ContentPage node da Application olarak değiştirelim ve içinde ki Label kontrolünü kaldıralım. Xaml kısmı da aşağıdaki gibi olacaktır.

<Applicationxmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="ResourceOrnekler.App">

 

</Application>

Sayfalarda tanımladığımız gibi burada style tanımlamalarını yapacağız. Tek fark ContentPage.Resources yerine Application.Resources node altında tanımlamalar olacak. Test için Entry tipinde aşağıdaki style tanımlamasını yapalım.

  <Application.Resources>

    <ResourceDictionary>

     

      <Stylex:Key="GlobalStyleXAML"TargetType="Entry">

        <SetterProperty="TextColor"Value="Red"></Setter>

        <SetterProperty="FontSize"Value="24"></Setter>

        <SetterProperty="HorizontalTextAlignment"Value="Center"></Setter>

      </Style>

     

    </ResourceDictionary>

  </Application.Resources>

StylePage.xaml sayfasında bu style kullanan aşağıdaki gibi bir entry kontrolü ekleyelim.

<EntryText="Global Style .xaml tanımlı"Style="{StaticResource GlobalStyleXAML}"></Entry>

ContentPage.Resources de ki miras alma, x:Key gibi kurallar burada da geçerlidir.

Şimdi de App.cs nin constructor metodunda MainPage atama yapmadan önce global style tanımlaması yapalım. App.cs App() metodu aşağıdaki gibi olacaktır.

varbuttonStyle = newStyle(typeof(Button))

{

    Setters = {

        newSetter{ Property = Button.TextColorProperty,   Value = Color.Blue }

        ,newSetter{ Property = Button.BackgroundColorProperty,   Value = Color.Silver }

    }

};

App.Current.Resources.Add("GlobalButtonStyle", buttonStyle);

 

MainPage = newStylePage();

Add metodunda verdiğimiz ilk parametre xaml sayfasında x:Key olarak belirttiğimiz değerdir. StylePage.xaml sayfasına aşağıdaki gibi bu style tanımlı olan bir button ekleyelim.

<ButtonText="Global buttonStyle App.cs"Style="{StaticResource GlobalButtonStyle}"></Button>

Theme Tanımlama

Uygulamamızda birden fazla tema tanımlayarak görünümde değişiklikler yapabiliriz. Örnek için App.xaml de farklı temalar için aşağıdaki gibi style tanımlamalarını ekleyelim.

      <!--Theme1 Theme-->

      <StyleTargetType="Label"x:Key="Theme1Title">

        <SetterProperty="FontSize"Value="35"></Setter>

        <SetterProperty="FontAttributes"Value="Bold"></Setter>

        <SetterProperty="TextColor"Value="Red"></Setter>

      </Style>

 

      <StyleTargetType="Button"x:Key="Theme1Button">

        <SetterProperty="FontSize"Value="15"></Setter>

        <SetterProperty="BackgroundColor"Value="Red"></Setter>

        <SetterProperty="TextColor"Value="Black"></Setter>

      </Style>

 

      <StyleTargetType="StackLayout"x:Key="Theme1Background">

        <SetterProperty="BackgroundColor"Value="White"></Setter>

        <SetterProperty="Opacity"Value=".8"></Setter>

      </Style>

     

      <!--Theme2 Theme-->

      <StyleTargetType="Label"x:Key="Theme2Title">

        <SetterProperty="FontSize"Value="35"></Setter>

        <SetterProperty="TextColor"Value="White"></Setter>

      </Style>

 

      <StyleTargetType="Button"x:Key="Theme2Button">

        <SetterProperty="FontSize"Value="25"></Setter>

        <SetterProperty="BackgroundColor"Value="White"></Setter>

        <SetterProperty="TextColor"Value="Black"></Setter>

      </Style>

 

      <StyleTargetType="StackLayout"x:Key="Theme2Background">

        <SetterProperty="BackgroundColor"Value="Black"></Setter>

        <SetterProperty="Opacity"Value=".5"></Setter>

      </Style>

StylePage.xaml sayfamızın altına StackLayout ve içine label ve button kontrolleri ekleyelim. Butona tıklandığında diğer style tanımlamaları kullanılsın. Dinamik olarak style değişeceği için “StaticResource” yerine “DynamicResource” ile style tanımı verilecek. SylePage.xaml dosyasına aşağıdaki eklemeyi yapalım.

<StackLayoutStyle="{DynamicResource Theme1Background}">

  <LabelText="Label1"Style="{DynamicResource Theme1Title}"></Label>

  <ButtonText="Tema Değiştir!"Style="{DynamicResource Theme1Button}"Clicked="ThemeDegistir"></Button>

</StackLayout>

StylePage.cs de ki ThemeDegistir metodu da aşağıdaki gibi olacaktır.

privatevoidThemeDegistir(objectsender, EventArgse)

{

    Application.Current.Resources["Theme1Title"] = Application.Current.Resources["Theme2Title"];

    Application.Current.Resources["Theme1Button"] = Application.Current.Resources["Theme2Button"];

    Application.Current.Resources["Theme1Background"] = Application.Current.Resources["Theme2Background"];

}

Yukarıdaki yöntem de tema eski haline nasıl getirilir bilmiyorum. Birde fazla style tanımı varsa tek tek bu şekilde atama yapmak da pek pratik olmayacaktır. Bunun için her tam için bir sayfa açıp aktif resources i ezmek daha pratikmiş gibi geldi.

Bu örnek için yeni bir Blank App (Xamarin.Forms.Partable) projesi açalım ve app dosyasını silip App.cs adında Forms Xaml Page ekleyelim. Eklediğimiz sayfayı az önce yaptığımız gibi Application sınıfından türeyecek şekilde düzenleyelim ve .xaml tarafında sadece Application node kalsın. ThemeTest adında ContentPage ekleyip MainPage atamasını da yapalım. Theme tanımlamalarını yapacağımız sayfalarımızı Themes adında bir klasör açıp içine Theme1 ve Theme2 adında Forms Xaml Page ekleyelim.

İlk olarak Theme tanımlamalarımızı yapalım. Theme1.xaml sayfasında button için aşağıdaki gibi bir tanımlama yapalım.

  <ContentPage.Resources>

    <ResourceDictionary>

      <StyleTargetType="Button">

        <SetterProperty="FontSize"Value="20"></Setter>

        <SetterProperty="BackgroundColor"Value="Blue"></Setter>

        <SetterProperty="TextColor"Value="Red"></Setter>

        <SetterProperty="VerticalOptions"Value="End"></Setter>

      </Style>

    </ResourceDictionary>

  </ContentPage.Resources>

Theme2.xaml sayfasında da aşağıdaki tanımlamayı yapalım.

  <ContentPage.Resources>

    <ResourceDictionary>

      <StyleTargetType="Button">

        <SetterProperty="FontSize"Value="25"></Setter>

        <SetterProperty="BackgroundColor"Value="Yellow"></Setter>

      </Style>

    </ResourceDictionary>

  </ContentPage.Resources>

Şimdi de ThemeTest.xaml sayfasında bir button ekleyelim ve tıklandığında temayı değiştirelim.

<ButtonText="Değiştir"Clicked="TemaDegistir"></Button>

ThemeTest.cs sayfasında constructor da temaları arraye atıp ilk olarak Theme1 i atayalım ve buton tıklandıkça tema değişsin. ThemeTest.cs aşağıdaki gibi olacaktır.

ResourceDictionary[] Temalar;

 

publicThemeTest()

{

    InitializeComponent();

    Temalar = newResourceDictionary[] {

            newTheme1().Resources

            ,newTheme2().Resources

        };

    App.Current.Resources = Temalar[0];

 

}

 

intSeciliThemeID = 0;

 

privatevoidTemaDegistir(objectsender, EventArgse)

{

    SeciliThemeID++;

    if(SeciliThemeID > 1)

        SeciliThemeID = 0;

 

    App.Current.Resources = Temalar[SeciliThemeID];

}

Bana bu yol daha pratik geldi. Fakat bellek yönetimi bakımından nasıl olur incelemek gerekir. Birde sayfaları arrayda tutmamak daha performanslı olacaktır.

Örnekleri aşağıdaki adresten indirebilirsiniz.

https://github.com/harunozer/XamarinSamples/tree/master/ResourceOrnekler

https://github.com/harunozer/XamarinSamples/tree/master/ResourcesOrnekler-Theme

 

Kaynak: https://www.youtube.com/watch?v=vM5VH2bqwww

Tam Sayfa
Tags Xamarin,
Kategoriler Xamarin
İşlemler
Bu Makale 0  Kez Beğenildi.
İsim :    
e-Mail :    
Web Site :  
İmage :  
Güvenlik Kodu :  

Güvenlik Resmi
Resmi Yenile
    
Yorum :  
Tasarım Desenleri ve Mimarileri