Une victoire totale avec le tout nouveau ruban Telerik pour WinUI

Tout le monde, veuillez saluer la dernière version R1 2021 de Telerik UI pour WinUI et son étoile la plus brillante – le RadRibbonView. Tout juste sorti du four, riche en fonctionnalités, réactif, pratiquement le meilleur ruban sur le marché pour WinUI … alors, commençons la fête!

Ribbons Explained

Les rubans sont le moyen moderne d'aider les utilisateurs à trouver, comprendre, et utilisez les commandes de manière efficace et directe avec un minimum de clics, avec moins de recours aux essais et erreurs et sans avoir à consulter l'aide.

Puisque vous n'avez pas rencontré officiellement notre ruban je me permets de vous aider un peu. D'accord? Commençons.

Apprenez à le connaître

Il est prouvé que la majorité apprend et comprend mieux grâce à la représentation picturale. Alors, commençons par ça.

Comme le montre l'image ci-dessus, le ruban se compose de divers éléments visuels. Détendez-vous, vous n'avez pas besoin de souvenez-vous de tout cela (je ne vais pas vous tester). J'essaierai de m'en tenir à cinq des plus souvent utilisés.

• Onglet Ruban – le conteneur de niveau le plus élevé dans la structure du ruban.
• Groupe ruban – le contrôle le plus utilisé (en tant qu'enfant direct à un onglet du ruban) qui consiste en une mise en page dynamique réglable (= garantie d'un bon espace disponible).
• Bouton du ruban – le contrôle d'action principal utilisé comme un enfant de n'importe quel groupe de ruban (des espèces similaires souvent combinées dans un RadButtonGroup). Cinq types de boutons intégrés disponibles.
• Galerie de rubans – représentation élégante et pratique de la liste d'options, fournissant un aperçu instantané.
• ] Barre d'outils d'accès rapide – généralement affichée dans le tit la zone de la barre ou sous le ruban et est entièrement personnalisable pour fournir un accès ultra-rapide aux commandes les plus utilisées (comme enregistrer, annuler, actualiser – que ferions-nous sans elles?!).

Pour la liste complète des éléments qui forment la structure visuelle du RadRibbonView, n'hésitez pas à explorer la documentation du contrôle .

Set It Up

En dehors de la représentation visuelle, c'est toujours une bonne chose de voir l'objet d'intérêt en action. Dans notre cas, le ruban. Laissez-nous le faire.

Chargez-vous avec une référence aux Telerik WinUI Controls . Oh, j'ai oublié une dernière chose: l'excitation! 😊

Nous sommes maintenant prêts.

 < telerik: RadRibbonView 
  Title  =  "Telerik UI for WinUI" 
  ApplicationName  =  "RibbonView" 
  HelpButtonVisibility  =  "Visible" 
  MinimizeButtonVisibility  =  "Visible" > 
  < telerik: RadRibbonView.QuickAccessToolBar > 
  < telerik: QuickAccessToolBar > 
  < telerik: RadRibbonButmentAl 196542 =  "Center"   SmallIcon  =  "Save"   Size  =  "Small"  /> 
  < telerik: RadRibbonButton   VerticalAlignment  =  "Center"   SmallIcon  =  "Undo"   Size  =  "Small"  /> 
  < telerik: RadRibbonButton   VerticalAlignment  =  "Center"   SmallIcon  =  "Refresh"   Size  =  " Petit " /> 
  </  telerik: QuickAccessToolBar > 
  </  telerik: RadRibbonView.QuickAccessToolBar > 
 >  ] < telerik: RadRibbonView.ApplicationButtonIcon > 
  < FontIcon   FontFamily  =  "{StaticResource SymbolThemeFontFamily}"   Glyph   Glyph   Glyph    ""  /> 
  </  telerik: RadRibbonView.ApplicationButtonIcon > 
  < telerik: RadRibbonTab   Header  Header  ] =  "Ruban Tab"   IsSelected  =  "True" > 
  < telerik: RadRibbonGroup   Header  =  ] "Ruban G roup "> 
  < telerik: RadRibbonButton 
  Size  = " Large "  Text  = " RibbonButton " 
  telerik: ScreenTip.Title  =  "RibbonButton ScreenTip" 
  telerik: ScreenTip.Description  =  "Ceci est un SceenTip en action." [19659020]> 
  < telerik: RadRibbonButton.LargeIcon > 
  < FontIcon   Glyph  =  ""  /> 
  </  telerik: RadRibbonButton.LargeIcon > 
  </  telerik: RadRibbonButton > 
  </  </  ] telerik: RadRibbonGroup > 
  < telerik: RadRibbonGroup   Header  =  "RadRibbonGallery" [19659042] DialogLauncherVisibility  =  "Visible" > 
  < telerik: RadRibbonGallery > 
  < telerik: RadRibbonGallery.Icon  telerik: RadRibbonGallery.Icon  ]> 
  < BitmapIcon   UriSource  =  "/ Images / users.png"   ShowAsMonochrome  =  "False"  / > 
  </  telerik: RadRibbonGallery.Icon > 
  < telerik: RadGalleryItem   IsHeader  =  "True" [19659042] Content  =  "Styles de titre"   FontWeight  =  "SemiBold"   /> 
  < telerik: RadGalleryItem   IsSelected [19659020] =  "True"   ToolTipService.ToolTip  =  "Normal" > 
  < BitmapIcon   UriSour ce  =  "/ Images / Paragraph / paragraph.png"   ShowAsMonochrome  =  "False"  /> 
  </  telerik: RadGalleryItem > 
  < telerik: RadGalleryItem   ToolTipService.ToolTip  =  "No Spacing" > 
  Bitmap < Bitmap   UriSource  =  "/ Images / Paragraph / paragraph9.png"   ShowAsMonochrome  =  "False"  /> 
  </  ] telerik: RadGalleryItem > 
  < telerik: RadGalleryItem   ToolTipService.ToolTip  =  "Heading 1" > 
  < 19659020] BitmapIcon   UriSource  =  "/ Images / Paragraph / paragraph8.png"   ShowAsMonochrome  =  "False"  /> 



  


               




  </  telerik: RadGalleryItem > 
  < telerik: RadGalleryItem   ToolTipService.ToolTip  =  "Heading 2" > [19659304]  < BitmapIcon   UriSource  =  "/ Images / Paragraph / paragraph7.png"   ShowAsMonochrome  =  "False"  /> 
  </  telerik: RadGalleryItem > 
  < telerik: RadGalleryItem   ToolTipService.ToolTip  =  "Title"  "Title" > 
  < BitmapIcon   UriSource  =  "/ Images / Paragraph / paragraph6.png"   ShowAsMonochrome  =  "False"  /> 
  </  telerik: RadGalleryItem > 
  < telerik: RadGalleryItem   ToolTipService.To olTip  =  "Subtitle" > 
  < BitmapIcon   UriSource  =  "/ Images / Paragraph / paragraph5.png"   ShowAsMonochrome  =  "False"  /> 
  </  telerik: RadGalleryItem > 
  </  telerik: RadRibbonGallery  ]> 
  </  telerik: RadRibbonGroup > 
  </  telerik: RadRibbonTab > 
 </  telerik: RadRibbonView [19659020]> 

Hitting F5 … Aaand:

Une note ici — toutes les propriétés Icon des boutons du ruban, des groupes, des galeries, etc. offrent des capacités de personnalisation flexibles — vous pouvez totalement bénéficier des Segoe MDL2 Assets Icons (en utilisant FontIcon ou SymbolIcon), ou utilisez les images sympas que votre concepteur a spécialement conçues pour votre ruban via BitmapIcon. N'est-ce pas beau?

Présentez ses pouvoirs

Imaginez un instant que la vue du ruban soit une carte magique (comme celle du deck Yu-Gi-Oh). Dans son rôle en tant que tel, le ruban a certainement des capacités spéciales (et puissantes). Allons-nous explorer?

Caractéristiques

Mode de mise en page simplifié

Contrôles de mise en page d'aide

Boutons du ruban

La section précédente se termine par des tailles de boutons mystiques, n'est-ce pas? Je vais essayer de les couvrir dans celui-ci, tout en énumérant tous les types de boutons de ruban pris en charge.

Le RadRibbonView pour WinUI est livré avec les boutons suivants:

• Bouton du ruban
• Bouton à bascule du ruban
• Bouton radio du ruban
• Ruban DropDownButton
• Ruban SplitButton

Ils héritent tous et étendent les fonctionnalités des contrôles de bouton standard.

J'ai promis de couvrir les états des boutons spéciaux – ils sont trois – Petit Moyen et Grand .

Le petit affiche la petite icône du bouton. Le moyen affiche la petite icône plus le libellé du bouton. Et le grand affiche la grande icône plus le libellé du bouton . L'état d'un bouton de ruban dépend de l'état du RadRibbonGroup et peut être contrôlé via les propriétés CollapseToSmall CollapseToMedium et IsAutoSize .

Tous Les caractéristiques et propriétés spécifiques exposées par chaque type de bouton de ruban peuvent être trouvées dans la section Boutons du ruban de la documentation.

Onglets contextuels

Dernier point (mais non le moindre), notre ruban prend en charge les onglets contextuels. Qu'est ce que c'est? Un onglet qui ne cherche à fournir aux utilisateurs une certaine interface utilisateur que lorsqu'ils sont dans un contexte spécifique ou qu'ils ont sélectionné un élément spécifique. Ces onglets sont organisés en groupes, afin que l'utilisateur puisse voir plusieurs onglets disponibles pour un contexte spécifique.

Principal avantage: l'interface utilisateur commune de RadRibbonView devient plus légère tandis que les fonctionnalités spécifiques deviennent plus faciles à trouver car affiché sur demande et est organisé en groupes. Plus d'informations à ce sujet dans la section Onglets contextuels de la documentation du ruban.

Version intégrale de R1 2021

J'ai déjà révélé l'étoile la plus brillante de la Version R1 2021 de l'interface utilisateur de Telerik pour WinUI. Cependant, cette version a d'autres trésors à explorer en profondeur. Hé, RibbonView, faites de la place sur la scène pour accueillir le Barcode BusyIndicator PaginationControl et Rating .

Il s'agissait de l'application Telerik UI for WinUI Examples . Si vous ne l'avez pas encore essayée, qu'attendez-vous? Elle a également un peu d'éclat ajouté: il existe maintenant une visionneuse de code pour chaque exemple. Et une ampoule intelligente pour éteindre les lumières et lancer le thème sombre ou les rallumer pour voir la lumière (au niveau de l'exemple). Oh, et vous pouvez maintenant utiliser notre Nouvelle page (vous savez qu'elle vous montrera toutes les bonnes nouvelles, n'est-ce pas?).

Tous ensemble

Un effort mutuel de notre côté et du vôtre est toujours garanti pour conduire à des résultats fluides et satisfaisants. Nous vous encourageons constamment à partager vos commentaires et à nous aider à façonner l'avenir de Telerik UI pour WinUI. Cette fois, ce n'est pas différent. Suggérez ou recommandez tout ce qui est important pour vous – votre contribution sera un facteur important dans les futurs composants et API de la feuille de route.

Pendant sa phase expérimentale, Telerik UI pour WinUI restera un essai gratuit, et nous espérons que vous continuerez à partager vos cas d'utilisation, votre expérience et vos obstacles avec nous. Vous pouvez:

• Contactez-nous par e-mail – Envoyez-nous un message, pour tout ce qui concerne le produit ou tout simplement pour dire bonjour à TelerikWinUI@progress.com
• Visitez le Portail de commentaires – Partagez toute demande de fonctionnalité (ou rapport de bogue) que vous pourriez avoir
• Rendez-vous sur Forums Telerik – Recevez une aide technique sur le produit

Enfin, soyez fort et sain Assurez-vous de:

Essayez Telerik UI pour WinUI Preview Now!