Theming et WinUI? Pas de soucis, notre éditeur de thèmes peut vous aider

Présentation de l'éditeur de thèmes Telerik WinUI – votre nouvel assistant le plus efficace pour la personnalisation facile des pinceaux WinUI par défaut, y compris un aperçu des modifications et de l'exportation. Saisissez-le maintenant et rendez vos applications WinUI encore plus belles.

Aloha! Si vous avez lu certains de mes autres articles de blog, vous savez déjà que j'ai tendance à partager la génialité de la vie avec mon public, et aujourd'hui je veux vous présenter l'éditeur de thèmes Telerik WinUI. De quel genre d'espèce animale s'agit-il? Eh bien, comme son nom l'indique, il s'agit d'une application d'aide pour la personnalisation facile des pinceaux WinUI par défaut, visant une création de thème personnalisé sans faille. Il est basé sur l'application UWP XAML Theme Editor de Microsoft.

L'éditeur de thèmes Telerik WinUI était l'une des fonctionnalités phares de l'interface utilisateur Telerik pour la version WinUI R2 2021, qui est maintenant disponible et entièrement emballée avec de nouveaux composants et fonctionnalités pour vos applications WinUI. Consultez tous les nouveaux bonus dans le article de blog .

Depuis que nous avons appris dans cet article que l'éditeur de thème vous permet de modifier les couleurs des thèmes, je pense qu'il est important de mentionner que les résultats sont disponibles pour un aperçu immédiat. Des rectangles colorés et des sélecteurs de couleurs vous viennent à l'esprit, hein? Oui, nous en avons, mais nous avons aussi une instance réelle des commandes Telerik, ainsi que des commandes natives MS, afin que vous puissiez avoir une vue d'ensemble.

Pas à pas

Très bien, mais qu'est-ce que faut-il utiliser cet outil puissant? Laissez-moi vous montrer les étapes suivantes:

1. Choisissez un préréglage de couleur dans le menu déroulant Préréglages de couleurs sur la droite (ou ne faites rien et commencez par celui par défaut).
2. Ajustez les paramètres de couleur des pinceaux dans le Sections Région Base et Primary sous le menu ci-dessus (plus de trucs et astuces à ce sujet ci-dessous).
3. Prévisualisez immédiatement l'effet sur la gauche en parcourant tous les contrôles disponibles à partir de la vue à onglets pour voir à quoi ressemble chaque contrôle.
4. Une fois satisfait des résultats, cliquez sur le bouton Exporter pour générer le code prêt-à-copier des paramètres de palette générés vers
5. Cliquez sur le bouton magique Copier dans le presse-papiers et vous êtes prêt à coller le code des paramètres de la palette dans votre application WinUI. L'endroit recommandé pour ce code est dans le fichier App.xaml.

Intriguant, hein? Si vous êtes aussi impatient que moi, n'hésitez pas à vous rendre sur la page de téléchargement de cet outil génial. En attendant, je commencerai par ma visite guidée.

Si vous avez atteint la cinquième étape de l'utilisation de l'éditeur de thèmes Telerik WinUI, mais que pour une raison quelconque, vous n'avez pas encore créé et exécuté un exemple d'application utilisant Telerik UI pour les composants WinUI (ou tout autre composant WinUI), vous devez vous assurer que votre système est configuré pour WinUI. Les exigences de base peuvent être trouvées dans la section Prérequis de l'article de documentation de mise en route de Telerik UI pour WinUI (il y a aussi beaucoup plus d'informations précieuses).

Rendez-vous avec l'éditeur de thème [19659006] Qu'avons-nous appris jusqu'à présent pour notre éditeur de thèmes? C'est un outil de développement de conception qui peut être utilisé pour créer des palettes de thèmes personnalisées pour WinUI. Cet outil facilite également le flux de développement en générant et en exportant le préréglage choisi dans un dictionnaire de ressources de balisage XAML.

Ce que nous n'avons pas encore appris – à quoi cela ressemble-t-il? Il est temps de régler ce droit.

N’est-ce pas beau? Et avez-vous remarqué que l'aperçu immédiat concerne à la fois les thèmes clairs et foncés.

P.S. Je n'ai pas sélectionné l'onglet Telerik Scheduler par accident. Je l'ai fait tout à fait exprès, car c'est l'un des derniers et plus grands trésors de notre dernière version.

Laissez briller vos vraies couleurs

Les couleurs sont partout. Et la matière. Et vous le savez .

Les couleurs de l'éditeur de thèmes sont sur la droite et sont regroupées en trois grandes catégories pour les thèmes Clair et Sombre (encore).

La région ] est responsable de l'arrière-plan sur lequel reposent tous les contrôles. Elle fera partie des ressources exportées mais n'affectera rien dans votre application, sauf si vous la définissez sur votre élément racine, par exemple.

La région Base représente toutes les plaques arrière des commandes et leur temporaire afficher des éléments visuels (par exemple, survoler, appuyer sur, etc.). Petite astuce: les couleurs de cette région doivent être en contraste avec l'arrière-plan principal et avec la couleur du texte (noir pour le thème Clair et blanc pour le thème Sombre).

La partie Primaire couvre l'accent la couleur et ses variations. Il doit contraster principalement avec la couleur du texte blanc. Il est également utilisé pour les états basculés / cochés / sélectionnés de certains éléments comme les boutons ou les éléments de liste. C'est celui qui fait vraiment ressortir un élément.

Chacune des catégories ci-dessus est extensible et révèle toutes les couleurs qui appartiennent au groupe respectif:

Affinez ces couleurs

Comme mentionné dans la section précédente, toutes les couleurs principales d'une région cachent des couleurs mineures extensibles, appartenant à la région respective. Je peux résumer la capacité qu'il offre en exactement trois mots – attention aux détails.

Comment affiner chaque couleur, qu'elle soit majeure ou mineure – il suffit de cliquer sur chaque élément coloré (soit le rectangle de couleur principal, soit l'arrondi des couleurs mineures. rectangles avec leurs valeurs hexadécimales). Que va-t-il se passer? Une fenêtre contextuelle contenant un éditeur de couleurs s'affichera:

Outre l'éditeur de couleurs, il y a un panneau crucial sur à gauche, chargé de s'assurer que dans l'un ou l'autre thème respectif, vous êtes compatible avec le contraste. Ceci est extrêmement important lors de la création d'un thème. Vous pouvez facilement identifier le contraste avec la couleur de texte la plus répandue dans le thème que vous modifiez. Lorsque vous choisissez un couleur qui tombe en dessous du rapport de contraste standard de 4,5: 1, vous serez alerté avec un texte rouge à côté de votre valeur de contraste.

(Pré / Re) Définissez votre préréglage

Démarrage de l'éditeur de thèmes Telerik WinUI, le préréglage sera toujours défini sur Default, c'est-à-dire le style natif du thème Clair et Foncé pour toutes les commandes présentes.

Pour la partie timide de nos clients, nous avons conçu des préréglages prédéfinis qui sont disponibles dans le menu déroulant Préréglages de couleurs. N'hésitez pas à vous procurer un petit morceau de notre Appartement , Neutre, Gris, Océan, Cerise, Enthousiaste, Citrouille, Lavande, Forêt et Nuit. 😵

Pour vous tous qui êtes prêts à commencer à créer vos propres thèmes, eh bien, allez-y. 🤘🏼 Commencez à éditer ces couleurs tout de suite! Une fois que vous avez commencé à les peaufiner, le préréglage que vous concevez sera temporairement nommé Personnalisé. Cela n'affectera pas les préréglages listés ci-dessus.

La partie la plus difficile de tout cela est le point satisfaisant. 😁 Une fois que vous avez atteint cela, il vous suffit de cliquer sur le bouton Enregistrer et de naviguer vers le point de sauvegarde souhaité. Vous pouvez également ouvrir votre thème JSON enregistré plus tard en cliquant sur le bouton Charger.

The Real Theme Deal

Une fois que vous vous sentirez comme un maître et que vous aurez atteint le point satisfaisant du thème, je suppose que vous voudrez le voir pour de vrai dans votre application WinUI. Pour cela, vous devez cliquer sur le bouton magique Exporter dans le coin inférieur droit de l'outil. Voyons ce qui va se passer:

Une boîte de dialogue s'affiche, contenant toutes les illustrations que vous avez créées, prêtes à être copiées dans le presse-papiers. Et c'est exactement ce que je fais à la fin du GIF ci-dessus. P.S. Si quelque chose vous dérange, n'hésitez pas à apporter plus de modifications et à réexporter autant de fois que vous le souhaitez. Chaque modification actualisera le contenu de la fenêtre d'exportation.

Chaque fois que vous êtes sûr qu'il s'agit de votre dernier chef-d'œuvre, l'étape suivante consiste à ouvrir une application WinUI existante et à y ajouter les ressources nécessaires. Faisons-le ensemble.

N'oubliez pas non plus de définir la couleur d'arrière-plan de votre page (comme moi 🙊) sur la RegionColor que vous avez choisie pour votre thème. C'est le seul pinceau qui ne sera pas appliqué automatiquement. Une fois que c'est fait, vous avez terminé! Les couleurs de votre thème seront désormais omniprésentes dans votre application ou votre page en fonction.

Téléchargez Telerik WinUI ThemeEditor Now

Feedback Matters

Certains d'entre vous peuvent souvent ignorer cette partie de tout blog (si tel est le cas est présent), mais la vérité est que la rétroaction compte vraiment. Dans toutes sortes d'aspects. Personnellement, je ne me lasserai pas de vous demander instamment de le partager.

Votre contribution est précieuse. Alors n'hésitez pas à:

• Contactez-nous par e-mail – Envoyez-nous une ligne, 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 —Recevoir toute aide technique sur le produit

Ressentez les derniers bits

Au tout début de mon blog, j'ai mentionné notre impressionnante version R2 2021 de l'interface utilisateur Telerik pour WinUI. C'est une douce invitation à ne pas attendre une minute de plus et à essayer la dernière:

UI pour WinUI