Xamarin.Forms Kabuk sayfaları

  • Makale

Download Sample Örneği indirme

NesneShellContent, her FlyoutItem veya Tabiçin nesnesini temsil ederContentPage. Bir Tab nesnede birden ShellContent fazla nesne bulunduğundaContentPage, nesneler üst sekmelere göre gezinilebilir. Bir sayfada, ayrıntı sayfaları olarak bilinen ek ContentPage nesnelere gidilebilir.

Ayrıca sınıfı, Shell Shell uygulamalarında sayfaların Xamarin.Forms görünümünü yapılandırmak için kullanılabilecek ekli özellikleri tanımlar. Bu, sayfa renklerini ayarlamayı, sayfa sunu modunu ayarlamayı, gezinti çubuğunu devre dışı bırakmayı, sekme çubuğunu devre dışı bırakmayı ve gezinti çubuğunda görünümleri görüntülemeyi içerir.

Sayfaları görüntüleme

Xamarin.Forms Kabuk uygulamalarında sayfalar genellikle 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:

<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">
    <TabBar>
       <ShellContent Title="Cats"
                     Icon="cat.png"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Title="Dogs"
                     Icon="dog.png"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
       <ShellContent Title="Monkeys"
                     Icon="monkey.png"
                     ContentTemplate="{DataTemplate views:MonkeysPage}" />
    </TabBar>
</Shell>

Bu örnekte, nesneleri görsel hiyerarşisinden kaldırmak Tab için Shell'in örtük dönüştürme işleçleri kullanılır. Ancak, her ShellContent nesne bir sekmede işlenir:

Screenshot of a Shell app with three pages, on iOS and Android

Not

BindingContext Her ShellContent nesnenin öğesi üst Tab nesneden devralınır.

Her ContentPage nesnenin içinde ek ContentPage nesnelere gidilebilir. Gezinti hakkında daha fazla bilgi için bkz Xamarin.Forms . Kabuk gezintisi.

Uygulama başlangıcında sayfaları yükleme

Bir Shell uygulamasında her ContentPage nesne genellikle gezintiye yanıt olarak isteğe bağlı olarak oluşturulur. Ancak, uygulama başlangıcında nesneler oluşturmak ContentPage da mümkündür.

Uyarı

ContentPage uygulama başlangıcında oluşturulan nesneler kötü bir başlangıç deneyimine yol açabilir.

ContentPagenesneleri, özellikleri ContentPage nesnelere ayarlanarak ShellContent.Content uygulama başlangıcında oluşturulabilir:

<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">
    <TabBar>
     <ShellContent Title="Cats"
                   Icon="cat.png">
         <views:CatsPage />
     </ShellContent>
     <ShellContent Title="Dogs"
                   Icon="dog.png">
         <views:DogsPage />
     </ShellContent>
     <ShellContent Title="Monkeys"
                   Icon="monkey.png">
         <views:MonkeysPage />
     </ShellContent>
    </TabBar>
</Shell>

Bu örnekte, CatsPage, DogsPageve MonkeysPage tümü gezintiye yanıt olarak isteğe bağlı olarak değil, uygulama başlangıcında oluşturulur.

Not

Content özelliği sınıfının içerik özelliğidir ShellContent ve bu nedenle açıkça ayarlanması gerekmez.

Sayfa renklerini ayarlama

sınıfı, Shell bir Shell uygulamasında sayfa renklerini ayarlamak için kullanılabilecek aşağıdaki ekli özellikleri tanımlar:

  • BackgroundColor, kabuk kromundaki arka plan rengini tanımlayan türündedir Color. Renk, Kabuk içeriğinin arkasında dolmayacak.
  • DisabledColor, metni ve devre dışı bırakılan simgeleri gölgelendirme rengini tanımlayan türünde Color.
  • ForegroundColor, metin ve simgeleri gölgelendirme rengini tanımlayan türündedir Color.
  • TitleColor, türündeki Colorgeçerli sayfanın başlığı için kullanılan rengi tanımlar.
  • UnselectedColor, kabuk Colorkromunda seçilmemiş metin ve simgeler için kullanılan rengi tanımlar.

Bu özelliklerin tümü nesneler tarafından BindableProperty desteklenir; bu da özelliklerin veri bağlamalarının hedefleri olabileceği ve XAML stilleri kullanılarak stillendirilebileceği anlamına gelir. Ayrıca, özellikler Basamaklı Stil Sayfaları (CSS) kullanılarak ayarlanabilir. Daha fazla bilgi için bkz Xamarin.Forms . Shell'e özgü özellikler.

Not

Sekme renklerinin tanımlanmasını sağlayan özellikler de vardır. Daha fazla bilgi için bkz . Sekme görünümü.

Aşağıdaki XAML, alt sınıflanmış Shell bir sınıfta renk özelliklerini ayarlamayı gösterir:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="Xaminals.AppShell"
       BackgroundColor="#455A64"
       ForegroundColor="White"
       TitleColor="White"
       DisabledColor="#B4FFFFFF"
       UnselectedColor="#95FFFFFF">

</Shell>

Bu örnekte renk değerleri, sayfa düzeyinde geçersiz kılınmadığı sürece Shell uygulamasındaki tüm sayfalara uygulanır.

Renk özellikleri ekli özellikler olduğundan, o sayfadaki renkleri ayarlamak için tek tek sayfalarda da ayarlanabilir:

<ContentPage ...
             Shell.BackgroundColor="Gray"
             Shell.ForegroundColor="White"
             Shell.TitleColor="Blue"
             Shell.DisabledColor="#95FFFFFF"
             Shell.UnselectedColor="#B4FFFFFF">

</ContentPage>

Alternatif olarak, renk özellikleri bir XAML stiliyle ayarlanabilir:

<Style x:Key="DomesticShell"
       TargetType="Element" >
    <Setter Property="Shell.BackgroundColor"
            Value="#039BE6" />
    <Setter Property="Shell.ForegroundColor"
            Value="White" />
    <Setter Property="Shell.TitleColor"
            Value="White" />
    <Setter Property="Shell.DisabledColor"
            Value="#B4FFFFFF" />
    <Setter Property="Shell.UnselectedColor"
            Value="#95FFFFFF" />
</Style>

XAML stilleri hakkında daha fazla bilgi için bkz . XAML Stillerini kullanarak Uygulama Stili Xamarin.Forms Oluşturma.

Sayfa sunu modunu ayarlama

Varsayılan olarak, bir sayfaya yöntemiyle gidildiğinde küçük bir gezinti animasyonu GoToAsync gerçekleşir. Ancak, bu davranış, bir üzerindeki ContentPage ekli özelliği numaralandırma üyelerinden PresentationMode birine ayarlayarak Shell.PresentationMode değiştirilebilir:

  • NotAnimated sayfanın gezinti animasyonu olmadan görüntüleneceğini gösterir.
  • Animated sayfanın bir gezinti animasyonuyla görüntüleneceğini gösterir. Bu, eklenen özelliğin Shell.PresentationMode varsayılan değeridir.
  • Modal sayfanın kalıcı bir sayfa olarak görüntüleneceğini gösterir.
  • ModalAnimated sayfanın gezinti animasyonuyla kalıcı bir sayfa olarak görüntüleneceğini gösterir.
  • ModalNotAnimated sayfanın gezinti animasyonu olmadan kalıcı bir sayfa olarak görüntüleneceğini gösterir.

Önemli

Türü PresentationMode bir bayraklar sabit listesidir. Bu, numaralandırma üyelerinin bir bileşiminin koda uygulanabileceği anlamına gelir. Ancak, XAML'de ModalAnimated kullanım kolaylığı için, üye ve Modal üyelerinin bir bileşimiAnimated, üye ise ModalNotAnimated ve Modal üyelerinin birleşimidirNotAnimated. Bayrak numaralandırmaları hakkında daha fazla bilgi için bkz . Numaralandırma türleri bit bayrakları olarak.

Aşağıdaki XAML örneği, bir ContentPageüzerinde ekli özelliği ayarlarShell.PresentationMode:

<ContentPage ...
             Shell.PresentationMode="Modal">
    ...             
</ContentPage>

Bu örnekte, ContentPage yöntemiyle GoToAsync sayfaya gidildiğinde , kalıcı bir sayfa olarak görüntülenecek şekilde ayarlanır.

Gezinti çubuğu gölgesini etkinleştirme

Shell.NavBarHasShadow türündeki boolekli özellik, gezinti çubuğunun gölgesi olup olmadığını denetler. Varsayılan olarak özelliğin değeri iOS'ta ve true Android'dedirfalse.

Bu özellik alt sınıflı Shell bir nesnede ayarlansa da, gezinti çubuğu gölgesini etkinleştirmek isteyen tüm sayfalarda da ayarlanabilir. Örneğin, aşağıdaki XAML bir öğesinden ContentPagegezinti çubuğu gölgesini etkinleştirmeyi gösterir:

<ContentPage ...
             Shell.NavBarHasShadow="true">
    ...
</ContentPage>

Bu, gezinti çubuğu gölgesinin etkinleştirilmesine neden olur.

Gezinti çubuğunu devre dışı bırakma

Shell.NavBarIsVisible türündeki boolekli özellik, bir sayfa sunulduğunda gezinti çubuğunun görünür olup olmadığını denetler. Varsayılan olarak özelliğinin değeri şeklindedir true.

Bu özellik alt sınıf bir Shell nesnede ayarlansa da, genellikle gezinti çubuğunu görünmez hale getirmek isteyen tüm sayfalarda ayarlanır. Örneğin, aşağıdaki XAML'de gezinti çubuğunun bir ContentPageöğesinden devre dışı bırakılması gösterilmektedir:

<ContentPage ...
             Shell.NavBarIsVisible="false">
    ...
</ContentPage>

Bu, sayfa sunulduğunda gezinti çubuğunun görünmez olmasına neden olur:

Screenshot of Shell page with an invisible navigation bar, on iOS and Android

Gezinti çubuğunda görünümleri görüntüleme

Shell.TitleView türündeki Viewekli özellik, gezinti çubuğunda herhangi birinin View görüntülenmesini sağlar.

Bu özellik alt sınıflanmış Shell bir nesnede ayarlansa da, gezinti çubuğunda görünüm görüntülemek isteyen tüm sayfalarda da ayarlanabilir. Örneğin, aşağıdaki XAML bir öğesinin gezinti çubuğunda bir ImageContentPagegörüntülendiğini gösterir:

<ContentPage ...>
    <Shell.TitleView>
        <Image Source="xamarin_logo.png"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Shell.TitleView>
    ...
</ContentPage>

Bu, sayfadaki gezinti çubuğunda bir görüntünün görüntülenmesine neden olur:

Screenshot of Shell page with a title view, on iOS and Android

Önemli

Gezinti çubuğu görünmez hale getirildiyse, NavBarIsVisible ekli özellik ile başlık görünümü görüntülenmez.

Görünümün boyutu ve özellikleriyle belirtilmediği veya görünümün konumu ve VerticalOptionsHeightRequest özellikleriyle WidthRequestHorizontalOptions belirtilmediği sürece birçok görünüm gezinti çubuğunda görünmez.

sınıfı sınıfından LayoutView türetildiğinden TitleView , ekli özellik birden çok görünüm içeren bir düzen sınıfını görüntüleyecek şekilde ayarlanabilir. Benzer şekilde, sınıfı sonuçta sınıfından ContentViewView türetildiği için, TitleView ekli özellik tek bir görünüm içeren bir ContentView görüntüleyecek şekilde ayarlanabilir.

Sayfa görünürlüğü

Kabuk, özelliğiyle ayarlanan sayfa görünürlüğüne saygı gösterir IsVisible . Bu nedenle, bir sayfanın IsVisible özelliği olarak false ayarlandığında Shell uygulamasında görünmez ve sayfaya gitmek mümkün olmaz.