Découvrez le WPF WOW – World of Windows 11 (Nouveau thème)

Explorez l’interprétation de l’évolution visuelle de Windows 11 grâce au dernier ajout à l’interface utilisateur Telerik pour la suite de thèmes de WPF, le thème Windows 11. Variations de couleur claires et foncées intégrées, effets mica et acrylique, variations de commutation basées sur le mode d’application par défaut du système d’exploitation, une option pour utiliser la couleur d’accentuation du système d’exploitation et bien plus encore.

La version R2 2022 des composants Telerik Desktop et Mobile est là, et je ne peux pas penser à un meilleur prélude à l’un des ajouts les plus excitants au monde Telerik WPF – le thème Windows 11. Il suffit de lire la citation suivante du génial
article de blog à propos du système d’exploitation Windows 11 :

Windows est plus qu’un simple système d’exploitation ; c’est un tissu tissé dans nos vies et dans notre travail. C’est là que nous nous connectons avec les gens, c’est là que nous apprenons, travaillons et jouons. Au fil du temps, il est resté familier et adapté à nous.

Existe-t-il une meilleure inspiration que la révolution visuelle du système d’exploitation Windows pour étendre l’interface utilisateur de la suite de thèmes WPF ? J’ai hâte d’apprendre les détails. Variations de couleur claires et foncées intégrées, effets mica et acrylique, variations de commutation basées sur le mode d’application par défaut du système d’exploitation, une option pour utiliser la couleur d’accentuation du système d’exploitation, whoosh ! 😵 Si vous êtes aussi enthousiaste que moi pour le thème Windows 11, lisez la suite.

Première impression

Ce thème sait vraiment donner une bonne première impression. Non, ce n’est pas absurde. J’espère que ces clichés sur le tapis rouge gagneront votre confiance en mes mots.

Ceux-ci m’ont laissé désireux de valider si les premières impressions durent. Passons aux coulisses.

Vraies couleurs

Dans cette section, je ferai de mon mieux pour révéler le caractère du thème Windows 11. Cela semble un peu mystique, mais je peux garantir que si les plans ci-dessus n’ont pas conduit au coup de foudre, le second regard le fera sûrement arriver.

Variations de couleur

La couleur aide les utilisateurs à se concentrer sur leurs tâches en indiquant une hiérarchie visuelle et une structure entre les éléments de l’interface utilisateur. Les couleurs de Windows 11 sont conçues pour fournir une base apaisante, améliorant subtilement les interactions de l’utilisateur et mettant l’accent sur les éléments importants uniquement lorsque cela est nécessaire.

Ces couleurs sont distribuées sous forme de variations de couleurs intégrées claires et foncées. Il s’agit de la première interface utilisateur pour les thèmes de WPF qui offre une autre variation de couleur extraordinaire, celle du système. Il décide automatiquement d’utiliser les couleurs de la variation claire ou sombre du thème en fonction du système‘le mode d’application par défaut.

Pendant que nous sommes sur ce sujet, je veux partager une autre chose intéressante à propos de ce thème : la possibilité d’utiliser la couleur Windows au lieu du thème‘les accents par défaut. Ceci est contrôlé via le UseSystemAccentColor propriété. J’adore totalement cette option et je pourrais sûrement passer des heures à choisir ma couleur préférée !

Effets de fenêtre

Le plaisir ne s’arrête pas là, il se renforce. Ce thème offre une apparence native prête à l’emploi du Composant de fenêtre Telerik WPF lorsque l’application s’exécute sur Windows 11. Comment ? Avec le célèbre système d’exploitation matériaux. Les matériaux sont des effets visuels appliqués aux surfaces UX qui ressemblent à des artefacts réels. Windows 11 utilise des matériaux occultants : acrylique et mica.

L’acrylique est un matériau semi-transparent qui reproduit l’effet du verre dépoli. Dans Windows 11, l’acrylique a été mis à jour pour être plus lumineux et plus translucide, permettant une relation contextuelle plus forte avec les visuels derrière.

Le mica est un nouveau matériau opaque introduit dans Windows 11. Les surfaces en mica sont subtilement teintées avec la couleur d’arrière-plan du bureau de l’utilisateur. Ce matériau indique également le focus de la fenêtre avec des états actifs et inactifs en tant que fonctionnalité intégrée.

Les deux sont conscients du mode, prenant en charge les modes clair et sombre.

Vous ne savez pas lequel choisir et comment passer de l’un à l’autre ? Ne vous inquiétez pas, notre équipe de développement s’en occupe. La réponse est—en utilisant le nouveau WindowEffectsHelper. L’article de documentation sur ce thème est génial, soit dit en passant, et contient un exemple sur la façon d’apporter ce changement dans le Réglage du matériau section.

Icônes remaniées

Pour ceux d’entre vous qui connaissent les glyphes Telerik, jusqu’à la version R2 2022, ils utilisaient la police TelerikWebUI par défaut. La nouvelle version et le nouveau thème ont apporté une nouvelle police de glyphe, la TelerikFluentIcons. Il contient un ensemble d’icônes similaire à celui de TelerikWebUI mais avec une apparence visuelle différente pour mieux correspondre à l’iconographie de Windows 11. Les glyphes ont été repensés pour adopter une géométrie plus douce et des métaphores plus modernes.

Géométrie

À la fin de la sous-section précédente, j’ai mentionné la géométrie. Ça ne dit rien de particulier, n’est-ce pas ?

La géométrie de Windows 11 a été conçue pour prendre en charge les expériences d’application modernes. Les coins progressivement arrondis, les éléments imbriqués et les gouttières cohérentes se combinent pour créer un effet doux, calme et accessible qui met l’accent sur l’unité d’objectif et la facilité d’utilisation.

Le thème applique des coins arrondis à toutes les fenêtres d’application de niveau supérieur. Il en va de même pour les contrôles les plus courants tels que les boutons, les éditeurs, etc. Les rayons d’angle les plus utilisés sont ceux de la palette de thèmes. Rayon d’angle et OverlayCornerRadius—4px et 8px respectivement. Les conteneurs de niveau supérieur tels que les fenêtres d’application, les fenêtres contextuelles et les boîtes de dialogue sont arrondis à l’aide d’un rayon d’angle de 8 pixels. Les éléments de la page tels que les boutons et les plaques arrière de liste sont arrondis à l’aide d’un rayon d’angle de 4 pixels. Les bords droits qui se croisent avec d’autres bords droits ne sont pas arrondis. Les coins des fenêtres ne sont pas arrondis lorsque les fenêtres sont agrandies.

Après avoir appris à vous connaître, vous n’avez pas envie d’essayer le thème Windows 11 dans vos applications ? Je le fais. Alors, voyons les façons possibles de le faire. Médaillés Telerik-UI-for-WPF-themes, vous pouvez ignorer cette partie.

Essai

Comment obtenir le thème Windows 11 dans une application WPF ? En utilisant des styles implicites (mon mécanisme de thème préféré) ou StyleManager. Exigence commune pour les deux options : une application WPF existante.

En choisissant des styles implicites, il vous suffit de cliquer sur n’importe quel contrôle Telerik WPF dans la vue de conception. Cliquez ensuite sur le Thème élément et choisissez le thème Windows 11 parmi les choix disponibles :

StyleManager propose deux options : code-behind ou utilisation de la propriété jointe Thème :

public MainWindow() 
{
    StyleManager.ApplicationTheme = new Windows11Theme();
    InitializeComponent(); 
}

<telerik:RadButton telerik:StyleManager.Theme="Windows11"/>

Sans effort. 👌 Je pense que vous êtes prêt pour le prochain niveau : explorer les capacités de personnalisation.

Le niveau « Personnalisation »

L’un des principes de conception qui a guidé le parcours pour faire de Windows 11 la meilleure implémentation de Fluent est de le rendre personnel. Quand on parle du personnel, il y a deux choses qui l’améliorent beaucoup.

Nous offrons le Générateur de thème de couleur-un outil de personnalisation interactive de la palette de thèmes avec aperçu en direct. Vous pouvez essayer différentes nuances, différentes teintes, les mélanger autant que vous le souhaitez. Et lorsque vous avez terminé votre petite expérience, vous pouvez exporter le résultat.

Modifier l’apparence d’un champ spécifique de base sans altérer son modèle de champ est également une option. L’assistant de thème peut être utile pour cela. Ses propriétés ont été étendues cette version spécialement pour les besoins de conception de ce thème génial.

Pour Windows 11, les changements d’arrière-plan d’un contrôle pour son état de survol de la souris par exemple sont effectués avec l’aide du ThemeHelper’s MouseOverBackgroundBrosse propriété. Les changements de pinceau de bordure utilisent les pinceaux ThemeHelper existants. Cela rend la personnalisation encore plus facile, croyez-moi. Il y a aussi un exemple prêt pour la copie dans le Assistant de thème section de la documentation du thème.

Gratitude et rétroaction

Merci d’avoir pris le temps de lire mon blog ! J’espère que vous êtes curieux de voir la valeur du monde Windows 11 et l’impressionnante interprétation de Telerik en tant que thème WPF. N’oubliez pas de vérifier son documents, aussi. Profitez de son calme et de sa précision en téléchargeant la dernière version de l’interface utilisateur Telerik pour WPF depuis votre Compte Telerik pour les utilisateurs existants ou pour les nouveaux arrivants :

Obtenir la dernière interface utilisateur pour WPF

Vous savez que ce n’est qu’une petite partie (mais essentielle et engageante) de la version R2 2022. Assurez-vous d’apprendre Quoi de neuf dans R2 2022 avec les composants de bureau et mobiles Telerik. Et 🙏 prenez une minute ou deux pour nous aider à créer les éléments dont le développement de votre application bénéficiera le plus. Partagez vos commentaires honnêtes dans la section des commentaires ci-dessous, ou dirigez-vous vers le Portail de commentaires du ou des produits que vous utilisez.

Restez à l’écoute, Windows 11 pour le Telerik ReportViewer arrive bientôt aussi. 🥳