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>
        <Tab Title="Android"
             Icon="android.png">
            <ShellContent ContentTemplate="{DataTemplate views:AndroidPage}"/>
        </Tab>
        <Tab Title="iOS"
             Icon="apple.png">
            <ShellContent ContentTemplate="{DataTemplate views:iOSPage}"/>
        </Tab>
        <Tab Title="UWP"
             Icon="windows.png">
            <ShellContent ContentTemplate="{DataTemplate views:UwpPage}"/>
        </Tab>
    </TabBar>

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.

 <FlyoutItem Title="Twitter"
                Icon="twitter.png">
        <ShellContent ContentTemplate="{DataTemplate views:AndroidPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Instagram"
                Icon="instagram.png">
        <ShellContent ContentTemplate="{DataTemplate views:iOSPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Facebook"
                Icon="facebook.png">
        <ShellContent ContentTemplate="{DataTemplate views:UwpPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Linkedin"
                Icon="linkedin.png">
        <ShellContent ContentTemplate="{DataTemplate views:iOSPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Youtube"
                Icon="youtube.png">
        <ShellContent ContentTemplate="{DataTemplate views:AndroidPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Spotify"
                Icon="spotify.png">
        <ShellContent ContentTemplate="{DataTemplate views:UwpPage}"/>
    </FlyoutItem>

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.

    <FlyoutItem Title="Twitter"
                Icon="twitter.png">
        <Tab Title="Android"
             Icon="android.png">
            <ShellContent Title="Android" ContentTemplate="{DataTemplate views:AndroidPage}"/>
            <ShellContent Title="iOS" ContentTemplate="{DataTemplate views:iOSPage}"/>
            <ShellContent Title="UWP" ContentTemplate="{DataTemplate views:UwpPage}"/>
        </Tab>
        <Tab Title="iOS"
             Icon="apple.png">
            <ShellContent ContentTemplate="{DataTemplate views:iOSPage}"/>
        </Tab>
        <Tab Title="UWP"
             Icon="windows.png">
            <ShellContent ContentTemplate="{DataTemplate views:UwpPage}"/>
        </Tab>
    </FlyoutItem>

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;

 <Shell.FlyoutHeader>
        <views:HeaderView/>
    </Shell.FlyoutHeader>

HeaderView;

 <Grid>
        <Image Source="socialmedia.jpg"
               Aspect="AspectFill"
               Opacity="0.8"/>
        <Label Text="Social Media"
               TextColor="White"
               FontSize="Large"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"/>
    </Grid>

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.