Xamarin.Forms Kabuk uygulaması oluşturma

  • Makale

Download Sample Örneği indirme

Kabuk uygulaması oluşturma Xamarin.Forms işlemi aşağıdaki gibidir:

  1. Yeni Xamarin.Forms bir uygulama oluşturun veya Shell uygulamasına dönüştürmek istediğiniz mevcut bir uygulamayı yükleyin.
  2. Paylaşılan kod projesine sınıfı alt sınıflayan Shell bir XAML dosyası ekleyin. Daha fazla bilgi için bkz . Shell sınıfını alt sınıflama.
  3. MainPage Uygulamanın App sınıfının özelliğini alt sınıf nesne Shell olarak ayarlayın. Daha fazla bilgi için bkz . Shell uygulamasını Önyükleme.
  4. Alt sınıf sınıfındaki Shell uygulamanın görsel hiyerarşisini açıklama. Daha fazla bilgi için bkz . Uygulamanın görsel hiyerarşisini açıklama.

Kabuk uygulaması oluşturma adım adım izlenecek yol için bkz . Uygulama oluşturma Xamarin.Forms hızlı başlangıcı.

Shell sınıfının alt sınıfı

Shell uygulaması oluşturmanın Xamarin.Forms ilk adımı, sınıfı alt sınıfa Shell alan paylaşılan kod projesine bir XAML dosyası eklemektir. Bu dosya herhangi bir adla adlandırılabilir, ancak AppShell önerilir. Aşağıdaki kod örneğinde yeni oluşturulan bir AppShell.xaml dosyası gösterilmektedir:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="MyApp.AppShell">

</Shell>

Aşağıdaki örnekte arka planda kod dosyası AppShell.xaml.cs gösterilmektedir:

using Xamarin.Forms;

namespace MyApp
{
    public partial class AppShell : Shell
    {
        public AppShell()
        {
            InitializeComponent();
        }
    }
}

Shell uygulamasını bootstrap

Nesnesini alt sınıflandıran Shell XAML dosyası oluşturulduktan sonra, MainPage sınıfın App özelliği alt sınıf nesneye Shell ayarlanmalıdır:

namespace MyApp
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }
        ...
    }
}

Bu örnekte sınıfı, AppShell sınıfından türetilen Shell XAML dosyasıdır.

Uyarı

Boş bir Shell uygulaması oluşturulurken, uygulamayı çalıştırmaya çalışmak bir InvalidOperationException oluşturulmasına neden olur.

Uygulamanın görsel hiyerarşisini açıklama

Kabuk uygulaması oluşturmanın Xamarin.Forms son adımı, alt sınıf sınıfında uygulamanın görsel hiyerarşisini açıklamaktır Shell . Alt sınıf sınıfı Shell üç ana hiyerarşik nesneden oluşur:

  1. FlyoutItem veya TabBar. A FlyoutItem , açılır öğedeki bir veya daha fazla öğeyi temsil eder ve uygulamanın gezinti düzeni bir açılır öğe gerektirdiğinde kullanılmalıdır. A TabBar , alt sekme çubuğunu temsil eder ve uygulamanın gezinti düzeni alt sekmelerle başladığında ve açılır öğe gerektirmediğinde kullanılmalıdır. Her FlyoutItem nesne veya TabBar nesne, nesnenin Shell alt öğesidir.
  2. Tab, alt sekmelere göre gezinilebilen, gruplandırılmış içeriği temsil eder. Her Tab nesne bir nesnenin veya TabBar nesnenin FlyoutItem alt öğesidir.
  3. ShellContent, her sekmenin ContentPage nesnelerini temsil eder. Her ShellContent nesne bir nesnenin Tab alt öğesidir. içinde Tabbirden ShellContent fazla nesne bulunduğunda, nesneler üst sekmelere göre gezinilebilir.

Bu nesneler herhangi bir kullanıcı arabirimini değil, uygulamanın görsel hiyerarşisinin kuruluşunu temsil eder. Shell bu nesneleri alır ve içerik için gezinti kullanıcı arabirimini oluşturur.

Aşağıdaki XAML'de alt sınıflanmış bir sınıf örneği gösterilmektedir Shell :

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    ...
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <!--
        Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified.
        This is possible because a subclassed Shell object can only ever contain a FlyoutItem object or a TabBar object,
        which can only ever contain Tab objects, which can only ever contain ShellContent objects.

        The implicit conversion automatically wraps the ShellContent objects below in Tab objects.
        -->
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>
    ...
</Shell>

Bu XAML çalıştırıldığında, alt sınıf Shell sınıfında bildirilen içeriğin ilk öğesi olduğundan öğesini görüntülerCatsPage:

Screenshot of a Shell app, on iOS and Android

Hamburger simgesine basıldığında veya soldan çekerek açılır öğe görüntülenir:

Screenshot of a Shell flyout, on iOS and Android

Özelliği olarak ayarlandığından AsMultipleItemsaçılır öğede FlyoutDisplayOptions birden çok öğe görüntülenir. Daha fazla bilgi için bkz . Açılır öğe görüntüleme seçenekleri.

Önemli

Shell uygulamasında sayfalar gezintiye yanıt olarak isteğe bağlı olarak oluşturulur. Bu, her nesnenin DataTemplate özelliğini bir ContentPage nesne olarak ayarlamak ContentTemplate için işaretleme uzantısı kullanılarak ShellContent gerçekleştirilir.