Il est temps de booster votre menu Hamburger avec des articles à plusieurs niveaux

La nouvelle version de Telerik UI pour la recette HamburgerMenu de WPF est arrivée. RadNavigationView prend désormais en charge plusieurs niveaux de type UWP! Apprenez à créer un menu hiérarchique.

Vous vous souvenez comment j'ai délibérément laissé échapper le secret de la maîtrise de la navigation dans vos applications WPF? Je n'ai pas hésité une minute à partager avec vous la recette de notre HamburgerMenu . Mais vous savez quoi, j'aime que mes recettes préférées aient meilleur goût à chaque fois. C’est pourquoi je suis ravi d’annoncer la nouvelle farce de celui-ci. Permettez-moi de vous présenter la prise en charge de la hiérarchie à plusieurs niveaux de RadNavigationView!

Depuis la version R1 2019, lorsque la première version de la recette HamburgerMenu a été créée, de nombreuses demandes et commentaires ont été reçus. Je suis tellement reconnaissante pour ca. Merci à vous tous, à la recherche d'éléments à plusieurs niveaux (comme dans UWP), le contrôle RadNavigationView le prend désormais en charge! Permettez-moi de vous montrer comment obtenir une visualisation de menu hiérarchique.

Configuration de la hiérarchie

Chaque élément RadNavigationViewItem possède désormais une collection Items. Il peut être rempli de nombreux éléments RadNavigationViewItem, permettant ainsi la définition d'éléments à plusieurs niveaux. Amateurs de XAML, consultez-les ci-dessous:

Amateurs de liaison de données, ne vous inquiétez pas. Le HamburgerMenu peut également être rempli d'objets métier via sa propriété ItemsSource . Les propriétés DisplayMemberPath et ItemContainerStyle peuvent être utilisées pour personnaliser davantage les éléments et autoriser les sous-éléments. Consultez l'article Liaison de données hiérarchiques du contrôle pour plus d'informations et d'exemples.

Tant de discussions et pas un seul aperçu des niveaux multiples du menu en action… Honte à moi.

PS Ce GIF impressionnant n'est pas un aperçu du premier extrait de code, il provient de notre précieuse Telerik UI pour l'application de démonstration de contrôles WPF . N'hésitez pas à le vérifier et à jouer avec la démo Sub Items du contrôle NavigationView.

Oh, une chose qui vaut la peine d'être remarquée à propos du GIF est que lorsque je clique directement sur l'icône développer / réduire, le l'élément n'est pas sélectionné. De cette façon, seul l'état développé ou réduit est déclenché. Un clic partout ailleurs dans les limites de l'élément déclenchera son état sélectionné. Je pensais que vous souhaitiez le connaître ?.

Capacités de personnalisation

Le Les sous-éléments NavigationView sont entièrement adaptés à m répondez aux besoins de votre entreprise. Voyons ensemble les avantages du menu hiérarchique des hamburgers.

Icônes Développer / Réduire

La première chose que je voudrais contrôler, ce sont les icônes développer et réduire, bien sûr. À cette fin, les propriétés ExpandedIcon et CollapsedIcon de RadNavigationViewItem sont utiles. Le modèle d'icône par défaut de l'élément utilise RadGlyph vous pouvez donc définir les propriétés sur une chaîne de glyphes à partir de la feuille de référence des glyphes . Ma feuille de triche préférée. 1965

Oh, vous pouvez également expérimenter avec les animations de développement / réduction si vous osez!

Indentation des éléments imbriqués

Tous les éléments enfants peuvent avoir un décalage horizontal (retrait) par défaut différent. Définissez simplement la propriété SubItemsIndentation de RadNavigationView à la valeur souhaitée et vous avez terminé. Vous pouvez jouer avec celui-ci en utilisant la partie Configurateur de la démo Sub Items que j'ai mentionnée quelques lignes ci-dessus.

Éléments étendus simples / multiples

Le comportement par défaut de RadNavigationView permet d'étendre simultanément plusieurs éléments RadNavigationViewItem avec des éléments enfants. . Vous devez limiter cela à un seul élément développé à la fois? Bien sûr, il suffit de définir la propriété AllowMultipleExpandedItems de RadNavigationView sur False.

Voler vers le Flyout de NavigationView

Qu'en est-il du volet réduit et de NavigationView dans son mode d'affichage compact ou développé DisplayMode ? Où vont tous les éléments de menu imbriqués? ?

C'est vrai, ils s'envolent vers la côte est du volet ?. Maintenant, sérieusement, cliquer sur un élément parent affiche ses enfants ( [RadNavigationViewItems effondré] dans un menu déroulant qui a d'ailleurs une belle animation pour s'assurer que le vol est fluide.

Certains d'entre vous ont demandé un accès direct aux sous-éléments en survolant une entrée du menu principal. en modifiant la valeur par défaut ClickMode de l'élément parent en Hover. Easy-peasy.

Événements de sous-éléments

Quelques mots sur les événements qui sont déclenchés lors du développement et de la réduction des éléments. Ces actions déclenchez les événements ItemExpanded et ItemCollapsed de RadNavigationView. De plus, RadNavigationViewItem expose les événements Expanded et Collapsed, qui sont déclenchés avant les deux précédents. important. N'oubliez donc pas de vérifier sur les articles Hiérarchie et Liaison de données hiérarchiques de NavigationView.

D'accord, c'est tout, les gars. Merci d'avoir pris le temps de lire mon blog! J'espère que la prise en charge de la hiérarchie à plusieurs niveaux du HamburgerMenu a répondu à vos attentes et vous êtes impatient de:

Obtenir la dernière interface utilisateur Telerik pour WPF

Je suis sûr que vous l'essayerez . Et lorsque vous le ferez, je serai là pour lire vos commentaires honnêtes. N'hésitez pas à le partager dans la section des commentaires ci-dessous ou rendez-vous sur notre portail de rétroaction .

Bon codage et pour le rendre encore plus heureux, explorez tous les nouveaux contrôles, fonctionnalités et améliorations du R2 2020 version de Telerik UI pour WPF .