Поделиться через

Сопоставление тем Visual Studio в расширениях Visual Studio

При создании пользовательского пользовательского интерфейса с помощью WPF необходимо убедиться, что он соответствует темям Visual Studio. Таким образом пользовательский интерфейс будет выглядеть в собственном коде и чувствовать себя более естественной частью Visual Studio. Если нет, окна инструментов и диалоговые окна могут в конечном итоге выглядеть следующим образом в теме Light:

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

Обратите внимание, как заполнение вокруг текстовых полей и кнопок не выглядит правильно? Это становится еще хуже в темной теме:

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

Теперь текст и цвет фона делают почти невозможным для чтения. Нехорошо.

Существует простой способ убедиться, что фоновые цвета пользовательского интерфейса, стилизация кнопок и т. д. совпадают с простым трюком Visual Studio. Таким образом, тот же пользовательский интерфейс может выглядеть следующим образом в теме Light:

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

Или в темной теме:

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

Это выглядит гораздо лучше. Давайте рассмотрим, как мы можем тему нашего пользовательского интерфейса.

WPF UserControl

Ниже приведен пример WPF <UserControl> , который можно использовать непосредственно в окне инструмента.

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

Обратите внимание на импортированное xmlns:toolkit пространство имен и toolkit:Themes.UseVsTheme="True" атрибут. Они автоматически применяют официальный стили для элементов управления WPF, которые visual Studio использует сам. Мы не должны делать ничего другого, чтобы получить стили, примененные ко всему <UserControl>. Легко!

Добавлено преимущество заключается в том, что если пользователь изменяет цветовую тему, например свет на темный, то наш пользовательский интерфейс будет переключаться сразу же без необходимости перезагрузить.

Элемент управления DialogWindow

Visual Studio поставляется с элементом управления, который можно использовать для пользовательских окон, которые являются элементом DialogWindow управления. Рекомендуется использовать его для любых диалоговых окон, но его также можно использовать в окнах инструментов.

Это очень похоже на другие типы окон 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">

Обратите внимание, что импортированные пространства имен для набора средств и платформы и атрибута toolkit:Themes.UseVsTheme="True".

Больше ничего не требуется. Диалоговое окно теперь использует цвета и стили Visual Studio.

Получение исходного кода

Исходный код этого расширения можно найти в тестовом проекте сообщества набор средств.

Связанный контент

Дополнительные сведения о цветах Visual Studio из этих ресурсов.