Freigeben über

.NET MAUI Shell Seiten

  • Artikel

Browse sample.Durchsuchen Sie das Beispiel

Ein ShellContent Objekt stellt das ContentPage Objekt für jedes FlyoutItem oder Tab dar. Wenn mehr als ein ShellContent Objekt in einem Tab Objekt vorhanden ist, können die ContentPage Objekte über die oberen Registerkarten navigiert werden. Auf einer Seite kann zu zusätzlichen ContentPage Objekten navigiert werden, die als Detailseiten bezeichnet werden.

Darüber hinaus definiert die Klasse Shell angehängte Eigenschaften, die verwendet werden können, um das Erscheinungsbild von Seiten in .NET Multi-platform App UI (.NET MAUI) Shell Apps zu konfigurieren. Diese Konfiguration umfasst die Einstellung der Seitenfarben, die Einstellung des Seitendarstellungsmodus, die Deaktivierung der Navigationsleiste, die Deaktivierung der Registerkartenleiste und die Anzeige von Ansichten in der Navigationsleiste.

Anzeigen von Seiten

In .NET MAUI Shell Apps werden die Seiten in der Regel bei Bedarf als Antwort auf die Navigation erstellt. Dies wird mithilfe der DataTemplate Markup-Erweiterung erreicht, um die ContentTemplate Eigenschaft jedes ShellContent Objekts auf ein ContentPage Objekt festzusetzen:

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

In diesem Beispiel werden die impliziten Konvertierungsoperatoren der Shell verwendet, um die Tab-Objekte aus der visuellen Hierarchie zu entfernen. Jedes ShellContent-Objekt wird jedoch auf einer Registerkarte gerendert:

Screenshot of a Shell app with three pages.

Hinweis

Die BindingContext-Eigenschaft der einzelnen ShellContent-Objekte wird jeweils vom übergeordneten Tab-Objekt geerbt.

Innerhalb jedes ContentPage-Objekts kann zu zusätzlichen ContentPage-Objekten navigiert werden. Weitere Informationen zur Navigation finden Sie unter .NET MAUI Shell Navigation.

Laden von Seiten beim App-Start

In einer Shell App wird jedes ContentPage Objekt in der Regel bei Bedarf als Antwort auf die Navigation erstellt. Es ist jedoch auch möglich, ContentPage Objekte beim Start der App zu erstellen.

Warnung

ContentPage Objekte, die beim Start der App erstellt werden, können zu einem schlechten Startverhalten führen.

ContentPage Objekte können beim Start der App erstellt werden, indem die ShellContent.Content Eigenschaften auf ContentPage Objekte festgesetzt 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>
     <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>

In diesem Beispiel werden alle CatsPage, DogsPage und MonkeysPage beim Start der App erstellt und nicht bei Bedarf als Antwort auf die Navigation.

Hinweis

Die Content-Eigenschaft ist die Inhaltseigenschaft der ShellContent-Klasse und muss daher nicht explizit festgelegt werden.

Festlegen der Seitenfarben

Die Klasse Shell definiert die folgenden angehängten Eigenschaften, die zum Festlegen von Seitenfarben in einer Shell App verwendet werden können:

  • BackgroundColor vom Typ Color definiert die Hintergrundfarbe im Shellchrom. Die Farbe wird hinter dem Shell-Inhalt nicht ausgefüllt.
  • DisabledColor vom Typ Color definiert die Farbe für deaktivierten Text und deaktivierte Symbole.
  • ForegroundColor vom Typ Color definiert die Farbe für Text und Symbole.
  • TitleColor vom Typ Color definiert die Farbe für den Titel der aktuellen Seite.
  • UnselectedColor vom Typ Color definiert die Farbe für nicht ausgewählten Text und nicht ausgewählte Symbole im Shellchrom.

Alle diese Eigenschaften werden durch BindableProperty-Objekte gestützt, was bedeutet, dass die Eigenschaften Ziele von Datenverbindungen sein und unter Verwendung von XAML-Formatvorlagen formatiert werden können. Darüber hinaus können die Eigenschaften mithilfe von Cascading Stylesheets (CSS) festgelegt werden. Weitere Informationen finden Sie unter .NET MAUI Shell-spezifische Eigenschaften.

Hinweis

Es gibt auch Eigenschaften, mit denen Sie Registerkartenfarben definieren können. Weitere Informationen finden Sie unter Darstellung von Registerkarten.

Der folgende XAML-Code veranschaulicht das Festlegen der Farbeigenschaften in einer Shell-Klasse mit Unterklassen:

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

</Shell>

In diesem Beispiel werden die Farbwerte auf alle Seiten in der Shell App angewendet, sofern sie nicht auf Seitenebene überschrieben werden.

Da die Farbeigenschaften angefügte Eigenschaften sind, können sie auch für einzelne Seiten festgelegt werden, um die Farben auf der entsprechenden Seite festzulegen:

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

</ContentPage>

Alternativ können die Farbeigenschaften mit einer XAML-Formatvorlage festgelegt werden:

<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>

Weitere Informationen über XAML-Stile finden Sie unter Mit XAML Apps gestalten.

Festlegen des Seitenpräsentationsmodus

Standardmäßig wird eine kleine Navigationsanimation angezeigt, wenn mit der GoToAsync-Methode zu einer Seite navigiert wird. Dieses Verhalten kann jedoch geändert werden, indem die angefügte Eigenschaft Shell.PresentationMode für eine ContentPage-Klasse auf einen der PresentationMode-Enumerationsmember festgelegt wird:

  • NotAnimated gibt an, dass die Seite ohne Navigationsanimation angezeigt wird.
  • Animated gibt an, dass die Seite mit Navigationsanimation angezeigt wird. Dies ist der Standardwert der angefügten Shell.PresentationMode-Eigenschaft.
  • Modal gibt an, dass die Seite als modale Seite angezeigt wird.
  • ModalAnimated gibt an, dass die Seite als modale Seite mit Navigationsanimation angezeigt wird.
  • ModalNotAnimated gibt an, dass die Seite als modale Seite ohne Navigationsanimation angezeigt wird.

Wichtig

Der Typ PresentationMode ist eine Flagenumeration. Dies bedeutet, dass im Code eine Kombination von Enumerationsmembern angewendet werden kann. Für mehr Benutzerfreundlichkeit in XAML ist das ModalAnimated-Member jedoch eine Kombination der Member Animated und Modal und das ModalNotAnimated-Member eine Kombination der Member NotAnimated und Modal. Weitere Informationen zu Flagenumerationen finden Sie unter Enumerationstypen als Bitflags.

Im folgenden XAML-Beispiel wird die angefügte Eigenschaft Shell.PresentationMode für eine ContentPage-Klasse festgelegt:

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

In diesem Beispiel wird die ContentPage-Klasse so festgelegt, dass sie als modale Seite angezeigt wird, wenn mit der GoToAsync-Methode zur Seite navigiert wird.

Aktivieren des Navigationsleistenschattens

Die angefügte Eigenschaft Shell.NavBarHasShadow vom Typ bool steuert, ob die Navigationsleiste über einen Schatten verfügt. Standardmäßig lautet der Wert der Eigenschaft true auf Android und false auf anderen Plattformen.

Diese Eigenschaft kann zwar für ein Shell-Objekt mit Unterklassen festgelegt werden, aber auch für alle Seiten, für die der Schatten der Navigationsleiste aktiviert werden soll. Im folgenden XAML-Code wird zum Beispiel das Aktivieren des Navigationsleistenschattens durch eine ContentPage gezeigt:

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

Dies führt dazu, dass der Schatten der Navigationsleiste aktiviert wird.

Deaktivieren der Navigationsleiste

Die angefügte Eigenschaft Shell.NavBarIsVisible vom Typ bool steuert, ob die Navigationsleiste eingeblendet sein soll, wenn eine Seite angezeigt wird. Der Standardwert der Eigenschaft lautet true.

Diese Eigenschaft kann zwar für ein Shell-Objekt mit Unterklassen festgelegt werden, wird aber in der Regel für alle Seiten festgelegt, auf denen die Navigationsleiste ausgeblendet sein soll. Im folgenden XAML-Code wird zum Beispiel die Navigationsleiste von einem ContentPage-Objekt deaktiviert:

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

Anzeigen von Ansichten in der Navigationsleiste

Die angefügte Eigenschaft Shell.TitleView vom Typ View aktiviert alle View-Klassen, die in der Navigationsleiste angezeigt werden sollen.

Diese Eigenschaft kann zwar für ein Shell-Objekt mit Unterklassen festgelegt werden, aber auch für alle Seiten, auf denen eine Ansicht in der Navigationsleiste angezeigt werden soll. Im folgenden XAML-Code wird zum Beispiel ein Image-Objekt in der Navigationsleiste einer ContentPage angezeigt:

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

Wichtig

Wenn die Navigationsleiste mit der angefügten Eigenschaft NavBarIsVisible ausgeblendet wurde, wird die Titelansicht nicht angezeigt.

Viele Ansichten werden nicht in der Navigationsleiste angezeigt, wenn die Größe der Ansicht nicht mit den Eigenschaften WidthRequest und HeightRequest oder die Position der Ansicht nicht mit den Eigenschaften HorizontalOptions und VerticalOptions angegeben wird.

Die angehängte Eigenschaft TitleView kann eingestellt werden, um eine Layoutklasse anzuzeigen, die mehrere Ansichten enthält. Entsprechend gilt, dass die angefügte TitleView-Eigenschaft so festgelegt werden kann, dass sie eine ContentView anzeigt, die eine einzelne Ansicht enthält, weil die ContentView-Klasse letztendlich von der View-Klasse abgeleitet ist.

Seitensichtbarkeit

Shell beachtet die Sichtbarkeit der Seite, die mit der Eigenschaft IsVisible festgelegt wird. Wenn die IsVisible-Eigenschaft einer Seite auf false gesetzt ist, ist sie in der Shell App nicht sichtbar und es ist nicht möglich, zu ihr zu navigieren.