Démonstration de personnalisation du thème de l'interface utilisateur Telerik et Kendo

Le développement de logiciels multiplateformes de qualité nécessite de cibler différentes interfaces utilisateur. Découvrez comment personnaliser un thème d'interface utilisateur et l'appliquer aux applications Web et de bureau.

Series Outline

Ceci est le deuxième article d'une série détaillant comment styliser les applications sur toutes les plates-formes, en écrivant une seule fois et en les diffusant partout. Cet article concerne la personnalisation d'un thème et son application à une application Web et de bureau. Voici les articles de cette série.

1. Interface utilisateur élégante et personnalisable pour tous les systèmes et technologies de conception
2. Personnalisation du thème de l'interface utilisateur Telerik et Kendo : Web and Desktop Demo (cet article)
3. Telerik Reporting Modern UI : Report Viewer Demo (à venir !)

Introduction

Le développement de logiciels multiplateformes a été une demande croissante ces derniers temps et pour une bonne raison. Les logiciels sont de plus en plus impliqués dans notre vie quotidienne. Naturellement, certains logiciels sont apparents et d'autres non.

Des maisons connectées aux ordinateurs dans nos poches et aux téléviseurs dans nos salons, tout exécute une forme de logiciel et tous ces appareils fonctionnent sur une pléthore de plates-formes. et les facteurs de forme.

Cela rend le processus de conception et de développement beaucoup plus difficile en raison de la nécessité de cibler les nombreux systèmes d'exploitation et facteurs de forme. Par exemple, imaginez développer un serveur de diffusion multimédia domestique qui doit fonctionner sur les téléviseurs, les téléphones, les ordinateurs portables et les consoles de jeux.

Un logiciel multiplateforme de qualité nécessite de cibler différentes versions de Linux, MacOS, Windows, iOS et Android en même temps. . Il n'y a pas d'exception en ce qui concerne l'interface utilisateur (UI). En tant que société, nous nous adaptons à l'utilisation de logiciels partout et ne les utiliserons que si nous l'aimons et qu'ils fonctionnent bien. une variété de plates-formes, Telerik et Kendo UI sont une excellente option. Pour un aperçu complet des avantages et des inconvénients de l'utilisation d'un système de conception pré-construit ou personnalisé, je vous encourage à lire le premier article de cette série . Pour cette section, je souhaite aborder le problème que Kendo UI et Telerik résolvent en ce qui concerne la personnalisation du thème de l'interface utilisateur.

Pour le dire simplement, la conception d'une application est difficile. Cela nécessite un concepteur compétent ou une équipe de concepteurs qualifiés, et ils doivent travailler avec l'équipe de développement pour garantir une apparence et une convivialité cohérentes pendant le cycle de vie du développement. Ajoutez à cela le désir d'obtenir une apparence cohérente sur toutes les plates-formes et cela devient un défi encore plus grand.

Pour simplifier ce défi, j'ai articulé un scénario hybride dans le premier post où l'application a commencé avec un thème de base et personnalisé en tant que l'application a évolué. Nous suivrons la démarche qui nous permettra le meilleur des deux mondes. Nous commencerons par une conception de base pour chaque plate-forme d'application, puis la personnaliserons à notre guise. Passons en revue l'application de démonstration.

Présentation des applications

Pour la démo, nous aurons besoin d'un backend pour fournir des données avec les applications Web et de bureau.

Pour le backend, l'exemple utilise ASP.NET API Web de base avec des méthodes statiques pour renvoyer des données génériques. La source pour cela peut être trouvée dans Sample Data. De plus, j'ai déployé ce service pour
http://sampledataapi.azurewebsites.net. Nous utiliserons ce backend comme données pour les clients.

Les clients se concentreront sur le Web et le bureau. Les applications pour le Web utiliseront Kendo UI pour Angular et Telerik UI pour Blazor. L'application pour le bureau sera Telerik UI for WPF.

Il convient de noter que j'avais l'intention de garder l'implémentation simple pour ne pas éloigner les principaux concepts concernant le style partagé. L'objectif global est d'apprendre à quel point il est facile de personnaliser un thème de base et de le réutiliser dans les applications Kendo UI et Telerik UI.

Création du thème personnalisé

Pour le thème de base, j'aime utiliser le thème Material car il a un joli look moderne. Pour créer un thème personnalisé, nous allons commencer par le Kendo UI Theme Builder et
le WPF Color Theme Generator.

Kendo UI Sass Theme Builder

Dans le Theme Builder, nous commencerons à themebuilder.telerik.com/kendo-angular-ui et passer par le processus de personnalisation du thème Material.

Tout d'abord, nous allons sélectionner Start Theminget nous assurer que le thème Material de base est sélectionné et que le lien Select All Components est cliqué. Faites ensuite défiler vers le bas et cliquez sur le bouton Créer.

Cela nous amènera à un écran qui affiche un aperçu utilisable de chaque contrôle. Cela permet de tester l'apparence des commandes.

Les personnalisations que je préfère lors de l'utilisation d'un thème comme celui-ci modifient le rayon et les couleurs de la bordure. Dans le générateur de thème, nous pouvons sélectionner une palette de couleurs de base parmi laquelle choisir et personnaliser à votre guise. Pour un joli visuel, j'ai créé une visite guidée animée ci-dessous (fig. 1).

Figure 1 : Créer la visite guidée du thème de base Kendo UI Sass

Après avoir créé le thème personnalisé et téléchargé les ressources, l'archive comprend un fichier CSS et un fichier JSON. Le fichier CSS est une version compilée de notre thème d'interface utilisateur personnalisé qui peut être utilisé immédiatement dans n'importe quelle application Web, et le fichier JSON sert à réimporter le thème personnalisé dans le thème Sass.
Builder et apporter des modifications à l'avenir.

Le téléchargement des ressources Sass Theme Builder comprend également un fichier SCSS qui peut être utilisé dans n'importe quelle étape de génération de pré-traitement. Par exemple, webpack, Gulp ou Grunt. Comme avec la plupart des systèmes de conception Web, nous exposons une variété de variables qui peuvent être remplacées via un fichier Variable.scss.

La possibilité de remplacer les variables via SCSS donne au concepteur ou au développeur un nombre infini de des options de personnalisation et un contrôle encore plus grand. Un exemple de ceci est décrit dans la documentation Angular Material Theme Customization. Dans notre cas, cependant, le Sass Theme Builder est un outil que nous fournissons pour réduire les tâches lourdes et le faire pour nous.

Le véritable pouvoir du Sass Theme Builder est qu'il fonctionne avec tous nos produits Web. De plus, le processus ci-dessus est similaire à notre suite d'interface utilisateur pour WPF Desktop. La différence est que l'outil de personnalisation utilisé est le Telerik Color Theme Generator. Voyons cela ensuite.

Générateur de thèmes de couleurs Telerik

Dans le générateur de thèmes de couleurs, nous pouvons sélectionner un thème de base. Nous choisirons le matériel comme avant. Ensuite, sur le côté droit de l'application se trouve un panneau pour les paramètres de couleur. C'est ici que nous choisirons la palette de couleurs de base et nos modifications au thème de base comme vous le souhaitez.

La génération de thème dans WPF permet plus de peaufinage car la suite WPF utilise un processus de thème de base différent. Par exemple, au lieu d'entrer uniquement la couleur primaire et secondaire comme le générateur de thème Sass, il y a plus de paramètres à configurer.

Pour comprendre les configurations disponibles pour notre thème de base sélectionné, nous allons référencer le
Documentation sur le thème matériel WPF. Il nous guidera dans la création de la même apparence dans notre application WPF en faisant correspondre les configurations de thème.

Correspondance des configurations de thème

Dans l'interface utilisateur de Kendo, il y a trois paramètres à saisir, assez simples. Cependant, dans WPF, il y en a quelques dizaines, ce qui permet une personnalisation riche du thème de l'interface utilisateur. La bonne nouvelle est que nous pouvons commencer par mapper les entrées de l'interface utilisateur Kendo sur des entrées de couleur WPF similaires. Regardons ceci ci-dessous (fig. 2).

Figure 2 : Entrées de couleurs de thème WPF

Pour notre cas, le pinceau principal et le pinceau d'accent sont comme auparavant les entrées de couleur primaire et secondaire. En conséquence, nous considérerons le pinceau primaire comme la couleur primaire et le pinceau d'accent comme la couleur secondaire. La section Principales Brushes et Accent Brushes de la documentation WPF Material Theme fournit des détails sur la façon dont les couleurs sont appliquées.

Pour le thème Material par défaut, la brosse principale ou la couleur principale est indigo ou bleu. Nous allons changer cela en bleu clair pour correspondre à notre style personnalisé. Le pinceau d'accent ou la couleur secondaire est orange vif, et nous le remplacerons également par notre orange foncé. Ensuite, nous utiliserons la documentation pour ajuster les brosses comme indiqué dans le tableau suivant (tbl. 1) et rassemblerons les variations à l'aide de Coolers.co.

Tableau 1 : Mappage des couleurs WPF Brush vers Kendo

Après avoir ajusté le thème à notre convenance, la dernière étape consiste à sélectionner le bouton Copier les paramètres dans le presse-papiers et à enregistrer la sortie dans un fichier séparé. Ce fichier sera utilisé lors de la personnalisation du thème de base de l'application WPF. Vous trouverez ci-dessous une présentation animée de ces modifications (fig. 3).

Figure 3: Créer une visite guidée du thème de base de l'interface utilisateur Telerik

Le processus ci-dessus est le moyen le plus simple de démarrer le thème entre les produits. Je dois également avertir qu'il y aura plus d'implication dans la cartographie du style des applications de bureau et du style Web. Cependant, la bonne nouvelle est que nous avons maintenant tous les atouts nécessaires pour nos applications clientes. Commençons par créer les applications Web.

Style des applications Web

Pour plus de simplicité, nos applications clientes utiliseront une grille simple car elle illustrera la même apparence. Nous utiliserons également les puissants générateurs de modèles dans chaque environnement de développement, c'est-à-dire Visual Studio Code et Visual Studio 2019. Nous allons démarrer l'application Angular et terminer avec l'application Blazor.

Angular Grid Application

Pour créer notre ]Angular Gridnous utiliserons l'Kendo UI Template Wizard dans Visual Studio Code Extension, qui a été créé pour échafauder les applications Angular, React ou Vue. Cela nous aidera à rendre notre application Angular Grid rapidement opérationnelle.

1. Lancez l'extension de modèle d'interface utilisateur Kendo dans Visual Studio Code (fig. 4).

Figure 4: Lancez Kendo Générateur de modèles d'interface utilisateur

Astuce de pro : Utilisez le raccourci CTRL + Shift + P (ou Command + Shift + P sur un Mac) pour lancer la palette de commandes.

2.Nommez le projet et fournissez un chemin de sortie (fig. 5).

Figure 5 : Nommer le projet et sélectionner la sortie

3. Sélectionnez le cadre angulaire (fig. 6).

Figure 6 : Sélectionnez Angular pour votre projet Grid

4. Ajoutez une page de grille et nommez la page Grille. Il sera ajouté en tant que composant à
le projet (fig. 7).

Figure 7: Add Angular Grid Page

5. Sélectionnez le thème de base Material (fig. 8).

Figure 8: Select Material Base Theme

Les étapes ci-dessus produisent une interface utilisateur Kendo de base pour un projet angulaire avec un composant Grid. Les prochaines étapes consistent à inclure notre thème personnalisé. Ce processus est décrit dans la section Utilisation des thèmes dans votre projet de la documentation Styling & Themes—Theme Builder Angular.

Pour notre application, nous allons simplement copier le contenu du fichier SCSS fourni à partir du téléchargement de Sass Theme Builder. Nous collons ensuite ceci à la ligne 1 du fichier styles.scss dans notre application Angular Grid. Faire cela intégrera le thème personnalisé dans notre processus de construction (fig. 9).

Figure 9 : Ajouter un thème personnalisé à l'application Angular

Ensuite, nous pouvons exécuter npm install et ng serve pour installer les packages npm et exécuter l'application Angular. Il devrait donner la sortie Grid suivante (fig. 10). C'est formidable de voir que la couleur primaire correspond à notre thème personnalisé.

Figure 10 : Grille angulaire de style personnalisé[19659009] La procédure ci-dessus illustre la rapidité avec laquelle un thème personnalisé peut être implémenté dans une application Angular. Naturellement, nous pourrions aller encore plus loin en utilisant un fichier Variables.scss et le fichier styles.scss d'une manière comparable. Voyons comment cela
peut être fait dans une application Telerik UI pour Blazor ensuite.

Blazor UI Grid Application

L'interface utilisateur Telerik s'intègre parfaitement dans Visual Studio et comprend un excellent modèle pour commencer. Créons ensuite le projet Blazor Grid.

1. Lancez Visual Studio et la boîte de dialogue Ajouter un nouveau projet (fig. 11).

Figure 11 : Visual Studio Ajouter un nouveau projet

2. Recherchez et sélectionnez le modèle de projet d'application Telerik C# Blazor (fig.
12).

Figure 12 : Sélectionnez le modèle de projet d'application Telerik C# Blazor

3. Nommez le projet et placez-le dans un dossier (fig. 13).

Figure 13 : Nom et emplacement du projet

4. Sélectionnez .NET 5.0 et la saveur Blazor Wasm (fig. 14).

Figure 14 : Sélectionnez .NET 5.0 et Blazor Wasm

5. Supprimez les références de style Bootstrap et Kendo de index.html en ne laissant que la référence site.css (code 1).

Extrait de code 1 : index Blazor Wasm.html

6. Changez la page Index.razor en une grille modifiable (code 2).

Code Snippet 2: Telerik Blazor Wasm Grid Index.razor Page

7. À ce stade, nous pouvons maintenant intégrer notre thème personnalisé. Nous utiliserons le CSS
fourni à partir du téléchargement de Sass Theme Builder et collez-le dans le fichier site.css de l'application Blazor.

Conseil de pro : Laissez les styles pour l'identifiant blazor-error-ui.

Le Le fichier CSS est assez volumineux et ne peut pas être inclus dans cet article. Cependant, il est inclus dans le référentiel source.

Enfin, nous pouvons ajouter notre classe Product au projet partagé et exécuter l'application. Cela donnera la Grille suivante (fig. 15). L'aspect et la convivialité cohérents de la grille arrivent.

Figure 15 : Custom Styled Blazor Grid

Les sections ci-dessus concluent à la configuration de notre style personnalisé pour une interface utilisateur Kendo pour la grille angulaire et une interface utilisateur Telerik pour la grille Blazor. Dans cette section, nous avons affiché les étapes les plus simples pour obtenir un style cohérent sur deux de nos produits Web, qui illustre les concepts de base pour obtenir le même résultat dans nos autres suites de contrôle. Commençons ensuite par notre application WPF sur le bureau.

Style de l'application de bureau

Nos contrôles WPF sont tout aussi faciles à démarrer avec une grille. Nous offrons une excellente intégration avec Visual Studio, et le générateur de thèmes de couleurs Telerik nous donne l'exemple de code pour appliquer notre style personnalisé. Ceci est détaillé dans l'article Color Theme Generator . Commençons.

WPF Grid Application

Pour notre WPF Grid, nous allons utiliser Implicit Styling car c'est un moyen bien supérieur d'utiliser le style dans WPF. Ceci est également connu sous le nom d'approche NoXaml. Le savoir sera utile lors de l'ajout de packages NuGet à l'application. On le fera
commencez par ajouter un nouveau projet dans Visual Studio.

1. Ajoutez un nouveau projet dans Visual Studio et sélectionnez le modèle Telerik C# WPF (.NET Core) (fig. 16).

Figure 16 : Ajouter un modèle de projet WPF Telerik C# (.NET Core)

2. Donnez un nom au projet et spécifiez un emplacement (fig. 17).

Figure 17 : Spécifiez le nom et l'emplacement du projet WPF

3. Sélectionnez le modèle vierge (fig. 18).

Figure 18 : Sélectionnez le modèle de projet vierge

4. Supprimez les packages NuGet modèles et ajoutez le package Telerik.Windows.Controls.GridView.for.Wpf (fig.
19).

Figure 19 : Ajout de Telerik.Windows.GridView.for Package .Wpf NuGet

5. Ajoutez l'interface utilisateur Telerik pour WPF Material Base Theme NuGet Package (fig. 20).

Figure 20 : Ajouter Telerik.Windows.Themes.Material.for.Wpf NuGet Package

6. Ajoutez les dictionnaires de ressources fusionnés à la page App.xaml (code 3).

Extrait de code 3 : Ressource fusionnée WPF App.xaml Dictionnaires

7. Utilisez l'extrait de code fourni pour modifier le thème globalement. Nous ajouterons le
sortie du générateur de thème de couleur Telerik dans le fichier App.xaml.cs avant InitializeComponent() (code 4).

Conseil de pro : Utilisez le Telerik.Windows.Controls et le Telerik.Windows.Controls.ColorEditor pour la conversion HEX en couleur. La sortie du Telerik Color Theme Generator utilise l'implémentation .NET Framework.

Code Snippet 4: WPF App.xaml.cs Theme Customization

8. Add a GridView with to the MainWindow.xaml view (code 5). Note that I added some extra buttons to show how they look on the
Desktop.

Code Snippet 5: WPF MainWindow.xaml GridView Markup

The above steps will produce the following Grid output (fig. 21). The theming is looking quite consistent even on the desktop. Understandably, there are some noticeable differences, and these could be fixed with further tweaking.

Figure 21: WPF Custom Styled GridView

This provides a nice overview of the WPF RadGridView and how quickly we can get our custom theme working in our desktop application. Most notably, the process is quite like the web applications. We set up our application for implicit styling with the Material base theme and apply our customizations as provided from the Telerik Color Theme Generator.

Conclusion

This concludes part two of our Sleek and Customizable UI series. In this post, we walked through creating a custom UI theme for web and desktop applications using the Kendo Sass Theme Builder and the Telerik Color Theme Generator. We achieved this by selecting an excellent base theme and customizing it to our needs. Finally, we walked through adding our customizations to Angular, Blazor and WPF applications. This has been an excellent exercise in understanding how quickly and easily a consistent
look and feel can be achieved in Kendo UI and Telerik UI controls.

Try DevCraft Today

Get started with a Telerik DevCraft Trial today! Our DevCraft tooling is the most powerful collection of Telerik .NET and Kendo UI JavaScript developer tools. It includes modern, feature-rich, and professionally designed UI components for web, desktop and mobile applications; embedded reporting and report management solutions; document processing libraries; automated testing and mocking tools.

DevCraft will arm your developers with everything needed to deliver outstanding applications in less time and with less effort. With award-winning technical support delivered by the developers who built the
products and a ton of resources and trainings, you can rest assured that you have a stable provider to rely on for your everyday challenges along your software development journey.

Try DevCraft Now