Sdílet prostřednictvím

Xamarin.Forms Karty prostředí

Navigační prostředí poskytované prostředím Xamarin.Forms Shell je založené na informačních náchocích a kartách. Nejvyšší úroveň navigace v aplikaci Prostředí je buď informační panel, nebo dolní panel karet v závislosti na požadavcích na navigaci aplikace. Když navigační prostředí aplikace začíná dolními kartami, podřízeným objektem TabBar podtřídy Shell by měl být objekt, který představuje dolní panel karet.

Objekt TabBar může obsahovat jeden nebo více Tab objektů, přičemž každý Tab objekt představuje kartu na dolním panelu karet. Každý Tab objekt může obsahovat jeden nebo více ShellContent objektů, přičemž každý ShellContent objekt zobrazuje jeden ContentPage. Pokud v objektu Tab existuje více než jeden ShellContent objekt, ContentPage budou se objekty procházet horními kartami. Na kartě je možné přejít na další ContentPage objekty, které se označují jako stránky podrobností.

Důležité

Typ TabBar zakáže informační nabídku.

Samostatná stránka

Jednostrákovou aplikaci Prostředí lze vytvořit přidáním Tab objektu do objektu TabBar . V rámci objektu Tab ShellContent by měl být objekt nastaven na ContentPage objekt:

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

Výsledkem tohoto příkladu kódu je následující jednostráková aplikace:

Snímek obrazovky s jednostrákovou aplikací shellu v iOSu a Androidu

Shell má implicitní operátory převodu, které umožňují zjednodušení hierarchie vizuálů prostředí, aniž by bylo nutné do vizuálního stromu zavést další zobrazení. To je možné, protože podtříděný Shell objekt může obsahovat FlyoutItem pouze objekty nebo TabBar objekt, který může obsahovat Tab pouze objekty, které mohou obsahovat ShellContent pouze objekty. Tyto implicitní operátory převodu Tab lze použít k odebrání objektů z předchozího příkladu:

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

Tento implicitní převod automaticky zabalí ShellContent objekt do objektu Tab , který je zabalený v objektu TabBar .

Důležité

V aplikaci Prostředí se stránky vytvářejí na vyžádání v reakci na navigaci. Toho lze dosáhnout pomocí DataTemplate rozšíření značek k nastavení ContentTemplate vlastnosti každého ShellContent objektu ContentPage na objekt.

Dolní karty

TabObjekty se vykreslují jako dolní karty za předpokladu, že v jednom TabBar objektu je více Tab objektů:

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

Vlastnost Title typu stringdefinuje název karty. Vlastnost Icon typu ImageSourcedefinuje ikonu karty:

Snímek obrazovky se dvěma stránkovými aplikacemi shellu se spodními kartami v iOSu a Androidu

Pokud je na kartě TabBarVíce než pět karet, zobrazí se karta Další , která se dá použít pro přístup k dalším kartám:

Snímek obrazovky aplikace Shell s kartou Další v iOSu a Androidu

Kromě toho lze k odebrání ShellContent objektů a Tab objektů z předchozího příkladu použít implicitní převodní operátory Shellu:

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

Tento implicitní převod automaticky zabalí každý ShellContent objekt do objektu Tab .

Důležité

V aplikaci Prostředí se stránky vytvářejí na vyžádání v reakci na navigaci. Toho lze dosáhnout pomocí DataTemplate rozšíření značek k nastavení ContentTemplate vlastnosti každého ShellContent objektu ContentPage na objekt.

Dolní a horní karty

Pokud v objektu Tab existuje více než jeden ShellContent objekt, přidá se horní panel karet na dolní kartu, přes který ContentPage se objekty dají procházet:

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

Výsledkem je rozložení zobrazené na následujících snímcích obrazovky:

Snímek obrazovky se dvěma stránkovými aplikacemi shellu s horními a dolními kartami v iOSu a Androidu

Kromě toho lze implicitní převodní operátory Shellu použít k odebrání druhého Tab objektu z předchozího příkladu:

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

Tento implicitní převod automaticky zabalí třetí ShellContent objekt do objektu Tab .

Vzhled tabulátoru

Třída Shell definuje následující připojené vlastnosti, které řídí vzhled karet:

  • TabBarBackgroundColor, typu Color, který definuje barvu pozadí pro panel karet. Pokud vlastnost není nastavena, použije se BackgroundColor hodnota vlastnosti.
  • TabBarDisabledColor, typu Color, který definuje zakázanou barvu pro panel karet. Pokud vlastnost není nastavena, použije se DisabledColor hodnota vlastnosti.
  • TabBarForegroundColor, typu Color, který definuje barvu popředí pro panel karet. Pokud vlastnost není nastavena, použije se ForegroundColor hodnota vlastnosti.
  • TabBarTitleColor, typu Color, který definuje barvu nadpisu pro panel karet. Pokud vlastnost není nastavena, TitleColor použije se hodnota vlastnosti.
  • TabBarUnselectedColor, typu Color, která definuje nevybranou barvu pro panel karet. Pokud vlastnost není nastavena, použije se UnselectedColor hodnota vlastnosti.

Všechny tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že vlastnosti mohou být cíle datových vazeb a stylovány.

Následující příklad ukazuje styl XAML, který nastavuje různé vlastnosti barvy pruhu karet:

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

Kromě toho lze pomocí šablon stylů CSS (Cascading Style Sheets) také stylovat tabulátory. Další informace najdete v tématu Xamarin.Forms Specifické vlastnosti prostředí.

Výběr karty

Při prvním spuštění aplikace Prostředí, která používá panel karet, Shell.CurrentItem bude vlastnost nastavena na první Tab objekt v podtřídě objektu Shell . Vlastnost však lze nastavit na jinou Tab, jak je znázorněno v následujícím příkladu:

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

Tento příklad nastaví CurrentItem vlastnost na ShellContent objekt s názvem dogsItem, což vede k jeho výběru a zobrazení. V tomto příkladu se implicitní převod používá k zabalení každého ShellContent objektu v objektu Tab .

Ekvivalentní kód jazyka C# s názvem objektu ShellContent dogsItemje:

CurrentItem = dogsItem;

V tomto příkladu CurrentItem je vlastnost nastavena v podtřídě Shell třídy. Alternativně CurrentItem lze vlastnost nastavit v libovolné třídě prostřednictvím Shell.Current statické vlastnosti:

Shell.Current.CurrentItem = dogsItem;

TabBar a viditelnost tabulátoru

Panel karet a karty jsou ve výchozím nastavení viditelné v aplikacích shellu. Panel karet však lze skrýt nastavením Shell.TabBarIsVisible připojené vlastnosti na false.

I když lze tuto vlastnost nastavit u podtříděného Shell objektu, obvykle je nastavená u všech ShellContent objektů nebo ContentPage objektů, které chtějí, aby panel karet byl neviditelný:

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

V tomto příkladu je panel karet skrytý, když je vybraná horní karta Psi .

Kromě toho Tab lze objekty skrýt nastavením IsVisible vlastnosti bindable 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>

V tomto příkladu je druhá karta skrytá.

  • Last updated on