Freigeben über

Abgleichen von Visual Studio-Designs in Visual Studio-Erweiterungen

Immer wenn Sie eine benutzerdefinierte Benutzeroberfläche mit WPF erstellen, müssen Sie sicherstellen, dass sie dem Design von Visual Studio entspricht. Auf diese Weise sieht Ihre Benutzeroberfläche nativ aus und fühlt sich eher wie ein natürlicher Teil von Visual Studio an. Wenn dies nicht der Fall ist, sehen Ihre Toolfenster und Dialogfelder möglicherweise im Design "Hell" wie folgt aus:

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

Beachten Sie, wie der Abstand um Textfelder und Schaltflächen nicht richtig aussieht? Es wird noch schlimmer im dunklen Design:

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

Der Text und die Hintergrundfarben machen es nun fast unmöglich zu lesen. Nicht gut.

Es gibt eine einfache Möglichkeit, sicherzustellen, dass hintergrundfarben, Schaltflächenformaten usw. von Visual Studio mit einem einfachen kleinen Trick übereinstimmen. Auf diese Weise kann die gleiche Benutzeroberfläche im Design "Hell" wie folgt aussehen:

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

Oder im Design "Dunkel":

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

Das sieht viel besser aus. Sehen wir uns an, wie wir unsere Benutzeroberfläche entwerfen können.

WPF UserControl

Hier ist ein Beispiel für einen WPF <UserControl> , der direkt in einem Toolfenster verwendet werden kann.

<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">

Beachten Sie den importierten xmlns:toolkit Namespace und das toolkit:Themes.UseVsTheme="True" Attribut. Sie wenden automatisch die offizielle Formatierung für WPF-Steuerelemente an, die Visual Studio selbst verwendet. Wir müssen nichts anderes tun, um die Formatierung auf das gesamte Element <UserControl>anzuwenden. Kein Problem!

Ein zusätzlicher Vorteil besteht darin, dass unsere Benutzeroberfläche sofort wechselt, wenn der Benutzer das Farbdesign von z. B. Hell in Dunkel ändert, ohne dass es neu geladen werden muss.

DialogWindow-Steuerelement

Visual Studio wird mit einem Steuerelement ausgeliefert, das wir für benutzerdefinierte Fenster verwenden können. Dies ist das DialogWindow Steuerelement. Es wird empfohlen, dies für alle Dialogfelder zu verwenden, kann aber auch in Toolfenstern verwendet werden.

Es ähnelt sehr anderen XAML-Fenstertypen.

<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">

Beachten Sie die importierten Namespaces sowohl für das Toolkit als auch für die Plattform und das Attribut toolkit:Themes.UseVsTheme="True".

Das ist auch schon alles. Ihr Dialogfeld wird jetzt mit Visual Studio-Farben und -Formaten gestaltet.

Herunterladen des Quellcodes

Sie finden den Quellcode für diese Erweiterung im Community Toolkit-Testprojekt.

Zugehöriger Inhalt

Erfahren Sie mehr über Visual Studio-Farben aus diesen Ressourcen.