Xamarin.Forms Kabuk uygulaması oluşturma
Kabuk uygulaması oluşturma Xamarin.Forms işlemi aşağıdaki gibidir:
- Yeni Xamarin.Forms bir uygulama oluşturun veya Shell uygulamasına dönüştürmek istediğiniz mevcut bir uygulamayı yükleyin.
- 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. MainPage
UygulamanınApp
sınıfının özelliğini alt sınıf nesneShell
olarak ayarlayın. Daha fazla bilgi için bkz . Shell uygulamasını Önyükleme.- 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:
FlyoutItem
veyaTabBar
. AFlyoutItem
, 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. ATabBar
, 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. HerFlyoutItem
nesne veyaTabBar
nesne, nesneninShell
alt öğesidir.Tab
, alt sekmelere göre gezinilebilen, gruplandırılmış içeriği temsil eder. HerTab
nesne bir nesnenin veyaTabBar
nesneninFlyoutItem
alt öğesidir.ShellContent
, her sekmeninContentPage
nesnelerini temsil eder. HerShellContent
nesne bir nesneninTab
alt öğesidir. içindeTab
birdenShellContent
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
:
Hamburger simgesine basıldığında veya soldan çekerek açılır öğe görüntülenir:
Özelliği olarak ayarlandığından AsMultipleItems
açı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.