MasterPage, Menu, DetailPage yapımı XAML Detayları ve MVVM Data Binding

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.

Xamarin Portable Class Library

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..

Xamarin Startup Page

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.

Xamarin Menu Example

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.

Xamarin App.cs

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..

Xamarin Detail Page

.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;

Xamarin MVVM Binding

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

Xamarin XAML Design

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.

Xamarin ListView itemselected event

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.

Xamarin Forms Android Design Xamarin Forms Android Design Xamarin Forms WinPhone Design
     
Xamarin Forms Android Landscape Design

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.

Yiğit

Xamarin Developer, Consultant & Architect. Community Leader and Director of Xamarin Türkiye

1 Comment

You can post comments in this post.


  • Hocam burda yapılanları olduğu gibi deniyorum fakat menü iconu hiçbir şekilde gelmiyor.

    developer 2 sene ago Reply


Post A Reply