Schede della shell Xamarin.FormsXamarin.Forms Shell Tabs

Scaricare esempio Scaricare l'esempioDownload Sample Download the sample

Quando il modello di spostamento per un'applicazione include un riquadro a comparsa, il livello successivo di spostamento nell'applicazione è la barra delle schede inferiore.When the navigation pattern for an application includes a flyout, the next level of navigation in the application is the bottom tab bar. Inoltre, quando il riquadro a comparsa è chiuso, la barra delle schede inferiore può essere considerato il livello di spostamento principale.In addition, when the flyout is closed the bottom tab bar can be considered to be the top level of navigation.

In alternativa, il modello di spostamento per un'applicazione può iniziare con le schede nella parte inferiore e non usare un riquadro a comparsa.Alternatively, the navigation pattern for an application can begin with bottom tabs and make no use of a flyout. In questo scenario, l'elemento figlio dell'oggetto Shell deve essere un oggetto TabBar che rappresenta la barra delle schede inferiore.In this scenario, the child of the Shell object should be a TabBar object, which represents the bottom tab bar.

Nota

Il tipo TabBar disabilita il riquadro a comparsa.The TabBar type disables the flyout.

Ogni oggetto FlyoutItem o TabBar può contenere uno o più oggetti Tab, con ogni oggetto Tab che rappresenta una scheda nella barra delle schede inferiore.Each FlyoutItem or TabBar object can contain one or more Tab objects, with each Tab object representing a tab on the bottom tab bar. Ogni oggetto Tab può contenere uno o più oggetti ShellContent e ogni oggetto ShellContent visualizza un singolo oggetto ContentPage.Each Tab object can contain one or more ShellContent objects, and each ShellContent object will display a single ContentPage object. Quando è presente più di un oggetto ShellContent in Tab, è possibile spostarsi tra gli oggetti ContentPage tramite le schede superiori.When more than one ShellContent object is present in a Tab object, the ContentPage objects will be navigable by top tabs.

All'interno di ogni oggetto ContentPage è possibile spostarsi ad altri oggetti ContentPage.Within each ContentPage object, additional ContentPage objects can be navigated to. Per altre informazioni sulla navigazione, vedere Navigazione nella shell Xamarin.Forms.For more information about navigation, see Xamarin.Forms Shell Navigation.

Applicazione a singola paginaSingle page application

L'applicazione shell più semplice è un'applicazione a singola pagina, che può essere creata aggiungendo un singolo oggetto Tab in un oggetto TabBar.The simplest Shell application is a single page application, which can be created by adding a single Tab object to a TabBar object. All'interno dell'oggetto Tab, un oggetto ShellContent deve essere impostato su un oggetto ContentPage:Within the Tab object, a ShellContent object should be set to a ContentPage object:

<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>
                <views:CatsPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

L'esempio di codice crea l'applicazione a singola pagina seguente:This code example results in the following single page application:

Screenshot di un'app shell a singola pagina, in iOS e AndroidScreenshot of a Shell single page app, on iOS and Android

Nota

La barra di spostamento può essere nascosta, se necessario, impostando la proprietà associata Shell.NavBarIsVisible su false nell'oggetto ContentPage.The navigation bar can be hidden, if required, by setting the Shell.NavBarIsVisible attached property to false on the ContentPage object.

La shell include operatori di conversione implicita che consentono di semplificare la gerarchia visiva della shell, senza introdurre visualizzazioni aggiuntive nella struttura ad albero visuale.Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified, without introducing additional views into the visual tree. Ciò è possibile perché un oggetto Shell sottoclassato può contenere solo oggetti FlyoutItem o un oggetto TabBar, che possono contenere solo oggetti Tab, che possono contenere solo oggetti ShellContent.This is possible because a subclassed Shell object can only ever contain FlyoutItem objects or a TabBar object, which can only ever contain Tab objects, which can only ever contain ShellContent objects. Questi operatori di conversione implicita possono essere usati per rimuovere gli oggetti TabBar, Tab e ShellContent nell'esempio precedente:These implicit conversion operators can be used to remove the TabBar, Tab, and ShellContent objects from the previous example:

<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"
       FlyoutBehavior="Disabled">
    <views:CatsPage />
</Shell>

Questa conversione implicita esegue automaticamente il wrapping dell'oggetto ContentPage in un oggetto ShellContent, di cui viene eseguito il wrapping in un oggetto Tab, di cui viene eseguito il wrapping in un oggetto FlyoutItem.This implicit conversion automatically wraps the ContentPage object in a ShellContent object, which is wrapped in a Tab object, which is wrapped in a FlyoutItem object. In un'applicazione a singola pagina non è necessario un riquadro a comparsa e quindi la proprietà Shell.FlyoutBehavior è impostata su Disabled.A flyout is unnecessary in a single page application, and therefore the Shell.FlyoutBehavior property is set to Disabled.

Importante

In un'applicazione shell ogni elemento ContentPage figlio di un oggetto ShellContent viene creato durante l'avvio dell'applicazione.In a Shell application, each ContentPage that's a child of a ShellContent object is created during application startup. L'aggiunta di ulteriori oggetti ShellContent usando questo approccio comporta la creazione di pagine aggiuntive durante l'avvio dell'applicazione e ciò può portare a un'esperienza di avvio insoddisfacente.Adding additional ShellContent objects using this approach will result in additional pages being created during application startup, which can lead to a poor startup experience. La shell, tuttavia, è anche in grado di creare pagine su richiesta, in risposta alla navigazione.However, Shell is also capable of creating pages on demand, in response to navigation. Per altre informazioni, vedere Caricamento efficiente delle pagine.For more information, see Efficient page loading.

Schede inferioriBottom tabs

Per gli oggetti Tab viene eseguito il rendering come schede inferiori, a condizione che vi siano più oggetti Tab in un singolo oggetto TabBar:Tab objects are rendered as bottom tabs, provided that there are multiple Tab objects in a single TabBar object:

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

I titoli e le icone delle schede vengono impostati in ogni oggetto Tab e visualizzati nelle schede inferiori:Tab titles and icons are set on each Tab object, and displayed on the bottom tabs:

Screenshot di un'app shell di due pagine con schede inferiori, in iOS e AndroidScreenshot of a Shell two page app with bottom tabs, on iOS and Android

In alternativa, è possibile usare gli operatori di conversione implicita della shell per rimuovere gli oggetti ShellContent e Tab nell'esempio precedente:Alternatively, Shell's implicit conversion operators can be used to remove the ShellContent and Tab objects from the previous example:

<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>
        <views:CatsPage IconImageSource="cat.png" />
        <views:DogsPage IconImageSource="dog.png" />
    </TabBar>
</Shell>

Questa conversione implicita esegue automaticamente il wrapping di ogni oggetto ContentPage in un oggetto ShellContent, quindi viene eseguito il wrapping di entrambi in un oggetto Tab.This implicit conversion automatically wraps each ContentPage object in a ShellContent object, which are then both wrapped in a Tab object.

Importante

In un'applicazione shell ogni elemento ContentPage figlio di un oggetto ShellContent viene creato durante l'avvio dell'applicazione.In a Shell application, each ContentPage that's a child of a ShellContent object is created during application startup. L'aggiunta di ulteriori oggetti ShellContent usando questo approccio comporta la creazione di pagine aggiuntive durante l'avvio dell'applicazione e ciò può portare a un'esperienza di avvio insoddisfacente.Adding additional ShellContent objects using this approach will result in additional pages being created during application startup, which can lead to a poor startup experience. La shell, tuttavia, è anche in grado di creare pagine su richiesta, in risposta alla navigazione.However, Shell is also capable of creating pages on demand, in response to navigation. Per altre informazioni, vedere Caricamento efficiente delle pagine.For more information, see Efficient page loading.

Classe TabTab class

La classe Tab include le proprietà seguenti che controllano l'aspetto e il comportamento delle schede:The Tab class includes the following properties that control tab appearance and behavior:

  • CurrentItem, di tipo ShellContent, ovvero l'elemento selezionato.CurrentItem, of type ShellContent, the selected item.
  • FlyoutDisplayOptions, di tipo FlyoutDisplayOptions, che definisce come vengono visualizzati l'elemento e i relativi elementi figlio nel riquadro a comparsa.FlyoutDisplayOptions, of type FlyoutDisplayOptions, defines how the item and its children are displayed in the flyout. Il valore predefinito è AsSingleItem.The default value is AsSingleItem.
  • FlyoutIcon, di tipo ImageSource, che definisce l'icona che verrà visualizzata nel riquadro a comparsa.FlyoutIcon, of type ImageSource, defines the icon that will be displayed in the flyout.
  • Icon, di tipo ImageSource, che definisce l'icona da visualizzare nelle parti del riquadro che non costituiscono il riquadro a comparsa.Icon, of type ImageSource, defines the icon to display in parts of the chrome which are not the flyout.
  • IsChecked, di tipo boolean, che definisce se l'elemento è attualmente evidenziato nel riquadro a comparsa.IsChecked, of type boolean, defines if the item is currently highlighted in the flyout.
  • IsEnabled, di tipo boolean, che definisce se l'elemento è selezionabile nel riquadro.IsEnabled, of type boolean, defines if the item is selectable in the chrome.
  • IsTabStop, di tipo bool, che indica se un oggetto Tab è incluso nella navigazione tramite tabulazione.IsTabStop, of type bool, indicates whether a Tab is included in tab navigation. Il valore predefinito è true e quando questo valore è false l'oggetto Tab viene ignorato dall'infrastruttura di navigazione tramite tabulazione, indipendentemente dall'impostazione di TabIndex.Its default value is true, and when its value is false the Tab is ignored by the tab-navigation infrastructure, irrespective if a TabIndex is set.
  • Items, di tipo IList<ShellContent>, che definisce tutto il contenuto all'interno di un oggetto Tab.Items, of type IList<ShellContent>, defines all the content within a Tab.
  • TabIndex, di tipo int, che indica l'ordine in cui gli oggetti Tab ricevono lo stato attivo quando l'utente si sposta tra gli elementi premendo TAB.TabIndex, of type int, indicates the order in which Tab objects receive focus when the user navigates through items by pressing the Tab key. Il valore predefinito della proprietà è 0.The default value of the property is 0.
  • Title, di tipo string, ovvero il titolo da visualizzare sulla scheda nell'interfaccia utente.Title, of type string, the title to display on the tab in the UI.

Contenuto della shellShell content

L'elemento figlio di ogni oggetto Tab è un oggetto ShellContent, la cui proprietà Content è impostata su un oggetto ContentPage:The child of every Tab object is a ShellContent object, whose Content property is set to a ContentPage:

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

All'interno di ogni oggetto ContentPage è possibile spostarsi ad altri oggetti ContentPage.Within each ContentPage object, additional ContentPage objects can be navigated to. Per altre informazioni sulla navigazione, vedere Navigazione nella shell Xamarin.Forms.For more information about navigation, see Xamarin.Forms Shell Navigation.

Nota

Il BindingContext di ogni oggetto ShellContent viene ereditato dall'oggetto Tab padre.The BindingContext of each ShellContent object is inherited from the parent Tab object.

Classe ShellContentShellContent class

La classe ShellContent include le proprietà seguenti che controllano l'aspetto e il comportamento del contenuto delle schede:The ShellContent class includes the following properties that control tab content appearance and behavior:

  • Content, di tipo object, ovvero il contenuto di ShellContent.Content, of type object, the content of the ShellContent.
  • ContentTemplate, di tipo DataTemplate, ovvero il modello usato per l'inserimento dinamico del contenuto di ShellContent.ContentTemplate, of type DataTemplate, the template used to dynamically inflate the content of the ShellContent.
  • FlyoutIcon, di tipo ImageSource, che definisce l'icona che verrà visualizzata nel riquadro a comparsa.FlyoutIcon, of type ImageSource, defines the icon that will be displayed in the flyout.
  • Icon, di tipo ImageSource, che definisce l'icona da visualizzare nelle parti del riquadro che non costituiscono il riquadro a comparsa.Icon, of type ImageSource, defines the icon to display in parts of the chrome which are not the flyout.
  • IsChecked, di tipo boolean, che definisce se l'elemento è attualmente evidenziato nel riquadro a comparsa.IsChecked, of type boolean, defines if the item is currently highlighted in the flyout.
  • IsEnabled, di tipo boolean, che definisce se l'elemento è selezionabile nel riquadro.IsEnabled, of type boolean, defines if the item is selectable in the chrome.
  • MenuItems, di tipo MenuItemCollection, ovvero le voci di menu da visualizzare nel riquadro a comparsa quando questo oggetto ShellContent è la pagina visualizzata.MenuItems, of type MenuItemCollection, the menu items to display in the flyout when this ShellContent is the presented page.
  • Title, di tipo string, ovvero il titolo da visualizzare nell'interfaccia utente.Title, of type string, the title to display in the UI.

Tutte queste proprietà sono supportate da oggetti BindableProperty e ciò significa che tali proprietà possono essere destinazioni di data binding.All of these properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

Schede inferiori e superioriBottom and top tabs

Quando è presente più di un oggetto ShellContent in un oggetto Tab, viene aggiunta una barra di schede superiore oltre alla barra inferiore, che consente di spostarsi tra gli oggetti ContentPage:When more than one ShellContent object is present in a Tab object, a top tab bar is added to the bottom tab, through which the ContentPage objects are navigable:

<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="domestic.png">
            <ShellContent>
                <views:CatsPage />
            </ShellContent>
            <ShellContent>
                <views:DogsPage />
            </ShellContent>
        </Tab>
        <Tab Title="Monkeys"
             Icon="monkey.png">
            <ShellContent>
                <views:MonkeysPage />
            </ShellContent>
        </Tab>
    </TabBar>
</Shell>

Il risultato è il layout illustrato negli screenshot seguenti:This results in the layout shown in the following screenshots:

Screenshot di un'app shell di due pagine con schede superiori e inferiori, in iOS e AndroidScreenshot of a Shell two page app with top and bottom tabs, on iOS and Android

In alternativa, è possibile usare gli operatori di conversione implicita della shell per rimuovere gli oggetti ShellContent e il secondo oggetto Tab nell'esempio precedente:Alternatively, Shell's implicit conversion operators can be used to remove the ShellContent objects, and the second Tab object from the previous example:

<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="domestic.png">
            <views:CatsPage />
            <views:DogsPage />
        </Tab>
        <views:MonkeysPage IconImageSource="monkey.png" />
    </TabBar>
</Shell>

Questa conversione implicita esegue automaticamente il wrapping di MonkeysPage in un oggetto ShellContent, di cui quindi viene eseguito il wrapping in un oggetto Tab.This implicit conversion automatically wraps MonkeysPage in a ShellContent object, which is then wrapped in a Tab object. Viene inoltre eseguito il wrapping in modo implicito di CatsPage e DogsPage in oggetti ShellContent.In addition, CatsPage and DogsPage are implicitly wrapped in ShellContent objects.

Caricamento efficiente delle pagineEfficient page loading

In un'applicazione shell ogni oggetto ContentPage in un oggetto ShellContent viene creato durante l'avvio dell'applicazione e ciò può portare a un'esperienza di avvio insoddisfacente.In a Shell application, every ContentPage object in a ShellContent object is created during application startup, which can lead to a poor startup experience. La shell, tuttavia, consente anche la creazione di pagine su richiesta, in risposta alla navigazione.However, Shell also allows pages to be created on demand, in response to navigation. A tale scopo, è possibile usare l'estensione di markup DataTemplate per convertire ogni oggetto ContentPage in un oggetto DataTemplate e quindi impostare il risultato come valore della proprietà ShellContent.ContentTemplate:This can be accomplished by using the DataTemplate markup extension to convert each ContentPage into a DataTemplate, and then setting the result as the ShellContent.ContentTemplate property value:

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

Questo codice XAML crea e visualizza CatsPage, perché è il primo elemento del contenuto dichiarato nell'oggetto Shell sottoclassato.This XAML creates and displays CatsPage, because it's the first item of content declared in the subclassed Shell object. È possibile spostarsi tra CatsPage e MonkeysPage tramite le schede inferiori e queste pagine vengono create solo quando l'utente si sposta su di esse.CatsPage and MonkeysPage can be navigated to via bottom tabs, and these pages are only created when the user navigates to them. Il vantaggio di questo approccio è che si evita di creare un'esperienza di avvio insoddisfacente, in quanto le pagine vengono create su richiesta in risposta alla navigazione, invece che all'avvio dell'applicazione.The advantage of this approach is that the poor startup experience is avoided, as pages are created on demand in response to navigation, rather than at application startup.

Aspetto delle schedeTab appearance

La classe Shell definisce le proprietà associate seguenti che controllano l'aspetto delle schede:The Shell class defines the following attached properties that control the appearance of tabs:

  • TabBarBackgroundColor, di tipo Color, che definisce il colore di sfondo per la barra delle schede.TabBarBackgroundColor, of type Color, that defines the background color for the tab bar. Se la proprietà non è impostata, viene usato il valore della proprietà BackgroundColor.If the property is unset, the BackgroundColor property value is used.
  • TabBarDisabledColor, di tipo Color, che definisce il colore disabilitato per la barra delle schede.TabBarDisabledColor, of type Color, that defines the disabled color for the tab bar. Se la proprietà non è impostata, viene usato il valore della proprietà DisabledColor.If the property is unset, the DisabledColor property value is used.
  • TabBarForegroundColor, di tipo Color, che definisce il colore di primo piano per la barra delle schede.TabBarForegroundColor, of type Color, that defines the foreground color for the tab bar. Se la proprietà non è impostata, viene usato il valore della proprietà ForegroundColor.If the property is unset, the ForegroundColor property value is used.
  • TabBarTitleColor, di tipo Color, che definisce il colore del titolo per la barra delle schede.TabBarTitleColor, of type Color, that defines the title color for the tab bar. Se la proprietà non è impostata, viene usato il valore della proprietà TitleColor.If the property is unset, the TitleColor property value will be used.
  • TabBarUnselectedColor, di tipo Color, che definisce il colore non selezionato per la barra delle schede.TabBarUnselectedColor, of type Color, that defines the unselected color for the tab bar. Se la proprietà non è impostata, viene usato il valore della proprietà UnselectedColor.If the property is unset, the UnselectedColor property value is used.

Tutte queste proprietà sono supportate da oggetti BindableProperty e ciò significa che tali proprietà possono essere destinazioni di data binding ed è possibile applicarvi stili.All of these properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings, and styled.

L'esempio seguente illustra uno stile XAML che imposta proprietà diverse per i colori delle schede:The following example shows a XAML style that sets different tab color properties:

<Style x:Key="BaseStyle"
       TargetType="Element">
    <Setter Property="Shell.TabBarBackgroundColor"
            Value="#3498DB" />
    <Setter Property="Shell.TabBarTitleColor"
            Value="White" />
    <Setter Property="Shell.TabBarUnselectedColor"
            Value="#B4FFFFFF" />
</Style>

È anche possibile definire lo stile delle schede usando fogli di stile CSS (Cascading Style Sheet).In addition, tabs can also be styled using Cascading Style Sheets (CSS). Per altre informazioni, vedere Xamarin.Forms Shell specific properties (Proprietà specifiche della shell Xamarin.Forms).For more information, see Xamarin.Forms Shell specific properties.