.NET MAUI Shell-Tabs

Durchsuchen Sie das Beispiel

Die Navigationsoberfläche von .NET Multi-Platform App UI (.NET MAUI) Shell basiert auf Flyouts und Registerkarten. Die oberste Navigationsebene in einer Shell-App ist abhängig von den Navigationsanforderungen der App entweder ein Flyout oder eine untere Registerkartenleiste. Wenn die Navigationsoberfläche für eine App mit unteren Registerkarten beginnt, sollte das untergeordnete Element des unterklassigen Shell Objekts ein TabBar Objekt sein, das die untere Registerkartenleiste darstellt.

Ein TabBar Objekt kann ein oder Tab mehrere Objekte enthalten, wobei jedes Tab Objekt eine Registerkarte auf der unteren Registerkartenleiste darstellt. Jedes Tab Objekt kann ein oder ShellContent mehrere Objekte enthalten, wobei jedes ShellContent Objekt ein einzelnes ContentPageobjekt anzeigt. Wenn mehr als ein ShellContent Objekt in einem Tab Objekt vorhanden ist, können die ContentPage Objekte über die oberen Registerkarten navigiert werden. Innerhalb einer Registerkarte können Sie zu anderen ContentPage Objekten navigieren, die als Detailseiten bezeichnet werden.

Einzelne Seite

Eine Shell-App mit einer einzelnen Seite kann durch Hinzufügen eines Tab Objekts zu einem TabBar Objekt erstellt werden. Innerhalb des Tab Objekts sollte ein ShellContent Objekt auf ein ContentPage Objekt festgelegt werden:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       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>

Das Ergebnis dieses Beispiels ist eine Einzelseitenanwendung.

Shell verfügt über implizite Konvertierungsoperatoren, mit denen die visuelle Shell-Hierarchie vereinfacht werden kann, ohne weitere Ansichten in den visuellen Baum einzuführen. Diese Vereinfachung ist möglich, da ein Unterklassenobjekt Shell nur FlyoutItem-Objekte oder ein TabBar-Objekt enthalten kann, das wiederum nur Tab-Objekte enthalten kann, die ihrerseits nur ShellContent-Objekte enthalten können. Diese impliziten Konvertierungsoperatoren können verwendet werden, um die Tab Objekte aus dem vorherigen Beispiel zu entfernen:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       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 umschließt das ShellContent Objekt automatisch in ein Tab Objekt, das in ein TabBar Objekt eingeschlossen wird.

Tabs unten

Wenn mehrere Tab-Objekte in einem einzelnen TabBar-Objekt vorhanden sind, werden Tab-Objekte als Registerkarten unten gerendert.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       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 stringdefiniert den Registerkartentitel. Die Icon Eigenschaft vom Typ ImageSourcedefiniert das Registerkartensymbol:

Wenn mehr als fünf Registerkarten auf einer TabBarRegisterkarte vorhanden sind, wird eine Registerkarte " Mehr " angezeigt, die für den Zugriff auf die anderen Registerkarten verwendet werden kann:

Darüber hinaus können die impliziten Konvertierungsoperatoren der Shell verwendet werden, um die Objekte ShellContent und Tab aus dem vorherigen Beispiel zu entfernen.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       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 umschließt automatisch jedes ShellContent Objekt in einem Tab Objekt.

Untere und obere Tabs

Wenn mehrere ShellContent Objekte in einem Tab Objekt vorhanden sind, wird der unteren Registerkartenleiste eine obere Registerkartenleiste hinzugefügt, über die die ContentPage Objekte navigierbar sind:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       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>

Dieser Code führt zu dem Layout, das im folgenden Screenshot gezeigt wird:

Darüber hinaus können die impliziten Konvertierungsoperatoren der Shell verwendet werden, um das zweite Tab Objekt aus dem vorherigen Beispiel zu entfernen:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       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 umschließt automatisch das dritte ShellContent Objekt in einem Tab Objekt.

Tab-Aussehen

Die Shell Klasse definiert die folgenden angebundenen Eigenschaften, die die Darstellung von Registerkarten steuern:

• TabBarBackgroundColor, vom Typ Color, der die Hintergrundfarbe für die Registerkartenleiste definiert. Wenn die Eigenschaft nicht festgelegt ist, wird der BackgroundColor Eigenschaftswert verwendet.
• TabBarDisabledColor, vom Typ Color, der die deaktivierte Farbe für die Registerkartenleiste definiert. Wenn die Eigenschaft nicht festgelegt ist, wird der DisabledColor Eigenschaftswert verwendet.
• TabBarForegroundColor, vom Typ Color, der die Vordergrundfarbe für die Registerkartenleiste definiert. Wenn die Eigenschaft nicht festgelegt ist, wird der ForegroundColor Eigenschaftswert verwendet.
• TabBarTitleColor, vom Typ Color, der die Titelfarbe für die Tab-Leiste definiert. Wenn die Eigenschaft nicht festgelegt ist, wird der TitleColor Eigenschaftswert verwendet.
• TabBarUnselectedColor, vom Typ Color, der die nicht ausgewählte Farbe für die Registerkartenleiste definiert. Wenn die Eigenschaft nicht festgelegt ist, wird der UnselectedColor Eigenschaftswert verwendet.

Alle diese Eigenschaften werden von BindableProperty Objekten unterstützt, was bedeutet, dass die Eigenschaften Ziele von Datenbindungen sein können und formatiert werden können.

Die drei Eigenschaften, die die Farbe einer Registerkarte am meisten beeinflussen, sind TabBarForegroundColor, TabBarTitleColorund TabBarUnselectedColor:

• Wenn nur die TabBarTitleColor Eigenschaft festgelegt wird, wird der Wert verwendet, um den Titel und das Symbol der ausgewählten Registerkarte zu färben. Wenn TabBarTitleColor sie nicht festgelegt ist, entspricht die Titelfarbe dem Wert der TabBarForegroundColor Eigenschaft.
• Wenn die TabBarForegroundColor Eigenschaft festgelegt ist und die TabBarUnselectedColor Eigenschaft nicht festgelegt wird, wird der Wert der TabBarForegroundColor Eigenschaft verwendet, um den Titel und das Symbol der ausgewählten Registerkarte zu färben.
• Wenn nur die TabBarUnselectedColor Eigenschaft festgelegt wird, wird der Wert verwendet, um den Titel und das Symbol der nicht ausgewählten Registerkarte zu färben.

Beispiel:

• Wenn die TabBarTitleColor-Eigenschaft auf Green festgelegt ist, sind der Titel und das Symbol für die ausgewählte Registerkarte grün, und nicht ausgewählte Registerkarten stimmen mit den Systemfarben überein.
• Wenn die TabBarForegroundColor-Eigenschaft auf Blue festgelegt ist, sind Titel und Symbol der ausgewählten Registerkarte blau, und nicht ausgewählte Registerkarten stimmen mit den Systemfarben überein.
• Wenn die TabBarTitleColor-Eigenschaft auf Green und die TabBarForegroundColor-Eigenschaft auf Blue festgelegt ist, ist der Titel grün und das Symbol ist blau für die ausgewählte Registerkarte, und nicht ausgewählte Registerkarten stimmen mit den Systemfarben überein.
• Wenn die TabBarTitleColor Eigenschaft auf Green festgelegt ist und die Shell.ForegroundColor Eigenschaft auf Blue festgelegt ist, dann ist der Titel für die ausgewählte Registerkarte grün und das Symbol blau. Nicht ausgewählte Registerkarten stimmen mit den Systemfarben überein. Dies tritt auf, da der Shell.ForegroundColor Eigenschaftswert an die TabBarForegroundColor Eigenschaft weitergegeben wird.
• Wenn die TabBarTitleColor-Eigenschaft auf Green festgelegt ist, die TabBarForegroundColor-Eigenschaft auf Blue und die TabBarUnselectedColor-Eigenschaft auf Red, dann sind der Titel und das Symbol der ausgewählten Registerkarte grün bzw. blau, während die Titel und Symbole der nicht ausgewählten Registerkarten rot sind.

Das folgende Beispiel zeigt eine XAML-Formatvorlage, die verschiedene Farbeigenschaften für die Tab-Leiste 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 mithilfe von Cascading StyleSheets (CSS) formatiert werden. Weitere Informationen finden Sie unter .NET MAUI Shell spezifische Eigenschaften.

Registerkartenauswahl

Wenn eine Shell-App, die eine Registerkartenleiste verwendet, zuerst ausgeführt wird, wird die Shell.CurrentItem Eigenschaft auf das erste Tab Objekt im Unterklassenobjekt Shell festgelegt. Die Eigenschaft kann jedoch auf eine andere Tabfestgelegt werden, wie im folgenden Beispiel gezeigt:

<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 Objekt mit dem ShellContent Namen dogsItemfestgelegt, was dazu führt, dass es ausgewählt und angezeigt wird. In diesem Beispiel wird eine implizite Konvertierung verwendet, um jedes ShellContent Objekt in einem Tab Objekt umzuschließen.

Der entsprechende C#-Code für ein ShellContent-Objekt mit dem Namen dogsItem lautet:

CurrentItem = dogsItem;

In diesem Beispiel wird die CurrentItem Eigenschaft in der Unterklassenklasse Shell festgelegt. Alternativ kann die CurrentItem Eigenschaft in einer beliebigen Klasse über die Shell.Current statische Eigenschaft festgelegt werden:

Shell.Current.CurrentItem = dogsItem;

Die Sichtbarkeit der TabBar und des Tabs

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

Obwohl diese Eigenschaft für ein Unterklassenobjekt Shell festgelegt werden kann, wird sie in der Regel für alle ShellContent Objekte ContentPage festgelegt, die die Registerkartenleiste unsichtbar machen möchten:

<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 "Hunde " ausgewählt ist.

Darüber hinaus können Tab Objekte ausgeblendet werden, indem die IsVisible bindbare Eigenschaft auf false gesetzt 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 ist die zweite Registerkarte ausgeblendet.