Udostępnij za pośrednictwem

Edytor kolorów VSIX

Narzędzie Edytor kolorów rozszerzenia programu Visual Studio może tworzyć i edytować kolory niestandardowe dla programu Visual Studio. Narzędzie może również generować klucze zasobów motywu, aby kolory mogły być używane w kodzie. To narzędzie jest przydatne do tworzenia kolorów dla rozszerzenia programu Visual Studio, które obsługuje motywy. To narzędzie może otwierać pliki pkgdef i xml. Motywy programu Visual Studio (pliki vstheme) mogą być używane z edytorem kolorów rozszerzeń programu Visual Studio, zmieniając rozszerzenie pliku na .xml. Ponadto pliki vstheme można zaimportować do bieżącego pliku XML.

VSIX Color Editor Hero

Pliki definicji pakietu

Pliki definicji pakietu (pkgdef) to pliki definiujące motywy. Same kolory są przechowywane w plikach xml koloru motywu, które są kompilowane w pliku pkgdef. Pliki pkgdef są wdrażane w lokalizacjach z możliwością wyszukiwania programu Visual Studio, przetwarzane w czasie wykonywania i scalane w celu zdefiniowania motywów.

Tokeny kolorów

Token koloru składa się z czterech elementów:

  • Nazwa kategorii: logiczne grupowanie dla zestawu kolorów. Użyj istniejącej nazwy kategorii, jeśli istnieją już kolory specyficzne dla żądanego elementu interfejsu użytkownika lub grupy elementów interfejsu użytkownika.

  • Nazwa tokenu: opisowa nazwa tokenu koloru i zestawów tokenów. Zestawy zawierają nazwy tokenów tła i pierwszego planu (tekstu), a także wszystkie ich stany. Powinny one być nazwane tak, aby można było łatwo zidentyfikować pary i stany, do których mają zastosowanie.

  • Wartości kolorów (lub odcienie): wymagane dla każdego motywu kolorowego. Zawsze twórz wartości kolorów tła i tekstu w parach. Kolory są sparowane dla tła/pierwszego planu, aby kolor tekstu (pierwszego planu) był zawsze czytelny dla koloru tła, na którym jest rysowany. Te kolory są połączone i będą używane razem w interfejsie użytkownika. Jeśli tło nie jest przeznaczone do użytku z tekstem, nie należy definiować koloru pierwszego planu.

  • Nazwa koloru systemu: do użycia w wyświetlaczach o wysokim kontraście.

Jak korzystać z narzędzia

Jak najwięcej, a jeśli to możliwe, istniejące kolory programu Visual Studio powinny być ponownie używane zamiast wprowadzać nowe. Jednak w przypadkach, gdy nie zdefiniowano odpowiednich kolorów, należy utworzyć kolory niestandardowe, aby zachować zgodność z rozszerzeniami.

Tworzenie nowych tokenów kolorów

Aby utworzyć kolory niestandardowe przy użyciu Edytora kolorów rozszerzenia programu Visual Studio, wykonaj następujące kroki:

  1. Określ kategorię i nazwy tokenów dla nowych tokenów kolorów.

  2. Wybierz odcienie używane przez element interfejsu użytkownika dla każdego motywu oraz kolor systemu dla dużego kontrastu.

  3. Użyj edytora kolorów, aby utworzyć nowe tokeny kolorów.

  4. Użyj kolorów w rozszerzeniu programu Visual Studio.

  5. Przetestuj zmiany w programie Visual Studio.

    Krok 1. Określanie kategorii i nazw tokenów dla nowych tokenów kolorów.

    Preferowany schemat nazewnictwa dla elementu VSColor to [Kategoria] [Typ interfejsu użytkownika] [State]. Nie używaj słowa "color" w nazwach VSColor, ponieważ jest on nadmiarowy.

    Nazwy kategorii zapewniają grupowania logiczne i powinny być zdefiniowane tak wąsko, jak to możliwe. Na przykład nazwa pojedynczego okna narzędzia może być nazwą kategorii, ale nazwa całej jednostki biznesowej lub zespołu projektu nie jest. Grupowanie wpisów w kategorie pomaga zapobiec nieporozumieniu między kolorami o tej samej nazwie.

    Nazwa tokenu musi wyraźnie wskazywać typ elementu i sytuacje lub "stan", dla którego zostanie zastosowany kolor. Na przykład aktywna porada danych [typ interfejsu użytkownika] może mieć nazwę "DataTip", a element [State] może mieć nazwę "Active", co powoduje nazwę koloru "DataTipActive". Ponieważ porady dotyczące danych mają tekst, należy zdefiniować zarówno pierwszy plan, jak i kolor tła. Korzystając z parowania tła/pierwszego planu, edytor kolorów automatycznie utworzy kolory "DataTipActive" dla tła i "DataTipActiveText" dla pierwszego planu.

    Jeśli fragment interfejsu użytkownika ma tylko jeden stan, część nazwy [State] może zostać pominięta. Jeśli na przykład pole wyszukiwania ma obramowanie i nie ma zmiany stanu, która wpłynie na kolor obramowania, nazwa tokenu koloru obramowania może być po prostu nazywana "SearchBoxBorder".

    Oto niektóre typowe nazwy stanów:

  • Aktywne

  • Nieaktywny

  • Mouseover

  • Mousedown

  • Wybrano

  • Ustawiono fokus

    Przykłady kilku nazw tokenów dla części kontrolki elementu listy:

  • Listitem

  • ListItemBorder

  • ListItemMouseOver

  • ListItemMouseOverBorder

  • ListItemSelected

  • ListItemSelectedBorder

  • ListItemDisabled

  • ListItemDisabledBorder

    Krok 2. Wybierz odcienie używane przez element interfejsu użytkownika dla każdego motywu i koloru systemu dla dużego kontrastu.

    Podczas wybierania kolorów niestandardowych dla interfejsu użytkownika wybierz podobny istniejący element interfejsu użytkownika i użyj jego kolorów jako podstawy. Kolory wbudowanych elementów interfejsu użytkownika zostały poddane przeglądowi i testowaniu, więc będą wyglądać odpowiednio i zachowywać się poprawnie we wszystkich motywach.

    Krok 3. Użyj edytora kolorów, aby utworzyć nowe tokeny kolorów.

    Uruchom edytor kolorów i otwórz lub utwórz nowy plik XML kolorów motywu niestandardowego. Wybierz pozycję Edytuj > nowy kolor z menu. Spowoduje to otwarcie okna dialogowego służącego do określania kategorii i co najmniej jednej nazwy wpisów kolorów w tej kategorii:

    VSIX Color Editor New Color

    Wybierz istniejącą kategorię lub wybierz pozycję Nowa kategoria , aby utworzyć nową kategorię. Zostanie otwarte inne okno dialogowe, które utworzy nową nazwę kategorii:

    VSIX Color Editor New Category

    Nowa kategoria zostanie następnie udostępniona w menu rozwijanym Nowa kategoria Koloru . Po wybraniu kategorii wprowadź jedną nazwę dla każdego nowego tokenu koloru i wybierz pozycję "Utwórz" po zakończeniu:

    VSIX Color Editor New Color Filled

    Wartości kolorów są wyświetlane w parach tła/pierwszego planu z wartością "Brak" wskazującą, że kolor nie został zdefiniowany. Uwaga: jeśli kolor nie ma pary kolorów tekstu/koloru tła, należy zdefiniować tylko tło.

    VSIX Color Editor Color Values

    Aby edytować token koloru, wybierz wpis koloru dla motywu (kolumny) tego tokenu. Dodaj wartość koloru, wpisując wartość koloru szesnastkowego w 8-cyfrowym formacie ARGB, wprowadzając nazwę koloru systemu do komórki lub używając menu rozwijanego, aby wybrać żądany kolor za pomocą zestawu suwaków kolorów lub listy kolorów systemowych.

    VSIX Color Editor Edit Color

    VSIX Color Editor Background

    W przypadku składników, które nie muszą wyświetlać tekstu, wprowadź tylko jedną wartość koloru: kolor tła. W przeciwnym razie wprowadź wartości dla koloru tła i tekstu oddzielone ukośnikiem do przodu.

    Podczas wprowadzania wartości dla dużego kontrastu wprowadź prawidłowe nazwy kolorów systemu Windows. Nie wprowadzaj zakodowanych na stałe wartości ARGB. Listę prawidłowych nazw kolorów systemowych można wyświetlić, wybierając pozycję "Tło: system" lub "Pierwszy plan: system" z menu rozwijanych wartości koloru. Podczas tworzenia elementów, które mają składniki tekstowe, użyj poprawnej pary kolorów tła/tekstu lub tekstu może być nieczytelny.

    Po zakończeniu tworzenia, ustawiania i edytowania tokenów kolorów zapisz je w żądanym formacie xml lub pkgdef. Tokeny kolorów bez tła ani zestawu pierwszego planu zostaną zapisane jako puste kolory w formacie XML, ale odrzucone w formacie pkgdef. W przypadku próby zapisania pustych kolorów w pliku pkgdef zostanie wyświetlone okno dialogowe z ostrzeżeniem o potencjalnej utracie kolorów.

    Krok 4. Używanie kolorów w rozszerzeniu programu Visual Studio.

    Po zdefiniowaniu nowych tokenów kolorów dołącz plik pkgdef do pliku projektu z ustawieniem "Akcja kompilacji" na wartość "Zawartość" i "Uwzględnij w VSIX" na wartość "True".

    VSIX Color Editor pkgdef

    W Edytorze kolorów rozszerzenia programu Visual Studio wybierz pozycję Plik > Wyświetl kod zasobu, aby wyświetlić kod używany do uzyskiwania dostępu do kolorów niestandardowych w interfejsie użytkownika opartym na WPF.

    VSIX Color Editor Resource Code Viewer

    Uwzględnij ten kod w klasie statycznej w projekcie. Odwołanie do microsoft.VisualStudio.Shell.<Aby można było użyć typu ThemeResourceKey, należy dodać plik VSVersion.0.dll> do projektu.

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

Umożliwia to dostęp do kolorów w kodzie XAML i umożliwia interfejsowi użytkownika reagowanie na zmiany motywu.

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

Krok 5. Testowanie zmian w programie Visual Studio.

Edytor kolorów może tymczasowo stosować tokeny kolorów do uruchomionych wystąpień programu Visual Studio, aby wyświetlić zmiany na żywo w kolorach bez ponownego kompilowania pakietu rozszerzenia. W tym celu kliknij przycisk "Zastosuj ten motyw do uruchamiania okien programu Visual Studio" znajdujący się w nagłówku każdej kolumny motywu. Ten motyw tymczasowy zniknie po zamknięciu edytora kolorów VSIX.

VSIX Color Editor Apply

Aby wprowadzić zmiany trwałe, ponownie skompiluj i ponownie wdróż rozszerzenie programu Visual Studio po dodaniu nowych kolorów do pliku pkgdef i napisz kod, który będzie używać tych kolorów. Ponowne skompilowanie rozszerzenia programu Visual Studio spowoduje scalenie wartości rejestru dla nowych kolorów w pozostałej części motywów. Następnie uruchom ponownie program Visual Studio, wyświetl interfejs użytkownika i sprawdź, czy nowe kolory są wyświetlane zgodnie z oczekiwaniami.

Uwagi

To narzędzie jest przeznaczone do tworzenia kolorów niestandardowych dla istniejących motywów programu Visual Studio lub edytowania kolorów niestandardowego motywu programu Visual Studio. Aby utworzyć kompletne niestandardowe motywy programu Visual Studio, pobierz rozszerzenie Edytor motywu kolorów programu Visual Studio z galerii rozszerzeń programu Visual Studio.

Przykładowe dane wyjściowe

Dane wyjściowe koloru XML

Plik XML wygenerowany przez narzędzie będzie podobny do następującego:

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

Dane wyjściowe koloru PKGDEF

Plik pkgdef wygenerowany przez narzędzie będzie podobny do następującego:

[$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:...

Otoka kluczy zasobów języka C#

Klucze zasobów kolorów wygenerowane przez narzędzie będą podobne do następujących:

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

Otoka słownika zasobów WPF

Kolor kluczy ResourceDictionary wygenerowanych przez narzędzie będzie podobny do następującego:

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