Site icon Blog ARC Optimizer

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

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
Quitter la version mobile