Telerik .NET MAUI NavigationView — Disposition adaptative multiplateforme

La clé d’une application multiplateforme est un menu de navigation adaptable. Découvrez comment le composant Telerik UI pour .NET MAUI NavigationView simplifie grandement les boutons du menu hamburger vers les tiroirs de navigation.

Menu hamburger, tiroir de navigation, vue de navigation : quel que soit le nom de ce composant, son objectif principal est d’avoir le menu comme navigation de niveau supérieur au sein de votre application et de disposer tout le contenu dans des éléments distincts.

Vous pouvez voir cette méthode d’organisation d’une application depuis les téléphones aux tablettes, en passant par les applications de bureau et Web, car c’est le moyen de fournir une mise en page adaptative.

Sur les écrans de téléphone, il peut s’agir simplement d’un bouton qui, lorsque vous cliquez dessus, affiche le menu en superposition sur le contenu et disparaît lorsqu’il n’est pas nécessaire. Sur les écrans légèrement plus grands, il peut s’agir d’un ruban sur le côté qui peut être agrandi si nécessaire. Et sur les grands écrans offerts par les applications de bureau, il peut rester étendu à tout moment.

Alors maintenant, ce composant fait partie de Progress Interface utilisateur Telerik pour .NET MAUI pour vous permettre d’obtenir une mise en page adaptative dans les applications multiplateformes, que vous cibliez Windows, iOS, Android ou macOS.

Telerik pour .NET MAUI NavigationView livré avec:

• Trois modes d’affichage et une API riche pour contrôler les modes
• En-tête, pied de page et bouton de navigation personnalisables
• Sélection
• Événements et commandes
• Riches capacités de style

Commençons et ajoutons-le à l’application .NET MAUI

Comme pour tous les autres composants d’interface utilisateur de la suite Telerik UI pour .NET MAUI, l’ajout de Telerik NavigationView est simple et peut être réalisé en trois étapes :

1. Téléchargez et installez l’interface utilisateur Telerik pour .NET MAUI.
2. Appeler le UseTelerik() méthode dans le fichier Maui Program.cs de votre projet .NET MAUI. Ceci est nécessaire pour tous les composants Telerik UI pour .NET MAUI, car UseTelerik() enregistre tous les gestionnaires intégrés ou créés en plus dans les composants Telerik.
3. Définissez le composant :

<telerik:RadNavigationView  x:Name="navigationView">
</telerik:RadNavigationView>

Ajouter et configurer des éléments de navigation

Ensuite, pour obtenir la navigation souhaitée, nous pouvons ajouter autant d’éléments de navigation que nécessaire :

<telerik:RadNavigationView  x:Name="navigationView">
  <telerik:RadNavigationView.Items>
    <telerik:NavigationViewItem  Text="Item 1"  />
    <telerik:NavigationViewItem  Text="Item 2"  />
    <telerik:NavigationViewItem  Text="Item 3"  />
    <telerik:NavigationViewItem  Text="Item 4"  />
    <telerik:NavigationViewItem  Text="Item 5"  />
  </telerik:RadNavigationView.Items>
</telerik:RadNavigationView>

Nous pouvons les ajouter directement à la collection Items comme indiqué ci-dessus ou utiliser DataBinding et les lier au ItemsSource propriété. Vous pouvez en savoir plus sur la liaison des données avec Telerik NavigationView et un exemple complet dans le Article sur la liaison de données.

Mais à ce stade, rien ne sera au cœur du composant. C’est pourquoi nous devons également placer le contenu.

<telerik:RadNavigationView.Content>
  <Label  HorizontalOptions="Center"
      VerticalOptions="Center"
      Text="{Binding SelectedItem.Text, Source={x:Reference navigationView}}"  />
</telerik:RadNavigationView.Content>

Maintenant, plus sur les éléments de navigation. Le NavigationViewItem propose les propriétés suivantes à modifier :

• Texte – Le texte à afficher
• Est sélectionné – Indique si la navigation est sélectionnée
• ImageSource – Nous donne la possibilité d’ajouter une image
• EstSélectionnable – Par défaut True, nous pouvons le spécifier sur False pour empêcher l’utilisateur final de sélectionner l’élément tout en lui permettant de cliquer dessus
• Est autorisé – Le désactive complètement du geste de l’utilisateur final
• Position – Par défaut, chaque élément de navigation fait partie du « Contenu », ce qui signifie qu’il est affiché comme un élément de navigation normal, mais cette valeur lui permet d’être défini sur En-tête et Pied de page.

Jouons avec eux. Par exemple, ajoutons une image au dernier élément et définissons sa position sur le pied de page ; puis déplacez le premier élément vers l’en-tête ; et change le troisième Est autorisé et le quatrième EstSélectionnable. Le seul élément qui n’est pas modifié est le deuxième élément, l’élément 2.

<telerik:RadNavigationView x:Name="navigationView">
  <telerik:RadNavigationView.Items>
    <telerik:NavigationViewItem Text="Item 1"
        Position="Header"
        IsSelectable="False">
    </telerik:NavigationViewItem>
    <telerik:NavigationViewItem Text="Item 2" />
    <telerik:NavigationViewItem Text="Item 3" />
    <telerik:NavigationViewItem Text="Item 4" IsEnabled=”False”/>
    <telerik:NavigationViewItem Text="Item 5" />
      <telerik:NavigationViewItem Text="Settings"
          Position="Footer"
          IsSelectable="False">
        <telerik:NavigationViewItem.ImageSource>
          <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconMore}"
              FontFamily="{x:Static telerik:TelerikFont.Name}"
              Size="16" />
        </telerik:NavigationViewItem.ImageSource>
    </telerik:NavigationViewItem>
  </telerik:RadNavigationView.Items>
  <Label HorizontalOptions="Center"
      VerticalOptions="Center"
      Text="{Binding SelectedItem.Text, Source={x:Reference navigationView}}" />
</telerik:RadNavigationView>

Et voici le résultat :

Trouvez un exemple complet et des détails dans le Article de la documentation Mise en route.

Configurer les modes d’affichage

Par défaut, Telerik NavigationView pour .NET MAUI modifie automatiquement son DisplayMode en fonction de la taille disponible. Il dispose de trois modes d’affichage : minimal, compact et étendu.

Mode compact – Affiche uniquement les images des éléments :

Étendu – Agrandit les éléments à leur taille réelle, affichant à la fois l’image et le texte :

Minimal – Juste un bouton qui, lorsqu’on clique dessus, affiche le menu, comme on s’attendrait à ce qu’un bouton hamburger fonctionne :

Par défaut, le contrôle change son DisplayMode lorsque sa taille dépasse certains seuils. Le CompactModeThresholdWidth et ExpandedModeThresholdWidth Les propriétés spécifient les points d’arrêt auxquels le mode d’affichage change. La valeur par défaut pour la version compacte est 641et la valeur par défaut pour le développement est 1008. Vous pouvez modifier ces valeurs pour personnaliser le comportement du mode d’affichage adaptatif.

Si vous souhaitez contrôler ce comportement adaptatif, vous pouvez le faire. La chose importante que vous devez faire est de définir le AutoChangeDisplayMode propriété à FAUX puis utilisez les propriétés pour le configurer.

Par exemple, vous pouvez définir DisplayMode sur Compact comme ceci :

DisplayMode="Compact"
AutoChangeDisplayMode="False"
CompactModeThresholdWidth="20"

Personnalisation et style

Maintenant, jouons davantage avec l’apparence et la sensation. Vous pouvez définir des styles personnalisés pour :

• Entête
• Bouton de navigation
• Volet (la zone contenant les éléments de navigation)
• Éléments de navigation

Commençons par l’en-tête. Nous pouvons utiliser le HeaderText, HeaderTemplate et HeaderStyle ciblage TargetType="telerik:NavigationViewHeader" pour obtenir l’apparence et la sensation souhaitées.

Par exemple, voici comment nous pouvons utiliser HeaderTemplate et HeaderStyle pour ajouter Telerik ToolBar à l’en-tête :

<ResourceDictionary>
  
  <DataTemplate x:Key="headerTemplate">
    <telerik:RadBorder BackgroundColor=
        {TemplateBinding BackgroundColor}"
        Background="{TemplateBinding Background}"
        BorderColor="{TemplateBinding BorderColor}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        CornerRadius="{TemplateBinding CornerRadius}">
      <Grid ColumnDefinitions="Auto, *"
          ColumnSpacing="{OnPlatform WinUI=4}">
        <Grid WidthRequest="{TemplateBinding CompactWidth}"
            IsVisible="{TemplateBinding IsHeaderButtonVisible}">
          <telerik:RadToolbar BorderThickness="0">
            <telerik:ButtonToolbarItem >
              <telerik:ButtonToolbarItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconSearch}"
                    FontFamily="{x:Static telerik:TelerikFont.Name}"
                    Size="16" />
              </telerik:ButtonToolbarItem.ImageSource>
            </telerik:ButtonToolbarItem>
            <telerik:ButtonToolbarItem >
              <telerik:ButtonToolbarItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconAuthor}"
                    FontFamily="{x:Static telerik:TelerikFont.Name}"
                    Size="16" />
              </telerik:ButtonToolbarItem.ImageSource>
            </telerik:ButtonToolbarItem>
            <telerik:ButtonToolbarItem>
              <telerik:ButtonToolbarItem.ImageSource>
                <FontImageSource Glyph="{x:Static telerik:TelerikFont.IconAdd}"
                    FontFamily="{x:Static telerik:TelerikFont.Name}"
                    Size="16" />
              </telerik:ButtonToolbarItem.ImageSource>
            </telerik:ButtonToolbarItem>
          </telerik:RadToolbar>
        </Grid>
      </Grid>
    </telerik:RadBorder>
  </DataTemplate>
  
  <Style TargetType="telerik:NavigationViewHeader" x:Key="headerStyle">
      <Setter Property="FontSize" Value="15"/>
      <Setter Property="BorderColor" Value="#8660C5"/>
      <Setter Property="BorderThickness" Value="2"/>
      <Setter Property="CornerRadius" Value="5"/>
      <Setter Property="FontAttributes" Value="Italic"/>
  </Style>
</ResourceDictionary>

Personnaliser ou masquer le bouton d’affichage de navigation

L’en-tête propose plusieurs propriétés supplémentaires dont la mission est de configurer le bouton d’affichage de navigation.

Le bouton propose les propriétés pour le masquer – avec IsHeaderButtonVisible (bool) – ou changer son apparence visuelle – avec HeaderButtonStyle (stylisé avec un type cible de NavigationViewToggleButton).

Par exemple, le code suivant le fera apparaître sous la forme de trois points :

  <Style TargetType="telerik:NavigationViewToggleButton" x:Key="NavigationViewToggleButtonStyle">
      <Setter Property="ImageSource" Value="{x:Null}"/>
      <Setter Property="Text" Value="{x:Static telerik:TelerikFont.IconDots3}"/>
      <Setter Property="FontFamily" Value="{x:Static telerik:TelerikFont.Name}"/>
      <Setter Property="BorderThickness" Value="1" />
      <Setter Property="BorderColor" Value="LightGray" />
      <Setter Property="BackgroundColor" Value="LightBlue" />
      <Setter Property="FontSize" Value="16"/>
      <Setter Property="TextColor" Value="Black" />
      <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
          <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="Disabled">
              <VisualState.Setters>
                <Setter Property="TextColor" Value="LightGray" />
              </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="ToggledDisabled">
              <VisualState.Setters>
                <Setter Property="TextColor" Value="LightGray"/>
              </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Toggled">
              <VisualState.Setters>
                <Setter Property="TextColor" Value="Black"/>
              </VisualState.Setters>
            </VisualState>
          </VisualStateGroup>
        </VisualStateGroupList>
      </Setter>
  </Style>

Styliser le volet

Pour styliser toute la zone du volet, le volet NavigationView pour .NET MAUI fournit un mécanisme de style permettant de personnaliser son apparence, ainsi que celle de son en-tête et de son pied de page.

Pour l’utiliser, réglez le PaneStyle propriété du contrôle avec un type cible NavigationViewPane.

Le volet propose de nombreuses propriétés à styliser en fonction de la distance entre les éléments de navigation : ItemsSpace, Footer Template, ScrollBarVisibility et plus. Retrouvez la liste complète dans le Article sur le style des volets.

Styliser les éléments de navigation

Stylisez les éléments de navigation en définissant le Style propriété à la NavigationViewItem ou en utilisant un style implicite pour obtenir un résultat comme celui-ci ci-dessous :

Trouvez tous les détails sur les capacités de style dans le Article de documentation sur le style.

Événements et commandes pour les scénarios avancés

Comme nous l’avons déjà mentionné, chaque élément de navigation peut être configuré pour être sélectionnable ou non avec le IsSelectable propriété, et nous pouvons également détecter si elle est sélectionnée ou le faire par programme avec le IsSelected propriété.

En plus de cela, Telerik NavigationView offre le SelectionChanged événement, auquel vous pouvez vous abonner et y exécuter n’importe quelle logique personnalisée.

Trois autres événements sont déclenchés lorsqu’un élément est cliqué ou que le volet est ouvert ou fermé.

Les événements que vous pouvez utiliser pour réaliser vos scénarios sont :

• SelectionChanged – Déclenché lorsque l’élément NavigationView actuellement sélectionné a changé
• ItemClicked – Déclenché lorsque l’on clique sur l’élément NavigationView
• PaneOpened – Levé lorsque l’animation d’ouverture du volet est terminée
• PaneClosed – Déclenché lorsque l’animation de fermeture du volet est terminée

Commandes de navigation

Le .NET MAUI NavigationView fournit des commandes qui vous permettent de lancer des actions d’ouverture ou de fermeture du volet et de basculer son état.

Les commandes disponibles sont :

• OpenPaneCommand – Récupère la commande qui ouvre le volet
• ClosePaneCommand – Récupère la commande qui ferme le volet
• TogglePaneCommand – Récupère la commande qui ouvre et ferme le volet

Voyez-le en action

Le SDK Telerik et Application d’échantillons de contrôles Telerik contiennent des démos en cours de toutes les fonctionnalités de Telerik Navigation View.

Tu peux télécharger Telerik UI pour .NET MAUI gratuitement dès maintenant, jouez avec et, si vous avez besoin de quelque chose, partagez vos commentaires et vos idées avec l’équipe Progress Telerik sur le site Portail de commentaires Telerik ou Forums Telerik.

Essayez l’interface utilisateur Telerik pour .NET MAUI