Xamarin.Forms-Shellregisterkarten

  • Artikel

Download Sample Das Beispiel herunterladen

Die von der Xamarin.Forms-Shell bereitgestellte Navigationsfunktion basiert auf Flyouts und Registerkarten. Die oberste Ebene der Navigation in einer Shell-Anwendung ist entweder ein Flyout oder eine untere Registerkartenleiste, je nach den Navigationsanforderungen der Anwendung. Wenn die Navigationsfunktion für eine Anwendung mit unteren Registerkarten beginnt, sollte das untergeordnete Element des Shell-Objekts mit Unterklassen ein TabBar-Objekt sein, das die untere Registerkartenleiste darstellt.

Ein TabBar-Objekt kann ein oder mehrere Tab-Objekte enthalten, wobei jedes Tab-Objekt eine Registerkarte auf der unteren Registerkartenleiste darstellt. Jedes Tab-Objekt kann ein oder mehrere ShellContent-Objekte enthalten, wobei jedes ShellContent-Objekt eine einzelne ContentPage anzeigt. Wenn mehr als ein ShellContent-Objekt in einem Tab-Objekt vorhanden ist, sind die ContentPage-Objekte über obere Registerkarten navigierbar. Auf einer Registerkarte kann zu zusätzlichen ContentPage-Objekten navigiert werden, die als Detailseiten bezeichnet werden.

Wichtig

Der TabBar-Typ deaktiviert das Flyout.

Einseitig

Sie können eine Single-Page-Shellanwendung erstellen, indem Sie ein Tab-Objekt zu einem TabBar-Objekt hinzufügen. Im Tab-Objekt sollte ein ShellContent-Objekt auf ein ContentPage-Objekt festgelegt werden:

<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>
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </TabBar>
</Shell>

Dieses Codebeispiel führt zu der folgenden Single-Page-Webanwendung:

Screenshot of a Shell single page app, on iOS and Android

Shell verfügt über implizite Konvertierungsoperatoren, die es ermöglichen, die visuelle Hierarchie der Shell zu vereinfachen, ohne zusätzliche Ansichten in die visuelle Struktur einzufügen. Dies ist möglich, weil ein Shell-Objekt mit Unterklassen immer nur FlyoutItem-Objekte oder ein TabBar-Objekt enthalten darf, die immer nur Tab-Objekte enthalten dürfen, die wiederum immer nur ShellContent-Objekte enthalten dürfen. Diese impliziten Konvertierungsoperatoren können verwendet werden, um die Tab-Objekte aus dem vorherigen Beispiel zu entfernen:

<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">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
    </Tab>
</Shell>

Diese implizite Konvertierung schließt das ShellContent-Objekt automatisch in ein Tab-Objekt ein, das dann in ein TabBar-Objekt eingeschlossen wird.

Wichtig

In einer Shellanwendung werden Seiten bei Bedarf als Reaktion auf die Navigation erstellt. Dies wird mithilfe der DataTemplate-Markuperweiterung erreicht, um die ContentTemplate-Eigenschaft der einzelnen ShellContent-Objekte auf ein ContentPage-Objekt festzulegen.

Untere Registerkarten

Tab-Objekte werden als untere Registerkarten dargestellt, vorausgesetzt, dass es mehrere Tab-Objekte in einem einzigen TabBar-Objekt gibt:

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

Die Title-Eigenschaft vom Typ string definiert den Registerkartentitel. Die Icon-Eigenschaft vom Typ ImageSource definiert das Registerkartensymbol:

Screenshot of a Shell two page app with bottom tabs, on iOS and Android

Wenn mehr als fünf Registerkarten auf einer TabBar vorhanden sind, wird die Registerkarte More (Weitere) angezeigt, die verwendet werden kann, um auf die zusätzlichen Registerkarten zuzugreifen:

Screenshot of a Shell app with a More tab, on iOS and Android

Zusätzlich können die impliziten Shellkonvertierungsoperatoren verwendet werden, um die Objekte ShellContent und Tab aus dem vorherigen Beispiel zu entfernen:

<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}" />
    </TabBar>
</Shell>

Diese implizite Konvertierung schließt jedes ShellContent-Objekt automatisch in ein Tab-Objekt ein.

Wichtig

In einer Shellanwendung werden Seiten bei Bedarf als Reaktion auf die Navigation erstellt. Dies wird mithilfe der DataTemplate-Markuperweiterung erreicht, um die ContentTemplate-Eigenschaft der einzelnen ShellContent-Objekte auf ein ContentPage-Objekt festzulegen.

Untere und obere Registerkarten

Wenn mehr als ein ShellContent-Objekt in einem Tab-Objekt vorhanden ist, wird der unteren Registerkarte eine obere Registerkartenleiste hinzugefügt, mit deren Hilfe durch die ContentPage-Objekte navigiert werden kann:

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

Dies ergibt das in den folgenden Screenshots gezeigte Layout:

Screenshot of a Shell two page app with top and bottom tabs, on iOS and Android

Zusätzlich können die impliziten Shellkonvertierungsoperatoren verwendet werden, um das zweite Tab-Objekt aus dem vorherigen Beispiel zu entfernen:

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

Diese implizite Konvertierung schließt das dritte ShellContent-Objekt automatisch in ein Tab-Objekt ein.

Registerkartendarstellung

Die Shell-Klasse definiert die folgenden angefügten Eigenschaften, die die Darstellung von Registerkarten steuern:

  • TabBarBackgroundColor, vom Typ Color: Definiert die Hintergrundfarbe für die Registerkartenleiste. Wenn die Eigenschaft nicht festgelegt ist, wird der BackgroundColor-Eigenschaftswert verwendet.
  • TabBarDisabledColor vom Typ Color: Definiert die Farbe für „Deaktiviert“ für die Registerkartenleiste. Wenn die Eigenschaft nicht festgelegt ist, wird der DisabledColor-Eigenschaftswert verwendet.
  • TabBarForegroundColor vom Typ Color: Definiert die Vordergrundfarbe für die Registerkartenleiste. Wenn die Eigenschaft nicht festgelegt ist, wird der ForegroundColor-Eigenschaftswert verwendet.
  • TabBarTitleColor vom Typ Color: Definiert die Titelfarbe für die Registerkartenleiste. Wenn die Eigenschaft nicht festgelegt ist, wird der TitleColor-Eigenschaftswert verwendet.
  • TabBarUnselectedColor vom Typ Color: Definiert die Farbe für „Nicht ausgewählt“ für die Registerkartenleiste. Wenn die Eigenschaft nicht festgelegt ist, wird der UnselectedColor-Eigenschaftswert verwendet.

Alle diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass die Eigenschaften Ziele von Datenverbindungen sein und formatiert werden können.

Das folgende Beispiel zeigt ein XAML-Format, das unterschiedliche Farbeigenschaften für Registerkartenleisten festlegt:

<Style TargetType="TabBar">
    <Setter Property="Shell.TabBarBackgroundColor"
            Value="CornflowerBlue" />
    <Setter Property="Shell.TabBarTitleColor"
            Value="Black" />
    <Setter Property="Shell.TabBarUnselectedColor"
            Value="AntiqueWhite" />
</Style>

Darüber hinaus können Registerkarten auch mit Cascading Stylesheets (CSS) formatiert werden. Weitere Informationen finden Sie unter Spezifische Eigenschaften der Xamarin.Forms-Shell.

Registerkartenauswahl

Wenn eine Shellanwendung, die eine Registerkartenleiste verwendet, zum ersten Mal ausgeführt wird, wird die Shell.CurrentItem-Eigenschaft auf das erste Tab-Objekt im Shell-Objekt mit Unterklassen festgelegt. Allerdings kann die Eigenschaft wie im folgenden Beispiel gezeigt, auf ein anderes Tab-Objekt festgelegt werden:

<Shell ...
       CurrentItem="{x:Reference dogsItem}">
    <TabBar>
        <ShellContent Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent x:Name="dogsItem"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </TabBar>
</Shell>

In diesem Beispiel wird die CurrentItem-Eigenschaft auf das ShellContent-Objekt namens dogsItem festgelegt, das daraufhin ausgewählt und angezeigt wird. In diesem Beispiel wird eine implizite Konvertierung verwendet, um jedes ShellContent-Objekt in ein Tab-Objekt einzuschließen.

Wenn ein ShellContent-Objekt mit dem Namen dogsItem vorhanden ist, lautet der äquivalente C#-Code wie folgt:

CurrentItem = dogsItem;

In diesem Beispiel wird die CurrentItem-Eigenschaft in der Shell-Klasse mit Unterklassen festgelegt. Alternativ kann die CurrentItem-Eigenschaft in jeder Klasse über die statische Shell.Current-Eigenschaft festgelegt werden:

Shell.Current.CurrentItem = dogsItem;

Sichtbarkeit von TabBar- und Tab-Objekten

Die Registerkartenleisten und Registerkarten sind in Shellanwendungen standardmäßig sichtbar. Die Registerkartenleiste kann jedoch ausgeblendet werden, indem die angefügte Eigenschaft Shell.TabBarIsVisible auf false festgelegt wird.

Diese Eigenschaft kann zwar auf ein Shell-Objekt mit Unterklassen festgelegt werden, wird aber typischerweise auf alle ShellContent- oder ContentPage-Objekte festgelegt, bei denen die Registerkartenleiste ausgeblendet werden soll:

<TabBar>
   <Tab Title="Domestic"
        Icon="paw.png">
       <ShellContent Title="Cats"
                     ContentTemplate="{DataTemplate views:CatsPage}" />
       <ShellContent Shell.TabBarIsVisible="false"
                     Title="Dogs"
                     ContentTemplate="{DataTemplate views:DogsPage}" />
   </Tab>
   <Tab Title="Monkeys"
        Icon="monkey.png">
       <ShellContent ContentTemplate="{DataTemplate views:MonkeysPage}" />
   </Tab>
</TabBar>

In diesem Beispiel wird die Registerkartenleiste ausgeblendet, wenn die obere Registerkarte Dogs ausgewählt ist.

Außerdem können Tab-Objekte ausgeblendet werden, indem die bindbare Eigenschaft IsVisible auf false festgelegt wird:

<TabBar>
    <ShellContent Title="Cats"
                  Icon="cat.png"
                  ContentTemplate="{DataTemplate views:CatsPage}" />
    <ShellContent Title="Dogs"
                  Icon="dog.png"
                  ContentTemplate="{DataTemplate views:DogsPage}"
                  IsVisible="False" />
    <ShellContent Title="Monkeys"
                  Icon="monkey.png"
                  ContentTemplate="{DataTemplate views:MonkeysPage}" />
</TabBar>

In diesem Beispiel wird die zweite Registerkarte ausgeblendet.