Un menu Hamburger s'il vous plaît – Navigation moderne pour votre application WPF

Les développeurs d'applications WPF se réjouissent! Vous pouvez avoir une navigation intuitive et moderne dans votre application – ne cherchez pas plus loin que le NavigationView (HamburgerMenu) dans Telerik UI for WPF. Apprenez tout sur ce puissant contrôle de navigation ci-dessous.

J'ai récemment entendu le terme «contrôle conscient» et me suis demandé: «Qu'est-ce que cela signifie? Les contrôles ont-ils une conscience réelle ( duh! )? Toutefois, ce n’est que pour quelques secondes.

Il s’agit en réalité de commandes pouvant s’adapter à différentes tailles de fenêtres, ce qui est essentiel pour les applications évoluant sur différents appareils et dimensions. Pour créer des contrôles conscients, vous pouvez coder votre propre interface utilisateur adaptative afin d'optimiser celle-ci en fonction de la taille de l'écran ou vous pouvez gagner un temps considérable et simplement utiliser le nouveau contrôle NavigationView (HamburgerMenu) qui est arrivé. Interface utilisateur Telerik pour WPF dans le R1 2019 .

Au cas où vous auriez manqué notre nouvelle version, le NavigationView n'en est qu'un élément (mais essentiel) essentiel. Ayons une minute de gloire pour les nouveaux contrôles DiagramRibbon et HyperlinkButton le support de Charts pour RadSpreadsheet et RadSpreadProcessing et le dernier, mais pas moins -. Net Core 3 et VS 2019 support!

Maintenant, n'oublions pas qui est la “star” de la série. C'est vrai – le tout nouveau NavigationView.

Votre application doit-elle:

• offrir une expérience de navigation cohérente
• Préserver les fonds d'écran sur des fenêtres plus petites
• Organiser l'accès à de nombreuses catégories de navigation

Si la réponse vous intéresse OUI, puis au moins le bon contrôle .

Pour plus d’informations sur la création d’un exemple d’application contenant un RadNavigationView (HamburgerMenu) control, sautez dans son article Getting Started .

Anatomy

À la lecture de ce titre, vous avez pensé à une seconde de Grey's Anatomy, n'est-ce pas? Maintenant, levons le rideau et examinons la disposition des commandes du menu hamburger.

La recette du menu hamburger consiste en:

• PaneHeader – l'en-tête (ou le bun burger supérieur) du NavigationView
• PaneToggleButton – the one one. qui ouvre / ferme le NavigationPane, qui héberge les éléments NavigationView
• NavigationView – les principaux «ingrédients» du menu Hamburger, utilisés pour naviguer vers un contenu spécifique, qui peut être rempli de manière statique ou par la liaison de données
• Pane Footer – the Footer (ou le pain de hamburger inférieur) d’un RadNavigationView

Comportement adaptatif

Par défaut, la vue de navigation change automatiquement son DisplayMode en fonction de la quantité de taille disponible. Il dispose de trois modes d'affichage – Minimal Compact et Expanded .

Mode développé – le volet reste ouvert à côté du contenu

Compact mode – le volet apparaît toujours sous la forme d'un ruban étroit

Mode minimal – le volet s'affiche / se cache sur PaneToggleButton. Le bouton reste immobile .

Par défaut, le contrôle modifie son DisplayMode lorsque sa taille dépasse certains seuils. Les propriétés CompactModeThresholdWidth et ExpandedModeThresholdWidth spécifient les points de rupture auxquels le mode d'affichage change. La valeur compacte est 641 et la valeur par défaut du paramètre étendu – 1008 . Vous pouvez modifier ces valeurs pour personnaliser le comportement du mode d'affichage adaptatif.

AutoChangeDisplayMode sur False:

• dans Xaml:

   < telerik: RadNavigationView   x: Nom  =. ] "navView"   AutoChangeDisplayMode  =  "Faux"   />   

      

      

      

• Dans le code:

   this  .navView.AutoChangeDisplayMode =  false ; 

Personnalisation flexible

J'aime le pouvoir des composants personnalisables! Qui ne le fait pas? Personnalisation du bouton PaneToggleButton

Vous pouvez personnaliser l'aspect et la convivialité du bouton PaneToggleButton à l'aide du bouton PaneToggleButtonContent . et propriétés PaneToggleButtonStyle . Si vous n'en avez pas besoin, vous pouvez simplement utiliser la propriété PaneToggleButtonVisibility .

Personnalisation de l'en-tête / du pied

Liste des propriétés qui permettent de personnaliser le contrôle. les en-têtes sont: PaneHeader PaneHeaderTemplate et PaneHeaderHeight propriétés.

Attendez, il y a plus.

J'ai oublié de mentionner que vous pouvez changer la couleur des composants de la fenêtre en un clin d'œil avec PaneBackground PaneHeaderBackground et . ] Propriétés de PaneHeaderForeground .

Personnalisation des éléments

Les propriétés RadNavigationViewItems sont également entièrement personnalisables, en particulier leurs icônes.

Les propriétés de et de IconTemplate sont les propriétés. clé ici. Avec l'aide de IconTemplate, un seul DataTemplate peut être défini sur plusieurs RadNavigationViewItems. Vous trouverez plus d'informations sur la définition de l'icône d'un élément sur un RadGlyph ou sur l'utilisation de la propriété IconTemplate dans un scénario de liaison de données dans cet article .

As Selector et Les classes ItemsControl font partie des classes de base de RadNavigationView. Les propriétés suivantes peuvent également être utilisées pour le style des éléments de contrôle: ItemTemplate, ItemTemplateSelector, ItemContainerStyle .

Personnalisation de la connexion ouverte. / Fermer Animations

Par défaut, RadNavigationView définit trois animations nommées ResizePaneAnimation MinimalPaneOpenAnimation et MinimalPaneCloseAnimation .

• ResizePaneAnimation – joué lorsque le DisplayMode de RadNavigationView est Compact ou Expanded et que le NavigationPane est ouvert ou fermé
• MinimalPaneOpenAnimation – joué lorsque le DisplayMode de RadNavigationView est minimal et que NavigationPane est fermé et que le NavigationPane est fermé
• MinimalPaneCloseAnimation – 1965 Le mode d'affichage de RadNavigationView est minimal et le panneau de navigation est ouvert

Cet article montre comment personnaliser ces animations.

Evénements

Voici la liste des événements les plus importants que vous souhaitez savoir quand il s'agit de RadNavigationView:

• ItemClick – se produit chaque fois qu'un élément du menu est cliqué
• PaneOpened – se produit lorsque le volet est ouvert
• PaneClosed – se produit lorsque le volet est fermé
• SelectionChanged – Occurrence quand la sélection change

Tous les gestionnaires d'événements mentionnés reçoivent deux arguments – l'argument d'expéditeur qui contient RadNavigationV iew (type – objet, peut être converti dans le type RadNavigationView) et un objet RoutedEventArgs.

Theming

Il n'est pas nécessaire de mentionner que le HamburgerMenu est livré avec la grande variété colorée de UI pour WPF Themes Suite non? Et vous vous souvenez que si les styles de thème ne sont pas assez colorés, nous vous proposons une personnalisation transparente des couleurs et une création rapide des palettes à l'aide du Color Theme Generator n'est-ce pas?

Vos réactions

Assez parlé. Le Telerik R1 2019 Release est déjà en ligne, alors n'hésitez pas et essayez RadNavigation Regardez dès maintenant en téléchargeant le dernier:

Essayez l'interface utilisateur de Telerik pour WPF

Attendez, quoi? Vous venez d'entendre parler de l'interface utilisateur Telerik pour WPF pour la première fois? Dans ce cas, rendez-vous sur la page produit pour explorer les fonctions clés, les commandes et les thèmes clés prêts à être prises.

N'hésitez pas à partager vos impressions sous forme de commentaire ci-dessous, ou… attendez! Vous pouvez visiter nos nouveaux portails de commentaires sur l'interface utilisateur pour WPF / Silverlight et Bibliothèques de traitement de documents et faites-nous savoir si vous avez des suggestions ou si vous avez besoin de fonctionnalités / commandes particulières. ] Les commentaires sont désactivés en mode Aperçu.

Source link