"Enter"a basıp içeriğe geçin

Xamarin.Forms Shell

Merhabalar, Xamarin 4.0 ile birlikte Shell yapısı geldi. Shell yapısı ile mobil uygulama geliştirirken karmaşıklığın biraz daha azalması amaçlanmakta, henüz şu anda tam olarak kullanıma hazır durumda Xamarin.Forms Shell. Ben Xamarin.Forms Shell yapısını incelemek adına Microsuft’un dokümanını okuyarak bir uygulama geliştirmeye çalıştım.

Visual Studio 2019 ile birlikte Xamarin.Forms uygulaması oluştururken artık uygulama tipi seçme ekranında Shell‘de bulunmakta.  Ben Blank uygulama oluşturup daha sonra içerisinde Shell yapısını kullanarak göstericem.

Uygulamamızı oluşturduktan sonra AppShell adlı bir sayfa ekliyoruz ve işlemlerimizi burada yapacağız. App.cs ‘e gidip buradan MainPage= new AppShell(); yapıyoruz ve uygulamaızı direk AppShell sayfasına yönlendiriyorum. AppShell sayfasına ilk olarak bir Tabbar ekliyorum ve daha sonra Tab’ler ekleyerek tabbar oluşturuyorum. Oluşturduğum tab’ler için sayfalar oluşturuyorum ve sayfaları  ShellContent ile içeriğine ekliyorum.

 

Tabbar için oluşturduğum kodları yorum satırı olarak yapıyorum ve Master-Detail Page sayfası gibi bir tasarım yapıyorum. Bunun için sayfama FlyoutItem ekliyorum, aynı tabbar’daki gibi ShellContent’den content atıyorum. Tekrardan sayfa oluşturmuyorum direk oluşturduğum sayfaya yönlendiriyorum.

Oluşturduğum rastgele seçtiğim bir FlyoutItem içerisine tab’ler atarak alt kısımda bir tabbar yapmak istiyorum. Bunun için Tabbar’da yaptığım gibi herhangi bir item içerisinde Tab’ler oluşturuyorum.  Daha sonra ise bir Tab’in içerisine birden fazla ShellContent vererek üst kısımda bir Tabbar oluşturuyorum.

Ekranı yana kaydırdığımızda gelen Master Page bir Başlık olarak resim eklemek istiyorum bunu için Shell.FlyoutHeader‘dan yararlanacağım. Bunun için ContentView oluşturuyorum, Content View içerisine bir tane resim ve yazı ekliyorum daha sonra bunu AppShell içerisinde çağırıyorum. HeaderView’ın HeightRequest’ini 200 olarak ayarladım. Eğer Shell içerisinde Header’a  FlyoutHeaderBehavior=”CollapseOnScroll” ayarını ayarlarsak daha iyi bir görsel tasarıma sahip olabiliriz. Ayrıca FlyoutItem’ın FlyoutDisplayOptions=”AsMultipleItems” özelliğini’de incelemek isteyebilirsiniz.

AppShell;

HeaderView;

Shell içerisinde Gezinme(Routing), Arama(Search) gibi birçok özellik var ama ben sadece şimdilik tasarımsal olan kısımlara bakabildim, bir sonraki yazımda belki bunlar hakkında yazabilirim. Xamarin.Forms Shell henüz kullanıma tam olarak hazır bir yapı değil hala bazı hatalar var, yeni Xamarin.Forms güncellemeleri ile bu sorunları çözeceklerdir. Yaptığım Uygulamanın ekran çıktısı aşağıdaki gibidir;

Soru ve görüşlerinizi e-mail veya yorum olarak belirtebilirsiniz.

 

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir