Microsoft Xamarin Türkiye Meetup – Xamarin Forms Shell

Selamlar,

Dün Microsoft Türkiye’de gerçekleştirmiş olduğumuz etkinlikte katılımcılara yeni gelen Xamarin Forms Shell den bahsetmişim. Bu yazımda buna değinmek istedim.

Öncelikle şunu belirtmek isterim ki Xamarin.Forms Shell şuan production da kullanılmaya hazır değil diye düşünüyorum. Geliştirmeler halen devam ediyor, üzerinde daha birçok değişiklik olacaktır. Ama tanımaktan denemekten zarar gelmez. Değişiklikleride hepberaber takip ederiz.

Xamarin Forms Shell i eğer VisualStudio 2019 kurduysanız bir extension paketi kurarak File-> NewProject dediğinizde Template olarak görebilirsiniz.

Template i şuradan indirebilirsiniz.

Bu visual studio extension paketini kurduğunuz da Yeni bir xamarin forms projesi açtığınızda aşağıdaki gibi karşınıza Shell Template i gelecektir.

Bunu seçip devam ettiğiniz deki kısma geleceğiz. Ama önce hali hazırda Visual Studio 2019 kurmamış olanların Shell i nasıl deneyeceklerine gelelim.

Visual Studio 2017 de yine bir xamarin forms projesi açıp başlayın.

Sonrasında yapmanız gereken ilk şey platform spesifik projelere gidip Xamarin.Forms.Forms.Init.. den önce

• global::Xamarin.Forms.Forms.SetFlags(“Shell_Experimental”, “Visual_Experimental”, “CollectionView_Experimental”, “FastRenderers_Experimental”);

kodunu eklemeniz. Bu kod sayesinde şuan experimental olarak geçen tüm diğer özellikleri de test etmeye başlayabilirsiniz. Örneğin CollectionView uzun zamandır beklenen bir Layout idi, FlexLayout ile kısmen sorunlarımız çözüyorduk ama bunu da denemekte fayda olacaktır şimdiden.

Bundan sonra projesine bir Xaml sayfası ekleyip onu Shell sınıfından türetmeniz yeterli olacaktır. Artık sizde bu Shell dosyası üzerinde oynayabilir, çıktıları gözlemleyebilirsiniz.

Gelelim Shell in özelliklerine;

Shell in başlıca amacı şu;

• Tüm uygulama genelindeki navigasyonları tek bir çatı altında toplayıp, sanki bir storyboard hazırlar gibi hazırlayabilmeniz.

Shell ile beraber web e yakın bir routing mekanizması da geldi. Ama varolan tüm navigaston mekanizması yani Navigaion.Push..Pop.. vs hepsi halen geçerli tabi

Şuanda temel 4 farklı tag imiz var.

Bunlar şunlar;

• ShellItem
• ShellSection
• ShellContent
• MenuItem

Bınların uygulamaya etkileri  şöyle oluyor.

Temel menülerin dizilimi yukarıda kullanacağınız tag lara göre 3 e ayrılıyor.

• Her bir ShellItem Sol menüde ki bir Link e karşılık geliyor.
• Bunların içinde tanımlanmış Herbir Shell Section bottombar olarak karşımıza çıkıyor.
• Bunun da içerisinde bir yada birden çok Shell Content tanımlarsak bunlar da topbar olarak karşımıza geliyor.

Yani aşağıdaki gibi bir xaml ın menü hiyerarşisi şu şekilde oluyor.

 
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 	
	   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 	
	   xmlns:local="clr-namespace:TailwindTraders.Mobile.Features.Shell" 	
	   x:Class="TailwindTraders.Mobile.Features.Shell.TheShell" 	
	   Title="TailwindTraders"> 
<ShellItem Title="Home“ Route=“Home”> 
	<ShellSection Route=“Section1“>  
		<ShellContent Route=“index”> 
			<local:HomePage1 /> 
		</ShellContent>
		<ShellContent Route=“index”> 
			<local:HomePage2 /> 
		</ShellContent>
	 </ShellSection> 
	 	<ShellSection Route=“Section2“>  
		<ShellContent Route=“index”> 
			<local:HomePage3 /> 
		</ShellContent>
	 </ShellSection> 
</ShellItem> 
</Shell>

Sol tarafta tek bir menü linki. Buna tıkladığımızda, bu sayfada altta iki tab ı olan bir bottom tab. çünkü iki adet ShellSection konulmuş. İlk taba tıkladığımızda da yukarıda 2 tane tab ı olan topbar göreceğiz çünkü bunun içerisine de iki tane shell content konulmuş.

Bunun yanı sıra Flyout dediğimiz tag in Header ve Footer ile istediğimiz gibi oynayıp sol menünün görünümünü düzenleyebiliyoruz.

Routing mekanizması şu şekilde değişiyor.

▪RouteScheme: Url scheme such as “http” or “app”

▪RouteHost: The Domain portion of the URI

▪Route: The base segment of your application’s URI

▪Exp: “app://microsoft.com/myapp/home/section/index”

▪(App.Current.MainPage as Shell).GoToAsync(“app:///newapp/greeting?msg=Hello”);

İstersek sayfalar arasında data taşımak için querystring bile kullanabiliyoruz 🙂

[QueryProperty("Message", "msg"]
    public partial class GreetingPage : ContentPage
    {
        public GreetingPage()
        {
            InitializeComponent();
        }
 
        string _message;
        public string Message
        {
            get { return _message; }
            set
            {
                _message = value;
            }
        }
    }

Dediğim gibi şuan için yeni başlayan projelerinizde asla başlamamanızla birlikte deneysel olarak alışmanızda fayda olduğunu düşündüğümden çok fazla detaylarına girmeden Shell den bahsetmek istedim.

Daha fazla detaylara şuradan ulaşabilirsiniz.

Bir sonraki yazımda görüşmek üzere.