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.
![simpl-ribbon01 "title =" simplifié-ribbon01 "/> </p>
<h2> Concept de ruban simplifié </h2>
<p> Le [19659005] RadRibbonBar </a> </strong></strong> 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. <em> Le mode </em> 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 <em> Simplifié </em> de la barre du ruban est cool et élégant, de plus, il est compa ct. </p>
<p> 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 <strong> RadRibbonBar </strong> afin que le contrôle rattrape les tendances de l'interface utilisateur moderne. </p>
<h2> Fonctionnement du ruban simplifié </h2>
<p> 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. </p>
<h3> Mode Mise en page </h3>
<p> RadRibbonBar a maintenant une propriété <strong> LayoutMode </strong> qui est une énumération avec les mises en page disponibles. <em> Les valeurs par défaut </em> et <em> simplifiées </em>: </p>
<pre><code class=](https://i0.wp.com/blog.arcoptimizer.com/wp-content/uploads/2019/07/nouvelle-barre-de-ruban-simplifiee-moderne-dans-linterface-utilisateur-telerik-pour-winforms.gif?w=660&ssl=1)
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.
![simplifié-ribbon02 "title =" simplifié-ribbon02 "/> </h2>
<h3>
Support d'exécution </h3>
<p> Le mode de présentation <em> Simplifié </em> 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é. </p>
<h3> Simplified Layout </h3>
<p> L'idée principale de <em>. ] Le mode d’agencement simplifié </em> consiste à regrouper tous les éléments constituant les différents groupes de <strong> RadRibbonBar </strong>ce qui a posé plusieurs problèmes lors de l’implémentation de la fonctionnalité. </p>
<ul>
<li><strong> Infinite Nesting </strong>: 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 <em> Clipboard </em> et <em> Font </em> de la capture d'écran ci-dessus. Il était également difficile de mettre en œuvre la transition du mode <em> simplifié </em> au mode <em> par défaut </em> et de rétablir la configuration initiale. </li>
<li><strong> Les propriétés des éléments </strong>: 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 <em> Simplifié </em>. 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 <em> Coller </em> du groupe <em> Clipboard </em> possédait à l'origine la propriété <strong> TextImageRelation </strong> définie sur <em> ImageAboveText </em>ce qui est parfait. la mise en page par défaut. Toutefois, cette relation texte-image n’avait aucun sens en mode <em> Simplifié </em>. 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 <a href=](https://i0.wp.com/blog.arcoptimizer.com/wp-content/uploads/2019/07/nouvelle-barre-de-ruban-simplifiee-moderne-dans-linterface-utilisateur-telerik-pour-winforms.png?w=660&ssl=1)
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
Assurez-vous de télécharger et d'essayer la dernière version de l'interface utilisateur Telerik pour WinForms afin d'explorer toutes les nouvelles fonctionnalités et les nouveaux thèmes. Il est disponible sur votre compte Telerik ou, si vous êtes nouveau sur Telerik UI pour WinForms, vous pouvez obtenir un complet d'essai gratuit de 30 jours ici.
Nous aimerions savoir comment cela fonctionne pour vous. Veuillez nous faire part de vos impressions en visitant notre portail de commentaires ou en laissant un commentaire ci-dessous.
Source link