Nouvelle barre de ruban simplifiée moderne dans l'interface utilisateur Telerik pour WinForms

Nous avons introduit le nouveau mode simplifié dans RadRibbonBar dans l'interface utilisateur Telerik pour WinForms R2 2019 . Cette puissante fonctionnalité permet de moderniser des contrôles de ruban nouveaux ou existants pour incorporer une interface utilisateur plus compacte et économiser un espace écran précieux.

Concept de ruban simplifié

Le [19659005] RadRibbonBar Cette commande a bien rempli son rôle, qui est de fournir à l'utilisateur final une interface utilisateur pratique lui permettant de lancer des commandes facilement et intuitivement. UI Design et UX En général, les gens ont également évolué au fil des ans et certains diront peut-être que la disposition traditionnelle du contrôle du ruban est volumineuse et ne suit pas les dernières tendances en matière de conception. Pour être honnête, cela semble être juste. Le mode simplifié dans la suite bureautique en ligne, nous espérons le voir bientôt dans les versions pour ordinateur des mêmes produits. Le mode Simplifié de la barre du ruban est cool et élégant, de plus, il est compa ct.

Une telle interface utilisateur est inestimable lorsque l’espace à l’écran est limité, sans oublier qu’il est plus convivial, car il ne met en évidence que les commandes les plus importantes. implémenter un nouveau mode de présentation dans RadRibbonBar afin que le contrôle rattrape les tendances de l'interface utilisateur moderne.

Fonctionnement du ruban simplifié

Nous voulions fournir une solution qui fonctionnerait aussi bien avec un ruban. les contrôles font déjà partie des applications existantes comme il le ferait avec des rubans dans les nouveaux projets. Il était impératif que la nouvelle fonctionnalité n'impose pas de limitations aux API existantes dans le contrôle. Nous voulions que les développeurs continuent à utiliser le ruban comme ils le faisaient déjà et qu’ils disposent de la nouvelle option permettant de changer de présentation au moment de l’exécution. Je devrais également dire que la nouvelle fonctionnalité n'est pas conçue pour un thème spécifique et qu'elle est également prise en charge par nos 27 thèmes.

Mode Mise en page

RadRibbonBar a maintenant une propriété LayoutMode qui est une énumération avec les mises en page disponibles. Les valeurs par défaut et simplifiées :

 ce  .radRibbonBar1.LayoutMode = RibbonLayout.Simplified; 

Hauteur du ruban simplifié

Un seul contrôle de propriété hauteur du contrôle de ruban entier en mode simplifié . Cela nous a permis d'avoir différentes hauteurs en fonction du thème appliqué. Cette propriété donne également la liberté de modifier la hauteur en fonction de leur scénario réel.

 this  .radRibbonBar1.SimplifiedHeight = 105; 

Bouton de bascule de la disposition

Ce bouton permet de changer de présentation. Il est situé dans le coin supérieur droit du contrôle. Par défaut, le bouton n'est pas visible, mais il peut être facilement affiché en définissant une seule propriété:

 this  .radRibbonBar1.ShowLayoutModeButton =  true ; 



  


               

Nous avons décidé de définir le paramètre ShowLayoutModeButton propriété vraie, dans notre propre implémentation RadRibbonBar de la partie RadRichTextEditor RadSpeadsheet et . L'animation au début du blog montre les dispositions simplifiées et par défaut de RadRichTextRibbonBar. Voici une capture d'écran montrant le ruban dans le diagramme et les contrôles répartis.

Support d'exécution

Le mode de présentation Simplifié est disponible uniquement au moment de l'exécution. Le développeur doit encore configurer les groupes et sous-groupes de construction de l'interface utilisateur dans le mode de présentation traditionnel. Ensuite, lors de l'exécution, il peut changer de présentation et adopter un nouveau look moderne. Cette approche nous a Pour le développeur, cela signifiait qu'il pouvait fournir à ses utilisateurs finaux une nouvelle fonctionnalité intéressante sans rien faire de leur côté.

Simplified Layout

L'idée principale de . ] Le mode d’agencement simplifié consiste à regrouper tous les éléments constituant les différents groupes de RadRibbonBar ce qui a posé plusieurs problèmes lors de l’implémentation de la fonctionnalité.

• Infinite Nesting : mise en page traditionnelle peut être vraiment complexe, et les groupes peuvent être imbriqués les uns dans les autres. La première chose que nous avons faite est d’aplatir la structure et de réparer tous les éléments afin d’être les enfants directs du groupe principal. Cela se voit clairement dans les groupes Clipboard et Font de la capture d'écran ci-dessus. Il était également difficile de mettre en œuvre la transition du mode simplifié au mode par défaut et de rétablir la configuration initiale.
• Les propriétés des éléments : Nous avons fait de notre mieux pour gérer autant de autant de scénarios que possible pour que le contrôle ait l’air beau lorsqu’il passe au mode Simplifié . Pour ce faire, nous avons dû modifier certaines des propriétés de l'élément afin qu'elles aient fière allure sur une seule ligne. Par exemple, le bouton déroulant Coller du groupe Clipboard possédait à l'origine la propriété TextImageRelation définie sur ImageAboveText ce qui est parfait. la mise en page par défaut. Toutefois, cette relation texte-image n’avait aucun sens en mode Simplifié . Nous avons donc modifié l’élément pour afficher l’image avant le texte. Nous avons également modifié d'autres propriétés, ainsi que les images, afin de réduire la hauteur des différents éléments et de les ajuster sur une seule ligne. Nous avons un article sur la documentation qui les répertorie
• Personnalisation : Comme de nombreuses propriétés d'élément étaient modifiées lors du changement de mode de présentation, nous devions fournir aux développeurs une API permettant de contrôler ce processus. L'événement ItemStyleChanging se déclenche pour chacune des propriétés modifiées et peut être souscrit via l'élément principal du contrôle: RadRibbonBar. RibbonBarEelement . L'événement est annulable, car dans certains scénarios, le développeur peut décider de ne pas modifier une propriété particulière pour un élément particulier. Les arguments fournissent des informations sur l'élément, le groupe où il se trouve, la propriété, les valeurs de propriété anciennes et nouvelles, ainsi que le contexte dans lequel l'opération de modification est en cours d'exécution. Par exemple, nous avons décidé que les éléments de la galerie en mode Simplifié n’afficheront que du texte. Toutefois, dans certains cas, il peut être nécessaire d’utiliser un mode d’affichage différent. Si cela fonctionne bien dans une application client, l'argument de l'événement NewValue peut être modifié. Nous avons un bel article de documentation sur la personnalisation du ruban simplifié pour le démontrer avec l'objet RichTextEditorRibbonBar :

 privé   et vide   RibbonBarElement_ItemStyleChanging  . , Telerik.WinControls.UI.ItemStyleChangingEventArgs args)  
  { [19659000]  si [19659000] 19659007]   { 
   si   (args.Element  vaut   RadGalleryItem && args.Property == RadButtonItem.DisplayStyleProperty) 

   { 
   args.NewValue = DisplayStyle.Image;  
  ].  }  

 } [19659064] À essayer