Freigeben über

VSIX-Farb-Editor

Das Tool für den Visual Studio-Erweiterungsfarb-Editor kann benutzerdefinierte Farben für Visual Studio erstellen und bearbeiten. Das Tool kann auch Designressourcenschlüssel generieren, damit die Farben im Code verwendet werden können. Dieses Tool ist nützlich, um Farben für eine Visual Studio-Erweiterung zu erstellen, die Design unterstützt. Dieses Tool kann .pkgdef- und XML-Dateien öffnen. Visual Studio-Designs (VSTHEME-Dateien) können mit dem Visual Studio-Erweiterungsfarb-Editor verwendet werden, indem die Dateierweiterung in XML geändert wird. Darüber hinaus können VSTHEME-Dateien in eine aktuelle XML-Datei importiert werden.

VSIX Color Editor Hero

Paketdefinitionsdateien

Paketdefinitionsdateien (.pkgdef) sind die Dateien, die Designs definieren. Die Farben selbst werden in XML-Dateien der Designfarbe gespeichert, die in einer PKGDEF-Datei kompiliert werden. Die PKGDEF-Dateien werden an durchsuchbaren Speicherorten von Visual Studio bereitgestellt, zur Laufzeit verarbeitet und zusammengeführt, um Designs zu definieren.

Farbtoken

Ein Farbtoken besteht aus vier Elementen:

  • Kategoriename: Eine logische Gruppierung für einen Satz von Farben. Verwenden Sie einen vorhandenen Kategorienamen, wenn bereits Farben vorhanden sind, die für das gewünschte UI-Element oder eine Gruppe von UI-Elementen spezifisch sind.

  • Tokenname: Ein beschreibender Name für die Farbtoken- und Tokensätze. Sets enthalten Hintergrund- und Vordergrund-Tokennamen sowie alle zustände, und diese sollten so benannt werden, dass es leicht ist, die Paare und die Zustände zu identifizieren, auf die sie angewendet werden.

  • Farbwerte (oder Farbtöne): Erforderlich für jedes farbige Design. Erstellen Sie immer Hintergrund- und Textfarbwerte in Paaren. Farben werden für Hintergrund/Vordergrund gekoppelt, sodass die Textfarbe (Vordergrundfarbe) immer für die Hintergrundfarbe lesbar ist, auf der sie gezeichnet wird. Diese Farben sind verknüpft und werden in der Benutzeroberfläche zusammen verwendet. Wenn der Hintergrund nicht für die Verwendung mit Text vorgesehen ist, definieren Sie keine Vordergrundfarbe.

  • Systemfarbname: Für die Verwendung in Displays mit hohem Kontrast.

So verwenden Sie das Tool

So viel wie möglich und gegebenenfalls sollten vorhandene Visual Studio-Farben wiederverwendet werden, anstatt neue zu erstellen. In Fällen, in denen keine geeigneten Farben definiert sind, sollten jedoch benutzerdefinierte Farben erstellt werden, um eine Erweiterungsdesign kompatibel zu halten.

Erstellen neuer Farbtoken

Führen Sie die folgenden Schritte aus, um benutzerdefinierte Farben mit dem Visual Studio-Erweiterungsfarb-Editor zu erstellen:

  1. Bestimmen Sie die Kategorie- und Tokennamen für die neuen Farbtoken.

  2. Wählen Sie die Farbtons aus, die das UI-Element für jedes Design und die Systemfarbe für hohen Kontrast verwendet.

  3. Verwenden Sie den Farb-Editor, um neue Farbtoken zu erstellen.

  4. Verwenden Sie die Farben in einer Visual Studio-Erweiterung.

  5. Testen Sie die Änderungen in Visual Studio.

    Schritt 1: Bestimmen Sie die Kategorie- und Tokennamen für die neuen Farbtoken.

    Das bevorzugte Benennungsschema für eine VSColor lautet [Kategorie] [UI-Typ] [Status]. Verwenden Sie nicht das Wort "Farbe" in VSColor-Namen, da es redundant ist.

    Kategorienamen stellen logische Gruppierungen bereit und sollten so eng wie möglich definiert werden. Beispielsweise könnte der Name eines einzelnen Toolfensters ein Kategoriename sein, aber der Name einer gesamten Geschäftseinheit oder eines Projektteams ist nicht. Durch das Gruppieren von Einträgen in Kategorien können Sie Verwirrung zwischen Farben mit demselben Namen vermeiden.

    Ein Tokenname muss eindeutig den Elementtyp und die Situationen oder den Zustand angeben, für den die Farbe angewendet wird. Beispielsweise könnte der [UI-Typ] eines aktiven Datentipps den Namen "DataTip" und der [Status] "Aktiv" haben, was zu einem Farbnamen von "DataTipActive" führt. Da Datentipps Text enthalten, müssen sowohl eine Vordergrund- als auch eine Hintergrundfarbe definiert werden. Mithilfe einer Hintergrund-Vordergrund-Kopplung erstellt der Farb-Editor automatisch die Farben "DataTipActive" für den Hintergrund und "DataTipActiveText" für den Vordergrund.

    Wenn der Teil der Benutzeroberfläche nur einen Zustand aufweist, kann der [Status] -Teil des Namens weggelassen werden. Wenn beispielsweise ein Suchfeld einen Rahmen aufweist und keine Zustandsänderung vorliegt, die sich auf die Farbe des Rahmens auswirken würde, kann der Name für das Farbtoken des Rahmens einfach als "SearchBoxBorder" bezeichnet werden.

    Einige allgemeine Statusnamen umfassen:

  • Aktiv

  • Inaktiv

  • MouseOver

  • MouseDown

  • Ausgewählt

  • Fokus

    Beispiele für einige Tokennamen für Teile eines Listenelementsteuerelements:

  • ListItem

  • ListItemBorder

  • ListItemMouseOver

  • ListItemMouseOverBorder

  • ListItemSelected

  • ListItemSelectedBorder

  • ListItemDisabled

  • ListItemDisabledBorder

    Schritt 2: Wählen Sie die Farbtons aus, die das UI-Element für jedes Design und die Systemfarbe für hohen Kontrast verwendet.

    Wenn Sie benutzerdefinierte Farben für die Benutzeroberfläche auswählen, wählen Sie ein ähnliches vorhandenes UI-Element aus, und verwenden Sie dessen Farben als Basis. Die Farben für in-the-box UI-Elemente wurden überprüft und getestet, sodass sie in allen Designs korrekt aussehen und sich ordnungsgemäß verhalten.

    Schritt 3: Verwenden Sie den Farb-Editor, um neue Farbtoken zu erstellen.

    Starten Sie den Farb-Editor, und öffnen Oder erstellen Sie eine neue benutzerdefinierte Designfarben-XML-Datei. Wählen Sie im Menü "Neue Farbe bearbeiten>" aus. Dadurch wird ein Dialogfeld zum Angeben der Kategorie und eines oder mehrerer Namen für Farbeinträge in dieser Kategorie geöffnet:

    VSIX Color Editor New Color

    Wählen Sie eine vorhandene Kategorie aus, oder wählen Sie "Neue Kategorie " aus, um eine neue Kategorie zu erstellen. Ein weiteres Dialogfeld wird geöffnet, wodurch ein neuer Kategoriename erstellt wird:

    VSIX Color Editor New Category

    Die neue Kategorie wird dann im Dropdownmenü "Neue Farbe " verfügbar sein. Geben Sie nach der Auswahl einer Kategorie einen Namen pro Zeile für jedes neue Farbtoken ein, und wählen Sie "Erstellen" aus, wenn Sie fertig sind:

    VSIX Color Editor New Color Filled

    Die Farbwerte werden in Hintergrund-/Vordergrundpaaren angezeigt, wobei "None" angibt, dass die Farbe nicht definiert wurde. Hinweis: Wenn eine Farbe nicht über ein Textfarbe/Hintergrundfarbpaar verfügt, muss nur der Hintergrund definiert werden.

    VSIX Color Editor Color Values

    Um ein Farbtoken zu bearbeiten, wählen Sie einen Farbeintrag für das Design (Spalte) dieses Tokens aus. Fügen Sie den Farbwert hinzu, indem Sie entweder einen Hexadezimalfarbwert im 8-stelligen ARGB-Format eingeben, einen Systemfarbnamen in die Zelle eingeben oder das Dropdownmenü verwenden, um die gewünschte Farbe über einen Satz von Farbschiebereglern oder eine Liste von Systemfarben auszuwählen.

    VSIX Color Editor Edit Color

    VSIX Color Editor Background

    Geben Sie für Komponenten, die keinen Text anzeigen müssen, nur einen Farbwert ein: die Hintergrundfarbe. Geben Sie andernfalls Werte für Hintergrund- und Textfarbe ein, getrennt durch einen Schrägstrich.

    Geben Sie beim Eingeben von Werten für hohen Kontrast gültige Windows-Systemfarbnamen ein. Geben Sie keine hartcodierten ARGB-Werte ein. Sie können eine Liste der gültigen Systemfarbnamen anzeigen, indem Sie "Background: System" oder "Foreground: System" aus den Dropdownmenüs für Farbwerte auswählen. Verwenden Sie beim Erstellen von Elementen mit Textkomponenten das richtige Hintergrund-/Textsystemfarbpaar, oder der Text ist möglicherweise nicht lesbar.

    Wenn Sie mit dem Erstellen, Festlegen und Bearbeiten der Farbtoken fertig sind, speichern Sie sie im gewünschten XML- oder PKGDEF-Format. Farbtoken mit weder einem Hintergrund noch einem Vordergrundsatz werden als leere Farben im XML-Format gespeichert, werden jedoch im .pkgdef-Format dis Karte ed. Ein Dialogfeld warnt Sie vor potenziellem Farbverlust, wenn Sie versuchen, leere Farben in einer PKGDEF-Datei zu speichern.

    Schritt 4: Verwenden Sie die Farben in einer Visual Studio-Erweiterung.

    Schließen Sie nach dem Definieren der neuen Farbtoken die .pkgdef in die Projektdatei ein, wobei "Buildaktion" auf "Inhalt" und "In VSIX einschließen" auf "True" festgelegt ist.

    VSIX Color Editor pkgdef

    Wählen Sie im Farb-Editor für die Visual Studio-Erweiterung den Ressourcencode für die Dateiansicht > aus, um Code anzuzeigen, der für den Zugriff auf die benutzerdefinierten Farben in der WPF-basierten Benutzeroberfläche verwendet wird.

    VSIX Color Editor Resource Code Viewer

    Fügen Sie diesen Code in eine statische Klasse in das Projekt ein. Ein Verweis auf Microsoft.VisualStudio.Shell.<VSVersion.0.dll> muss dem Projekt hinzugefügt werden, um den ThemeResourceKey-Typ zu verwenden.

namespace MyCustomColors
{
    public static class MyCategory
    {
        #region Autogenerated resource keys
        // These resource keys are generated by Visual Studio Extension Color Editor, and should be replaced when new colors are added to this category.
        public static readonly Guid Category = new Guid("faf7f3f9-9fe5-4dd3-9350-59679617dfbe");

        private static ThemeResourceKey _MyColor1ColorKey;
        private static ThemeResourceKey _MyColor1BrushKey;
        private static ThemeResourceKey _MyColor1TextColorKey;
        private static ThemeResourceKey _MyColor1TextBrushKey;
        public static ThemeResourceKey MyColor1ColorKey { get { return _MyColor1ColorKey ?? (_MyColor1ColorKey = new ThemeResourceKey(Category, "MyColor1", ThemeResourceKeyType.BackgroundColor)); } }
        public static ThemeResourceKey MyColor1BrushKey { get { return _MyColor1BrushKey ?? (_MyColor1BrushKey = new ThemeResourceKey(Category, "MyColor1", ThemeResourceKeyType.BackgroundBrush)); } }
        public static ThemeResourceKey MyColor1TextColorKey { get { return _MyColor1TextColorKey ?? (_MyColor1TextColorKey = new ThemeResourceKey(Category, "MyColor1", ThemeResourceKeyType.ForegroundColor)); } }
        public static ThemeResourceKey MyColor1TextBrushKey { get { return _MyColor1TextBrushKey ?? (_MyColor1TextBrushKey = new ThemeResourceKey(Category, "MyColor1", ThemeResourceKeyType.ForegroundBrush)); } }
        #endregion
    }
}

Dies ermöglicht den Zugriff auf die Farben im XAML-Code und ermöglicht der Benutzeroberfläche, auf Designänderungen zu reagieren.

<UserControl x:Class="NewTestProject.TestPackageControl" Name="MyToolWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:ns="clr-namespace:MyCustomColors">
  <Grid>
    <TextBlock Background="{DynamicResource {x:Static ns:MyCategory.MyColor1BrushKey}}"
               Foreground="{DynamicResource {x:Static ns:MyCategory.MyColor1TextBrushKey}}"
      >Sample Text</TextBlock>

  </Grid>
</UserControl>

Schritt 5: Testen Sie die Änderungen in Visual Studio.

Der Farb-Editor kann farbtoken vorübergehend auf die ausgeführten Instanzen von Visual Studio anwenden, um Liveänderungen an Farben anzuzeigen, ohne das Erweiterungspaket neu zu erstellen. Klicken Sie hierzu auf die Schaltfläche "Dieses Design auf visual Studio-Fenster anwenden", die sich in der Kopfzeile jeder Designspalte befindet. Dieses temporäre Design wird beendet, wenn der VSIX-Farb-Editor geschlossen wird.

VSIX Color Editor Apply

Um die Änderungen dauerhaft vorzunehmen, erstellen Sie die Visual Studio-Erweiterung neu, und stellen Sie sie erneut bereit, nachdem Sie die neuen Farben zur Pkgdef-Datei hinzugefügt und den Code geschrieben haben, der diese Farben verwendet. Durch die Neuerstellung der Visual Studio-Erweiterung werden die Registrierungswerte für die neuen Farben in den restlichen Designs zusammengeführt. Starten Sie dann Visual Studio neu, zeigen Sie die Benutzeroberfläche an, und stellen Sie sicher, dass die neuen Farben wie erwartet angezeigt werden.

Hinweise

Dieses Tool soll zum Erstellen benutzerdefinierter Farben für die bereits vorhandenen Visual Studio-Designs oder zum Bearbeiten der Farben eines benutzerdefinierten Visual Studio-Designs verwendet werden. Laden Sie die Visual Studio-Farbdesign-Editor-Erweiterung aus dem Visual Studio-Erweiterungskatalog herunter, um vollständige benutzerdefinierte Visual Studio-Designs zu erstellen.

Beispielausgabe

XML-Farbausgabe

Die vom Tool generierte XML-Datei ähnelt folgendem:

<Themes>
  <Theme Name="Light" GUID="{de3dbbcd-f642-433c-8353-8f1df4370aba}">
    <Category Name="CategoryName" GUID="{eee9d521-dac2-48d9-9a5e-5c625ba2040c}">
      <Color Name="ColorName1">
        <Background Type="CT_RAW" Source="FFFFFFFF" />
      </Color>
      <Color Name="ColorName2">
        <Background Type="CT_RAW" Source="FFFFFFFF" />
        <Foreground Type="CT_RAW" Source="FF000000" />
      </Color>
      <Color Name="ColorName3">
        <Background Type="CT_RAW" Source="FFFF0000" />
      </Color>
      <Color Name="ColorName4">
        <Background Type="CT_RAW" Source="FF000088" />
        <Foreground Type="CT_RAW" Source="FFFFFFFF" />
      </Color>
    </Category>
  </Theme>
  <Theme Name="Dark" GUID="{1ded0138-47ce-435e-84ef-9ec1f439b749}">...</Theme>
  <Theme Name="Blue" GUID="{a4d6a176-b948-4b29-8c66-53c97a1ed7d0}">...</Theme>
  <Theme Name="HighContrast" GUID="{a5c004b4-2d4b-494e-bf01-45fc492522c7}">...</Theme>
</Themes>

PKGDEF-Farbausgabe

Die vom Tool generierte Pkgdef-Datei ähnelt folgendem:

[$RootKey$\Themes\{de3dbbcd-f642-433c-8353-8f1df4370aba}\CategoryName]
"Data"=hex:78,00,00,00,0b,00,00,00,01,00,00,00,21,d5,e9,ee,c2,da,d9,48,9a,5e,5c,62,5b,a2,04,0c,04,00,00,00,0a,00,00,00,43,6f,6c,6f,72,4e,61,6d,65,31,01,ff,ff,ff,ff,00,0a,00,00,00,43,6f,6c,6f,72,4e,61,6d,65,32,01,ff,ff,ff,ff,01,00,00,00,ff,0a,00,00,00,43,6f,6c,6f,72,4e,61,6d,65,33,01,ff,00,00,ff,00,0a,00,00,00,43,6f,6c,6f,72,4e,61,6d,65,34,01,00,00,88,ff,01,ff,ff,ff,ff
[$RootKey$\Themes\{1ded0138-47ce-435e-84ef-9ec1f439b749}\CategoryName]
"Data"=hex:...
[$RootKey$\Themes\{a4d6a176-b948-4b29-8c66-53c97a1ed7d0}\CategoryName]
"Data"=hex:...
[$RootKey$\Themes\{a5c004b4-2d4b-494e-bf01-45fc492522c7}\CategoryName]
"Data"=hex:...

C#-Ressourcenschlüsselwrapper

Die vom Tool generierten Farbressourcenschlüssel ähneln folgendem:

namespace MyNamespace
{
    public static class MyColors
    {
        #region Autogenerated resource keys
        // These resource keys are generated by Visual Studio Extension Color Editor, and should be replaced when new colors are added to this category.

        public static string ColorName1ColorKey { get { return "ColorName1ColorKey"; } }
        public static string ColorName1BrushKey { get { return "ColorName1BrushKey"; } }

        public static string ColorName2ColorKey { get { return "ColorName2ColorKey"; } }
        public static string ColorName2BrushKey { get { return "ColorName2BrushKey"; } }
        public static string ColorName2TextColorKey { get { return "ColorName2TextColorKey"; } }
        public static string ColorName2TextBrushKey { get { return "ColorName2TextBrushKey"; } }

        public static string ColorName3ColorKey { get { return "ColorName4ColorKey"; } }
        public static string ColorName3BrushKey { get { return "ColorName4BrushKey"; } }
        public static string ColorName3TextColorKey { get { return "ColorName4TextColorKey"; } }
        public static string ColorName3TextBrushKey { get { return "ColorName4TextBrushKey"; } }
        #endregion
    }
}

WPF-Ressourcenwörterbuchwrapper

Die vom Tool generierten Farbschlüssel "ResourceDictionary " ähneln folgendem:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:colors="clr-namespace:MyNamespace">

  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName1BrushKey}" Color="#FFFFFFFF" />
  <Color x:Key="{x:Static colors:MyColors.ColorName1ColorKey}" A="255" R="255" G="255" B="255" />

  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName2BrushKey}" Color="#FFFFFFFF" />
  <Color x:Key="{x:Static colors:MyColors.ColorName2ColorKey}" A="255" R="255" G="255" B="255" />
  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName2TextBrushKey}" Color="#FF000000" />
  <Color x:Key="{x:Static colors:MyColors.ColorName2TextColorKey}" A="255" R="0" G="0" B="0" />

  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName3BrushKey}" Color="#FFFF0000" />
  <Color x:Key="{x:Static colors:MyColors.ColorName3ColorKey}" A="255" R="255" G="0" B="0" />

  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName4BrushKey}" Color="#FF000088" />
  <Color x:Key="{x:Static colors:MyColors.ColorName4ColorKey}" A="255" R="0" G="0" B="136" />
  <SolidColorBrush x:Key="{x:Static colors:MyColors.ColorName4TextBrushKey}" Color="#FFFFFFFF" />
  <Color x:Key="{x:Static colors:MyColors.ColorName4TextColorKey}" A="255" R="255" G="255" B="255" />
</ResourceDictionary>