Udostępnij przez

Karty powłoki .NET MAUI

Przeglądaj przykład. Przeglądanie przykładu

Środowisko nawigacji zapewniane przez powłokę interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) jest oparte na oknach wysuwanych i kartach. Górny poziom nawigacji w aplikacji typu Shell to menu typu flyout lub dolny pasek zakładek, w zależności od wymagań nawigacji aplikacji. Gdy nawigacja aplikacji zaczyna się od dolnych zakładek, element podrzędny podklasowanego obiektu Shell powinien być obiektem TabBar, który reprezentuje dolny pasek zakładek.

Obiekt TabBar może zawierać jeden lub więcej Tab obiektów, przy czym każdy Tab obiekt reprezentuje kartę na dolnym pasku kart. Każdy Tab obiekt może zawierać jeden lub więcej ShellContent obiektów, a każdy ShellContent obiekt wyświetla pojedynczy ContentPage. Gdy w ShellContent obiekcie znajduje się więcej niż jeden Tab obiekt, ContentPage obiekty są nawigowalne przez górne karty. Na karcie można przejść do innych ContentPage obiektów, które są nazywane stronami szczegółów.

Ważne

Typ TabBar wyłącza okno wysuwane.

Wskazówka

Karty można wyświetlać jako wysuwaną kartę, dodając wiele ShellContent obiektów do obiektu FlyoutItem lub obiektu Tab. Aby uzyskać więcej informacji, zobacz menu powłoki .NET MAUI.

Pojedyncza strona

Aplikację powłoki jednostronicowej można utworzyć, dodając Tab obiekt do TabBar obiektu. W obiekcie Tab obiekt ShellContent należy ustawić jako obiekt ContentPage.

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

W tym przykładzie zostanie wyświetlona następująca aplikacja jednostronicowa:

Zrzut ekranu przedstawiający aplikację jednostronicową powłoki.

Shell ma niejawne operatory konwersji, które umożliwiają uproszczenie hierarchii wizualnej Shell bez wprowadzania większej liczby widoków do drzewa wizualnego. To uproszczenie jest możliwe, ponieważ podklasowany Shell obiekt może zawierać tylko obiekty FlyoutItem lub obiekt TabBar, który może zawierać tylko obiekty Tab, które mogą zawierać tylko obiekty ShellContent. Te operatory konwersji niejawnej mogą służyć do usuwania Tab obiektów z poprzedniego przykładu:

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

Ta niejawna konwersja automatycznie opakowuje obiekt ShellContent w obiekcie Tab, który jest opakowany w obiekcie TabBar.

Ważne

W aplikacji Shell strony są tworzone na żądanie w odpowiedzi na nawigację. Jest to realizowane przy użyciu rozszerzenia znaczników DataTemplate w celu ustawienia właściwości ContentTemplate każdego obiektu ShellContent na obiekt ContentPage.

Dolne zakładki

Jeśli w jednym Tab obiekcie znajduje się wiele TabBar obiektów, Tab obiekty są renderowane jako karty dolne:

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

Właściwość Title typu stringdefiniuje tytuł karty. Właściwość Icon typu ImageSourcedefiniuje ikonę karty:

Zrzut ekranu przedstawiający aplikację Shell składającą się z dwóch części z dolnymi kartami.

Jeśli na pasku TabBar znajduje się więcej niż pięć zakładek, pojawi się zakładka Więcej, która może służyć do uzyskania dostępu do pozostałych zakładek:

Zrzut ekranu przedstawiający aplikację Shell z kartą Więcej.

Ponadto niejawne operatory konwersji Shell mogą służyć do usunięcia obiektów ShellContent i Tab z poprzedniego przykładu.

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

Ta niejawna konwersja automatycznie opakowuje każdy ShellContent obiekt w Tab obiekcie.

Ważne

W aplikacji Shell strony są tworzone na żądanie w odpowiedzi na nawigację. Jest to realizowane przy użyciu rozszerzenia znaczników DataTemplate do ustawienia właściwości ContentTemplate każdego obiektu ShellContent do obiektu ContentPage.

Zakładki dolne i górne

Gdy w ShellContent obiekcie znajduje się więcej niż jeden Tab obiekt, górny pasek karty jest dodawany do karty dolnej, za pomocą której ContentPage obiekty można nawigować:

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

Ten kod powoduje wyświetlenie układu pokazanego na poniższym zrzucie ekranu:

Zrzut ekranu przedstawiający aplikację Shell z dwiema stronami z kartami u góry i u dołu.

Ponadto niejawne operatory konwersji powłoki Shell mogą być używane do usunięcia drugiego Tab obiektu z poprzedniego przykładu.

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

Ta niejawna konwersja automatycznie opakowuje trzeci ShellContent obiekt w Tab obiekcie.

Wygląd karty

Klasa Shell definiuje następujące dołączone właściwości, które kontrolują wygląd kart:

  • TabBarBackgroundColor, typu Color, który definiuje kolor tła paska karty. Jeśli właściwość nie jest ustawiona, używana jest wartość właściwości BackgroundColor.
  • TabBarDisabledColor, typu Color, który definiuje wyłączony kolor paska karty. Jeśli właściwość nie została określona, zostanie użyta wartość właściwości DisabledColor.
  • TabBarForegroundColor, typu Color, który definiuje kolor pierwszego planu dla paska karty. Jeśli właściwość nie jest ustawiona, zostanie użyta wartość właściwości ForegroundColor.
  • TabBarTitleColor, typu Color, który definiuje kolor tytułu dla paska karty. Jeśli właściwość nie jest ustawiona, zostanie użyta wartość właściwości TitleColor.
  • TabBarUnselectedColor, typu Color, który definiuje niezaznaczony kolor paska karty. Jeśli właściwość nie jest ustawiona, zostanie użyta wartość właściwości UnselectedColor.

Wszystkie te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że właściwości mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Trzy właściwości, które mają największy wpływ na kolor karty, to TabBarForegroundColor, TabBarTitleColor i TabBarUnselectedColor:

  • Jeśli tylko TabBarTitleColor właściwość jest ustawiona, jej wartość będzie używana do kolorowania tytułu i ikony wybranej karty. Jeśli TabBarTitleColor wartość nie zostanie ustawiona, kolor tytułu będzie zgodny z wartością TabBarForegroundColor właściwości.
  • Jeśli właściwość TabBarForegroundColor jest ustawiona, a właściwość TabBarUnselectedColor nie jest ustawiona, to wartość właściwości TabBarForegroundColor będzie używana do kolorowania tytułu i ikony wybranej karty.
  • Jeśli tylko właściwość TabBarUnselectedColor jest ustawiona, jej wartość zostanie użyta do kolorowania tytułu i ikony karty niezaznaczonej.

Przykład:

  • TabBarTitleColor Gdy właściwość jest ustawiona na Green, tytuł i ikona wybranej karty są zielone, a niezaznaczone karty pasują do kolorów systemowych.
  • TabBarForegroundColor Gdy właściwość jest ustawiona na Blue, tytuł i ikona wybranej karty są niebieskie, a karty nieaktywne dopasowują się do kolorów systemu.
  • TabBarTitleColor Gdy właściwość TabBarTitleColor jest ustawiona na Green i właściwość TabBarForegroundColor jest ustawiona na Blue, to tytuł jest zielony, a ikona jest niebieska dla wybranej karty, a niezaznaczone karty pasują do kolorów systemowych.
  • TabBarTitleColor Gdy właściwość jest ustawiona na Green, a właściwość Shell.ForegroundColor na Blue, tytuł jest zielony, a ikona niebieska dla wybranej karty, a niezaznaczone karty pasują do kolorów systemowych. Dzieje się tak, ponieważ wartość właściwości Shell.ForegroundColor propaguje się do TabBarForegroundColor.
  • Podczas gdy właściwość TabBarTitleColor jest ustawiona na Green, właściwość TabBarForegroundColor jest ustawiona na Blue, a właściwość TabBarUnselectedColor jest ustawiona na Red, tytuł jest zielony, a ikona niebieska dla wybranej karty, natomiast tytuły i ikony niezaznaczonych kart są czerwone.

W poniższym przykładzie pokazano styl XAML, który ustawia różne właściwości koloru paska tabulatora:

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

Ponadto karty można również stylować przy użyciu kaskadowych arkuszy stylów (CSS). Aby uzyskać więcej informacji, zobacz właściwości specyficzne dla powłoki .NET MAUI.

Wybór karty

Gdy aplikacja powłoki używająca paska karty jest uruchamiana po raz pierwszy, Shell.CurrentItem właściwość jest ustawiana na pierwszy Tab obiekt w podklasowym Shell obiekcie. Można jednak ustawić właściwość na inną Tab, jak pokazano w poniższym przykładzie:

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

W tym przykładzie właściwość CurrentItem ustawia się na obiekt ShellContent o nazwie dogsItem, co powoduje jego wybranie i wyświetlenie. W tym przykładzie do zawijania każdego ShellContent obiektu w Tab obiekcie jest używana niejawna konwersja.

Równoważny kod języka C#, biorąc pod uwagę ShellContent obiekt o nazwie dogsItem, to:

CurrentItem = dogsItem;

W tym przykładzie CurrentItem właściwość jest ustawiana w klasie podklasowej Shell . Alternatywnie, można ustawić właściwość CurrentItem w dowolnej klasie za pomocą statycznej właściwości Shell.Current.

Shell.Current.CurrentItem = dogsItem;

Pasek zakładek i widoczność zakładki

Pasek kart i karty są domyślnie widoczne w aplikacjach powłoki. Pasek kart można jednak ukryć, ustawiając właściwość dołączoną Shell.TabBarIsVisible na false.

Mimo że tę właściwość można ustawić na podklasowym Shell obiekcie, zazwyczaj jest ona ustawiana na dowolnych ShellContent obiektach lub ContentPage , które mają sprawić, że pasek tabulacji będzie niewidoczny:

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

W tym przykładzie pasek zakładek jest ukryty po wybraniu zakładki Psy na górze.

Ponadto obiekty mogą być ukryte poprzez Tab ustawienie właściwości powiązywalnej na false:

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

W tym przykładzie ukryta jest druga zakładka.

  • Last updated on