Exploration de la barre de titre dans .net Maui

Apprenez à personnaliser la barre Title de votre application Windows avec .net Maui.

La liberté de choisir les couleurs qui vous définissent, les chaussures que vous aimez ou cette coiffure qui vous fait vous sentir incroyablement à l’aise sont des expressions uniques de votre personnalité. Il en va de même pour les applications: plus nous avons d’options de personnalisation, mieux nous pouvons les adapter aux besoins des utilisateurs, leur donnant cette touche unique qui les rend à la fois spéciaux et fonctionnels.

Dans cet article, je vais vous apprendre à personnaliser le Barre de titre de vos applications Windows en utilisant .FILET. Profitez de ces connaissances pour offrir une expérience utilisateur de plus en plus mémorable et personnalisée.

Qu’est-ce qu’une barre de titre?

Au cas où vous ne le savez pas, la barre de titre est une barre horizontale située en haut d’une application. Son objectif principal est de servir d’en-tête de la fenêtre, et il est facilement reconnaissable car il contient les boutons pour fermer, minimiser et maximiser la fenêtre.

Image obtenue à partir du documentation officielle.

Propriétés de la barre de titre

Dans .net Maui, vous pouvez personnaliser le Barre de titre Pour ajouter une touche unique et améliorer la personnalité de votre application. Dans cette session, je vais vous montrer les propriétés disponibles à utiliser et présenter un diagramme visuel qui indique clairement où chacun est situé dans la barre de titre.

Jetons un coup d’œil à chacune de ces propriétés:

• Icône: L’icône située sur le côté gauche, avec des dimensions réglées sur une taille par défaut de 16×16 pixels. Taper: Images. (Paramètre facultatif.)
• Titre: Le titre de la barre, généralement le nom de l’application. Taper: chaîne.
• Sous-titre: Le sous-titre de la barre, fournissant généralement des informations supplémentaires liées au titre de l’application. Taper: chaîne.
• Contenu principal: Le contenu qui sera affiché avant l’icône du Barre de titre. Étant de type iView, il permet d’ajouter tout élément qui implémente cette interface (comme une étiquette, un bouton, etc.) à utiliser. Taper: Voir.
• Contenu de fin: Le contrôle affiché après le contrôle du contenu dans la barre de titre. En d’autres termes, c’est le contenu qui apparaît à droite de la zone centrale de la barre de titre (après le contenu principal). Taper: Voir.
• Contenu: L’élément affiché au centre de la barre de titre. Ce contenu est placé entre le contenu «dirigeant» (qui est avant l’icône) et le contenu «traînant». Taper: Voir.

Explorons certaines propriétés supplémentaires qui peuvent améliorer l’apparence de votre application:

• FourgelColor: Cette propriété est utilisée pour définir la couleur pour le titre et le sous-titre de la barre de titre. Taper: Couleur.
• DefaultTemplate: Il s’agit de la conception ou de la structure de base utilisée pour rendre la barre de titre par défaut. Si l’apparence de la barre de titres n’est pas modifiée, le defaultTemplate sera utilisé. Taper: ControlTemplate.
• Abseaux: Cette propriété vous permet de définir une liste d’éléments de l’interface (tels que des boutons, des étiquettes, etc.) qui ne sont pas affectés par le comportement de «traînée». En d’autres termes, si l’utilisateur essaie de cliquer et de glisser à partir de l’un de ces éléments, au lieu de déplacer la fenêtre, ces éléments géreront directement les actions programmées pour eux. Taper: IList<IView>.

💡 pour garder à l’esprit

• La hauteur par défaut et standard de la barre de titre est de 32 pixels, mais elle peut être personnalisée. Trouver des informations plus détaillées sur le Mesures de ses composants et autres informations de conception précieuses ici.
• Les propriétés mentionnées ci-dessus peuvent toutes être stylisées et utilisées pour les liaisons de données, à l’exception du modèle par défaut et des éléments de passe.
• Les vues attribuées au contenu, au contenu de premier plan et aux propriétés du contenu de parcours empêcheront toute interaction avec la zone de la barre de titre, car elles prendront le contrôle de toutes les entrées dans cette région.

Comment créer la barre de titre

Maintenant que vous connaissez les propriétés pour personnaliser votre barre de titre, plongeons-nous dans l’implémentation! Dans cet exemple, la barre de titre comportera un titre et un sous-titre à gauche, une barre de recherche au centre et un bouton à droite.

<TitleBar Title="Food App" Subtitle="Preview" BackgroundColor="#9fc5e8ff">
  <TitleBar.Content>
    <SearchBar Placeholder="Search"
    MaximumWidthRequest="300"
    HorizontalOptions="FillAndExpand"
    VerticalOptions="Center" />
  </TitleBar.Content>
  <TitleBar.TrailingContent>
    <Button Text="LR" BackgroundColor="Blue" Margin="0,10"/>
  </TitleBar.TrailingContent>
</TitleBar>

Explication du code

1. Ouvrir le <TitleBar> Tags et ajouter le Titre et Sous-titre. À l’intérieur de ces balises, incluez tous les éléments qui feront partie de la barre de titre.

2. <TitleBar.Content>: Si vous souhaitez inclure un élément visuel dans la zone de contenu, placez-le simplement à l’intérieur du <TitleBar.Content> Tags. Dans cet exemple, une barre de recherche est utilisée.

3. <TitleBar.TrailingContent> et <TitleBar.LeadingContent>: Similaire à <TitleBar.Content>ces sections vous permettent d’ajouter des éléments visuels à leurs zones respectives. Utiliser <TitleBar.TrailingContent> pour le contenu sur le côté droit et <TitleBar.LeadingContent> pour le contenu du côté gauche. Dans l’exemple, nous venons d’ajouter un élément pour le Continent.

Le résultat

Le code de l’exemple précédent vous permettra de créer une barre de titre similaire à celle ci-dessous:

🗒️ IMPORTANT: Vous pouvez masquer la barre de titre en définissant le Est visible propriété FAUX. Lorsque cela se produit, le contenu de la fenêtre entier sera affiché dans la zone précédemment occupée par la barre de titre.

États visuels de la barre de titre

La barre de titre comprend également plusieurs états visuels que vous pouvez utiliser, ce qui facilite la gestion de l’État. Si vous n’êtes pas familier avec les états visuels, comme indiqué dans la documentation officielle, «Visual State Manager fournit un moyen structuré de modifier des changements visuels dans l’interface utilisateur à partir du code.» Si c’est votre première lecture à ce sujet, je vous encourage à vérifier Page des états visuels de Microsoft.

Ci-dessous, je vais vous montrer les états visuels disponibles pour la barre de titre:

L’ajout de l’état visuel est très simple. Ci-dessous, je fournis un exemple d’extrait de code tiré de la documentation officielle. Dans ce cas, les états visuels Titlebartitleactive et TitreBartitleinactiveà partir de la liste mentionnée ci-dessus, sont utilisés pour ajuster le Fond de fond propriété. La couleur d’arrière-plan change dynamiquement selon que la barre de titre est active ou inactive.

<TitleBar ...>
  <VisualStateManager.VisualStateGroups>
    <VisualStateGroupList>
      <VisualStateGroup x:Name="TitleActiveStates">
        <VisualState x:Name="TitleBarTitleActive">
          <VisualState.Setters>
            <Setter Property="BackgroundColor" Value="Blue" />
          </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="TitleBarTitleInactive">
          <VisualState.Setters>
            <Setter Property="BackgroundColor" Value="Pink" />
          </VisualState.Setters>
        </VisualState>
      </VisualStateGroup>
    </VisualStateGroupList>
  </VisualStateManager.VisualStateGroups>
</TitleBar>

De plus, j’inclus la structure avec une brève explication de la façon de configurer l’état visuel que vous avez besoin:

🚫 limitations

➖ le Barre de titre est actuellement disponible uniquement sur Windows, avec la prise en charge du catalyseur Mac prévu dans une version future.

Références

Cet article était basé sur la documentation officielle: