Partager via

Xamarin.Forms Pages d’interpréteur de commandes

  • Article

Un ShellContent objet représente l’objet ContentPage pour chaque FlyoutItem ou Tab. Lorsque plusieurs objets ShellContent sont présents dans un objet Tab, il est possible de naviguer entre les objets ContentPage grâce aux onglets du haut. Dans une page, des objets supplémentaires ContentPage appelés pages de détails peuvent être accédés.

En outre, la Shell classe définit les propriétés jointes qui peuvent être utilisées pour configurer l’apparence des pages dans les Xamarin.Forms applications Shell. Cela comprend notamment la configuration des couleurs de la page, la configuration du mode de présentation de la page, la désactivation de la barre de navigation et de la barre d’onglet ainsi que l’affichage des vues dans la barre de navigation.

Afficher les pages

Dans Xamarin.Forms les applications Shell, les pages sont généralement créées à la demande en réponse à la navigation. Pour ce faire, utilisez l’extension de DataTemplate balisage pour définir la ContentTemplate propriété de chaque ShellContent objet sur un ContentPage objet :

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

Dans cet exemple, les opérateurs de conversion implicite de Shell sont utilisés pour supprimer les Tab objets de la hiérarchie visuelle. Toutefois, chaque ShellContent objet est rendu dans un onglet :

Capture d’écran d’une application Shell avec trois pages, sur iOS et Android

Remarque

Le BindingContext de chaque objet ShellContent est hérité de l’objet Tab parent.

Dans chaque objet ContentPage, des objets ContentPage supplémentaires sont accessibles. Pour plus d’informations sur la navigation, consultez Xamarin.Forms navigation Shell.

Charger des pages au démarrage de l’application

Dans une application Shell, chaque ContentPage objet est généralement créé à la demande, en réponse à la navigation. Toutefois, il est également possible de créer ContentPage des objets au démarrage de l’application.

Avertissement

ContentPage les objets créés au démarrage de l’application peuvent entraîner une mauvaise expérience de démarrage.

ContentPage les objets peuvent être créés au démarrage de l’application en définissant les ShellContent.Content propriétés sur ContentPage des objets :

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

Dans cet exemple, CatsPage, DogsPageet MonkeysPage sont tous créés au démarrage de l’application, plutôt qu’à la demande en réponse à la navigation.

Remarque

La Content propriété est la propriété de contenu de la ShellContent classe et n’a donc pas besoin d’être définie explicitement.

Définir les couleurs de page

La classe Shell définit les propriétés jointes suivantes qui peuvent être utilisées pour définir les couleurs de page dans une application Shell :

  • BackgroundColor, de type Color : définit la couleur d’arrière-plan du chrome Shell. La couleur n’apparaît pas derrière le contenu Shell.
  • DisabledColor, de type Color : définit la couleur permettant d’ombrer le texte et les icônes désactivées.
  • ForegroundColor, de type Color : définit la couleur permettant d’ombrer le texte et les icônes.
  • TitleColor, de type Color : définit la couleur utilisée pour le titre de la page actuelle.
  • UnselectedColor, de type Color : définit la couleur appliquée au texte et aux icônes non sélectionnés dans le chrome Shell.

Toutes ces propriétés s’appuient sur des objets BindableProperty, ce qui signifie qu’elles peuvent être des cibles de liaisons de données et des styles XAML peuvent être appliqués. En outre, les propriétés peuvent être définies à l’aide de feuilles de style en cascade (CSS). Pour plus d’informations, consultez Xamarin.Forms les propriétés spécifiques de Shell.

Remarque

Certaines propriétés permettent de définir les couleurs d’onglet. Pour plus d’informations, consultez Apparence d’onglet.

Le XAML suivant montre la configuration de propriétés de couleur dans une classe Shell sous-classée :

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

</Shell>

Dans cet exemple, les valeurs de couleur seront appliquées à toutes les pages dans l’application Shell à moins d’être substituées au niveau de la page.

Étant donné que les propriétés de couleur sont des propriétés jointes, elles peuvent également être définies sur des pages individuelles afin de définir les couleurs sur cette page :

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

</ContentPage>

Vous pouvez également définir les propriétés de couleur avec un style XAML :

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

Pour plus d’informations sur les styles XAML, consultez Applications de style Xamarin.Forms à l’aide de styles XAML.

Définir le mode de présentation de la page

Par défaut, une petite animation de navigation se produit lorsqu’une page fait l’objet d’un accès à l’aide de la méthode GoToAsync. Toutefois, pour modifier ce comportement, définissez la propriété jointe Shell.PresentationMode sur un ContentPage l’un des membres de l’énumération PresentationMode :

  • NotAnimated indique que la page sera affichée sans animation de navigation.
  • Animated indique que la page sera affichée avec une animation de navigation. Ceci est la valeur par défaut de la propriété jointe Shell.PresentationMode.
  • Modal indique que la page est affichée comme page modale.
  • ModalAnimated indique que la page est affichée comme page modale, avec une animation de navigation.
  • ModalNotAnimated indique que la page est affichée comme page modale, sans animation de navigation.

Important

Le type PresentationMode est une énumération d’indicateurs. Cela signifie qu’une combinaison de membres de l’énumération peut être appliquée dans le code. Toutefois, pour faciliter l’utilisation dans XAML, le membre ModalAnimated est une combinaison des membres Animated et Modal, et le membre ModalNotAnimated est une combinaison des membres NotAnimated et Modal. Pour plus d’informations sur les énumérations d’indicateur, consultez Types énumération comme indicateurs binaires.

L’exemple XAML suivant définit la propriété jointe Shell.PresentationMode sur un ContentPage :

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

Dans cet exemple, ContentPage est défini pour s’afficher comme une page modale, lorsque la page fait l’objet d’un accès avec la méthode GoToAsync.

Activer l’ombre de la barre de navigation

La Shell.NavBarHasShadow propriété jointe, de type bool, contrôle si la barre de navigation a une ombre. Par défaut, la valeur de la propriété est false sur iOS et true sur Android.

Bien que cette propriété puisse être définie sur un objet Shell sous-classé, elle peut également être définie sur toutes les pages devant afficher l’ombre de la barre de navigation. Par exemple, le XAML suivant montre l’activation de l’ombre de la barre de navigation sur une page ContentPage :

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

Cela entraîne l’activation de l’ombre de la barre de navigation.

Désactiver la barre de navigation

La Shell.NavBarIsVisible propriété jointe, de type bool, contrôle si la barre de navigation est visible lorsqu’une page est présentée. Par défaut, la valeur de la propriété est true.

Bien que cette propriété puisse être définie sur un objet Shell sous-classé, elle est généralement définie sur toutes les pages sur lesquelles vous souhaitez masquer la barre de navigation. Par exemple, le XAML suivant montre la désactivation de la barre de navigation sur une page ContentPage :

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

Ainsi, la barre de navigation devient invisible lorsque la page s’affiche :

Capture d’écran de la page Shell avec une barre de navigation invisible sur iOS et Android

Affichage des vues dans la barre de navigation

La Shell.TitleView propriété jointe, de type View, permet d’afficher n’importe quelle View valeur dans la barre de navigation.

Bien que cette propriété puisse être définie sur un objet Shell sous-classé, elle peut également être définie sur toutes les pages devant afficher une vue dans la barre de navigation. Par exemple, le XAML suivant montre l’affichage d’une Image dans la barre de navigation sur une page ContentPage :

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

Ainsi, une image s’affiche dans la barre de navigation de la page :

Capture d’écran de la page Shell avec une vue de titre sur iOS et Android

Important

Si la barre de navigation est invisible, avec la propriété jointe NavBarIsVisible, la vue de titre ne s’affichera pas.

De nombreuses vues ne s’affichent dans la barre de navigation que si la taille de la vue est spécifiée avec les propriétés WidthRequest et HeightRequest, ou si l’emplacement de la vue est spécifié avec les propriétés HorizontalOptions et VerticalOptions.

La classe Layout dérive de la classe View, la propriété jointe TitleView peut donc être configurée de façon à afficher une classe de disposition qui contient plusieurs vues. De même, la classe ContentView dérive au final de la classe View, la propriété jointe TitleView peut donc être configurée de façon à afficher une ContentView qui contient plusieurs vues.

Visibilité de la page

Shell respecte la visibilité de la page, définie avec la propriété IsVisible. Par conséquent, lorsque la propriété IsVisible d’une page est définie sur false elle n’est pas visible dans l’application Shell et il n’est pas possible d’y accéder.