Barre d'applications

Une barre d'application se compose d'une barre d'outils et potentiellement d'autres vues. Exposez une ou plusieurs actions.

Le principal avantage de l'utilisation de la barre d'applications est de pouvoir tout personnaliser. Options de personnalisation telles que :

• Hauteur de la barre d'application personnalisée.
• Incluez tout contenu sans restrictions ni limitations (marges, taille, etc.).
• Barre d'application transparente.
• Etc.

REMARQUE : AppBar est une vue multiplateforme qui prend le relais lorsque la barre de navigation native atteint ses limites, comme l'ajout de contenu personnalisé, le positionnement avec des mises en page, etc.

Dans Xamarin.Forms, la barre d'application est généralement utilisée dans la propriété Shell.AppBar , qui place la barre d'application en tant que widget à hauteur fixe en haut de l'écran.

API

Ensuite, une liste avec les propriétés et les événements de l'AppBar.

Propriétés

| Propriété | Taper | Descriptif |
|----------| :------------ :| :------------ :|
| Placement | AppBarPlacement | Le placement de l'AppBar (en haut ou en bas). |
| Hauteurbarre | doubler | Définissez la hauteur de la barre d'application. |
| BarArrière-plan | Brosse | Un pinceau qui fournit l'arrière-plan. |
| Image d'arrière-plan de la barre | ImageSource | Un ImageSource qui fournit l'arrière-plan. |
| CouleurBarTexte | Couleur | La couleur utilisée dans les textes (titre, etc.). |
| Icône de navigation | ImageSource | Une ImageSource qui fournit l'icône de navigation (bouton de retour, etc.). |
| Titre du bouton de retour | chaîne | Définissez le titre du bouton de retour de la barre d'application. |
| BordureCouleur | Couleur | La couleur de la bordure de la barre d'application. |
| Épaisseur de bordure | Épaisseur | La largeur de la bordure de la barre d'application de chaque côté. |
| FontFamily | chaîne | La famille de polices utilisée dans les textes de la barre d'application. |
| FontAttributes | FontAttributes | Les attributs de police utilisés dans les textes de la barre d'application. |
| Taille de police | doubler | La taille de police utilisée dans les textes de la barre d'application. |
| TitreAfficher | Voir | Affichez n'importe quelle vue Xamarin.Forms dans la barre d'application. |
| RetourCommande | ICommande | Commande exécutée en revenant en arrière. |
| BackCommandParameter | objet | Le paramètre de commande utilisé pour revenir en arrière. |

Événements

| Événement | Descriptif |
|----------| :-------------------- :|
| BackTapped | Événement déclenché lorsque l'utilisateur revient en arrière. |

Scénarios

Voyons quelques exemples couvrant des scénarios courants.

Barre d'application simple

Voyons un exemple de base :

<Shell>
     <Shell.AppBar>
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Barre d'application personnalisée

Personnalisation de l'apparence à l'aide d'une barre transparente avec une hauteur et un contenu personnalisés (TitleView).

<Shell>
     <Shell.AppBar>
        <AppBar  
            BarHeight="120"
            BarBackgroundColor="Transparent">
            <AppBar.TitleView>
            ...
            </AppBar.TitleView>
        </AppBar>
     </Shell.AppBar>
    ...
</Shell>

Placement

Une barre d'application supérieure (emplacement par défaut) affiche la navigation et les actions en haut des écrans mobiles.

<Shell>
     <Shell.AppBar
          Placement="Top">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Une barre d'application inférieure affiche la navigation et les actions en bas des écrans mobiles.

<Shell>
     <Shell.AppBar
          Placement="Bottom">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Utilisation des styles

Peut personnaliser l'apparence du contenu de l'onglet, de la bande d'onglets, de l'élément d'onglet, etc. à l'aide de styles XAML ou CSS .

Utilisation de XAML :

<Style
    x:Key="AppBarStyle"
    TargetType="AppBar">
    <Setter
        Property="BarHeight"
        Value="120" />
    <Setter
        Property="BarBackgroundColor"
        Value="Transparent" />
</Style>

Utilisation de CSS :

.appBarStyle {
  background: transparent;
  height: 120px;
}

Difficulté : Moyenne

Plus d'information

Basé sur https://github.com/xamarin/Xamarin.Forms/issues/10774