Merhaba,

Bugün Xamarin Forms kullanarak MasterPage, DetailPage ve Menu yapımını MVVM pattern kullanarak gerçekleştireceğiz.

Bu örneğimizdeki asıl amacımız XAML kullanarak menu işlemlerimizi esnek ve güzel bir şekilde yapabilmek.

Her zaman olduğu gibi.. en zor işlem olan Proje açma kısmı ile başlıyoruz..

Ben PCL bir proje tercih ettim, siz isterseniz shared proje tipini seçebilirsiniz.

Tahmin edeceğiniz gibi menu yapısı oluşturabilmem için 3 sayfaya ihtiacım var.

1. Master Sayfam
2. Menu Sayfam
3. Detail Sayfam

Şimdi bu 3 sayfayı oluşturup nasıl şekillendireceğimizi konuşalım..

Startup.cs class’ım benim Master sayfam olacak ve gördüğünüz gibi içerisinde herhangi bir işlem yok sadece MasterDetailPage class’ından türüyor.

Startup.cs sayfam benim Detail ve Menu sayfalarımı içerisinde barındıracak olan uygulamamın base master sayfası olacaktır.

Yukarıdaki resimde gördüğünüz yapıyı kurabilmem için App.cs içerisinde bazı başlangıç kodlarını ve yapısını değiştirmem gerekecek.

Bildiğiniz gibi App.cs benim uygulamamın başlangıç class’ıdır ve uygulamam hangi platformda olursa olsun paylaşacağı kodları App.cs üzerinden yönetmektedir.

Bu kavramı zaten biz Xamarin developerlar olarak çok net biliyoruz..

Startup, Detail ve Menu sayfalarımdan birer örnek aldığımı görüyoruz ve Startup sayfamın örneğini aldığım mainPage objesinin master ve detail özelliklerini set edip, uygulamamın MainPage özelliğine ise Startup sayfamın örneğini set ediyorum.

Menu her sayfada ulaşılabileceği için master, detail ise ilk sayfam olacağı için detail özelliğine set ediliyor..

Detail ve Menu sayfam ise ContentPage sınıfından türemiş normal XAML sayfalar olacaklar.

Detail sayfası ekliyorum..

.cs tarafında herhangi bir işlem yapmadım sadece XAML tarafta 2 label ve 1 stacklayout kullandım.

Menu sayfamı eklemeden önce MVVM, Data Binding ve Model yapımı kurmam gerekiyor..

MenuModel adından bir class açıp içerisinde 2 adet property ekliyorum.

public int Id { get; set; }
public string Name { get; set; }

MenuViewModel class’ım;

Örneğimizin asıl amacı olan Menu tasarımına ve binding işlemlerine geçelim.

Bu resim üzerinde biraz konuşmamız gerekiyor. Hem XAML hem .cs tarafı için..

Web projeleri yaparken css kullanırız ve orada margin ve padding işlemleri vardır.

Xamarin kullanırken bu işlemleri Padding özelliğini kullanarak yaparız.

Bir StackLayout padding özelliğini kullandığımızda o StackLayout içerisindeki tüm objelerin bu özellikten etkileneceğini unutmayalım!

Fakat css üzerindeki padding ile Xamarin içerisinde kullanacağımız padding biraz farklı çalışıyor.

CSS = Top, Right, Bottom, Left olarak çalışırken, Xamarin = Left, Top, Right, Bottom olarak çalışmaktadır.

Orientation, HorizontalOptions ve VerticalOptions kavramlarından biraz bahsedelim..

Orientation : Yön verme ve hizalama için kullanılır. Kullandığınız obje’nin içerisindeki objeleri yatay veya dikey olarak hizalamanınızı sağlamaktadır.

2 seçeneği vardır; Horizontal ve Vertical

HorizontalOptions : Kullandığınız obje’nin içerisindeki objeleri yatay olarak nasıl hizalayacağınızı belirtirsiniz.

VerticalOptions : Kullandığınız obje’nin içerisindeki objeleri dikey olarak nasıl hizalayacağınızı belirtirsiniz.

HorizontalOptions ve VerticalOptions 8 seçeneği vardır;

Start, Center, Fill, End, StartAndExpand, CenterAndExpand, FillAndExpand, EndAndExpand

Bu özellikler ile objelerinizi ekranda nerden başlatacağınızı söylersiniz. “AndExpand” kullandığınız yerlerde nerden başlatıyorsanız içerisindeki objenizin kaplayacağı alan kadar ekranın sonuna doğru genişletecektir.

Bu kavramları örneklerinizde değişik kombinasyonlarını deneyerek kullanın ve aralarındaki farkları o şekilde görerek öğrenmeye çalışın.

ListView içerisinde kullandığımız ItemsSource=”{Binding Menu}” özelliği içerisindeki Binding Menu kısmı ise MenuViewModel class’ımdaki Menu property’sine denk geliyor.

Burada kurduğumuz tasarımsal senaryo ise; En yukarıda Xamarin logosu, onun altında ortalı bir şekilde menu ve en altta sabit olarak www.xamarintr.com yazımız bulunuyor. Zaten verdiğimiz Orientation, HorizontalOptions ve VerticalOptions özelliklerinden bunu görebilirsiniz.

En alt kısma sabitlediğimiz alan özelliklerinden bahsedecek olursak, (Orientation=”Horizontal” HorizontalOptions=”Center” VerticalOptions=”End”)

Yatay hizala, yatay hizası ortalı olsun ve dikey hizası sonda olsun şeklinde bir yorum yapmış oluruz.

Binding ve SelectedItem event’imizi yazdık.

Burada dikkat etmemiz gerekenler; ListView objesi içerisinde seçtiğimiz obje’nin seçili kalıp kalmamasını kontrol etmek, Uyarı mesajını çıkartmak ve eğer istersek menuyu kapatıp kapatmamak gibi konular..

Kullanmış olduğum event bir listview event’i olduğu için doğal olarak sender objesi bir listview objesi olacaktır.

ve listview’in selected item’ina null set ederek listview üzerinde seçili item bırakmamış oluyoruz.

Eğer işlemi tercih etmezsek, listview üzerinde bir item seçtiğimizde başka bir item seçene kadar o item seçili kalacaktır!

Menu üzerinde bir item seçtiğimizde menu kapansın isteyebiliriz. Bunun için proje master safamızın IsPresented özelliğini false set etmemiz gerekmektedir.

DisplayAlert metodu ise bildiğiniz gibi.. title, message, ok ve cancel özellikleri alan bir alert message metodudur.

Bu örneği inceleyerek projelerinizde değişik kullanımlar ve menu yapı ve tasarımlarını kolay bir şekilde çıkartabileceğinizi düşünüyorum.

Önemli olan hizalama, padding gibi kavramları iyi anlamak olduğunu düşünüyorum.

Son resimde de göreceğinzi gibi cihazı yatay hizaladığımda alt ve üst tarafın sabit menu itemların ise bir scroll ile ortalı çıktığını göreceğiz.

Kaynak Kodları XamarinTRMenu projesini linkten indirebilirsiniz.

Görüşmek üzere.