Merhabalar,

Bu yazımda Xamarin Forms Segmented Control (iOS ve Android) plugininin kullanımını ve entagrasyonunu anlatacağım.

Segmented Control Nedir ?

Segmented Control teknik olmayan en yalın anlatımla sayfamız içerisinde iki ayrı bölme açarak bizlere o bölmelere sakladığımız itemları, controlleri vs. Görüntülememizi sağlar. Yaygın kullanımı ise özellike iOS devicelarda ve Apple ın kendi uygulamalarında mevcuttur.

Xamarin.Forms da bu görünümü 2 majör platformda elde etmek için “Segmented Control for Xamarin Forms” pluginini Nuget Manager üzerinden projemize ekliyoruz.

Şimdi projemize hali hazırda var olan MainPage üzerinden kullanımına bakalım.

ContentPage’imize bir adet StackLayout atıp buna “SegmentedContainer” ismini verelim.Güzel görünsün diye de 4 bir tarafından  10 padding ve 10 spacing veriyorum.

Şimdi ise esas konumuza dönelim. Segmented Controllerin tab a benzeyen kısmı yani butonların oldugu alan “abstractions:SegmentedControl” olarak geçmektedir. Bu kontrol içerisinde ;

SetTintColor => Seçili segmentin rengini set edebiliriz.

SelectedTextColor => Seçili segmentin text rengilini verebiliriz.

TintColor => Seçili olmayan segmentin text rengilini verebiliriz.

Segmented Contoller da Tablarımızı ise SegmentedControlOptions ile eklemekteyiz.

Ben örneğimde Yıllık Maliyet ve Aylık Maliyet tabları oluşturdum. Bu tabların seçili durum renklerini ve onAppering methodunu override ederek SetTintColor’ını ve başlangıç tabını verdim.

SegmentedControl’ün hemen altında ise bir grid yapsını kullandığım Stacklayout bulunmakta ve buraya code behind da label ekleyeceğim. Siz Senaryonuza göre tab geçişini “ValueChanged” eventi ile yakalayıp dilerseniz tam tasarım 2 stackloyoutunuzu visible opsiyonları ile rahatça gösterebilirsiniz.

Kodlarımızın çıktısı ise telefonumuzda şu şekilde olacaktır.

Bu yazımızda Segmented Control pluginini kullanarak iOS dan alışık olduğumuz Segmented View görüntüsünü 2 majör platformda kullanmış olduk. Kod örneğini GitHub hesabımdan erişebilirsiniz. Plugin hakkında gelişmeleri takip etmek için ise SegmentedControl ulaşabilirsiniz.

Başka bir yazıda görüşmek üzere hoşçakalın…