Partager via

Correspondance des thèmes Visual Studio dans les extensions Visual Studio

Chaque fois que vous générez une interface utilisateur personnalisée à l’aide de WPF, vous devez vous assurer qu’elle correspond au thème de Visual Studio. De cette façon, votre interface utilisateur sera native et se sentira plus comme une partie naturelle de Visual Studio. Si ce n’est pas le cas, les fenêtres et boîtes de dialogue de votre outil peuvent finir par ressembler à ceci dans le thème Clair :

Screenshot showing a window that uses the Light theme without W P F controls.

Notez que le remplissage autour des zones de texte et des boutons ne semble pas correct ? Il devient encore pire dans le thème Sombre :

Screenshot showing a window that uses the Dark theme without W P F controls.

À présent, le texte et les couleurs d’arrière-plan rendent presque impossible la lecture. Pas bien.

Il existe un moyen simple de s’assurer que les couleurs d’arrière-plan de notre interface utilisateur, le style de bouton, etc. correspondent à celle de Visual Studio avec un petit truc simple. De cette façon, la même interface utilisateur peut ressembler à ceci dans le thème Light :

Screenshot showing a window that correctly uses controls and the Light theme.

Ou dans le thème Sombre :

Screenshot showing a window that correctly uses controls and the Dark theme.

Ça semble beaucoup mieux. Examinons comment nous pouvons thèmer notre interface utilisateur.

WPF UserControl

Voici un exemple de WPF <UserControl> qui peut être utilisé directement à l’intérieur d’une fenêtre d’outil.

<UserControl x:Class="TestExtension.RunnerWindowControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:toolkit="clr-namespace:Community.VisualStudio.Toolkit;assembly=Community.VisualStudio.Toolkit"
             toolkit:Themes.UseVsTheme="True">

Notez l’espace xmlns:toolkit de noms importé et l’attribut toolkit:Themes.UseVsTheme="True" . Ils appliquent automatiquement le style officiel pour les contrôles WPF que Visual Studio utilise lui-même. Nous n’avons rien d’autre à faire pour appliquer le style à l’ensemble <UserControl>. Facile !

Un avantage supplémentaire est que lorsque l’utilisateur modifie le thème de couleur de par exemple clair en foncé, notre interface utilisateur bascule immédiatement sans avoir à recharger.

Contrôle DialogWindow

Visual Studio est fourni avec un contrôle que nous pouvons utiliser pour les fenêtres personnalisées, qui est le DialogWindow contrôle. Il est recommandé de l’utiliser pour n’importe quelle fenêtre de dialogue, mais elle peut également être utilisée dans les fenêtres outil.

Il est très similaire à d’autres types de fenêtre XAML.

<platform:DialogWindow 
    x:Class="TestExtension.ThemeWindowDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:platform="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0"
    xmlns:toolkit="clr-namespace:Community.VisualStudio.Toolkit;assembly=Community.VisualStudio.Toolkit"
    toolkit:Themes.UseVsTheme="True">

Notez les espaces de noms importés pour le kit de ressources et la plateforme et l’attribut toolkit:Themes.UseVsTheme="True".

C’est tout. Votre fenêtre de boîte de dialogue est désormais à thème à l’aide de couleurs et de styles Visual Studio.

Obtenir le code source

Vous trouverez le code source de cette extension dans le projet de test Community Shared Computer Toolkit.

Contenu connexe

En savoir plus sur les couleurs de Visual Studio à partir de ces ressources.