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 :
- Téléchargez et installez l’interface utilisateur Telerik pour .NET MAUI.
- 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, carUseTelerik()
enregistre tous les gestionnaires intégrés ou créés en plus dans les composants Telerik. - 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 NavigationViewPaneOpened
– Levé lorsque l’animation d’ouverture du volet est terminéePaneClosed
– 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 voletClosePaneCommand
– Récupère la commande qui ferme le voletTogglePaneCommand
– 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.
Source link