Compartir a través de

Coincidencia de temas de Visual Studio en extensiones de Visual Studio

Siempre que cree cualquier interfaz de usuario personalizada con WPF, debe asegurarse de que coincide con la creación de temas de Visual Studio. De este modo, la interfaz de usuario se verá nativa y se sentirá más como una parte natural de Visual Studio. Si no es así, es posible que las ventanas de herramientas y los diálogos terminen teniendo este aspecto en el tema Claro:

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

Observe cómo el relleno alrededor de los cuadros de texto y los botones no se ve bien? Se pone aún peor en el tema Oscuro:

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

Ahora el texto y los colores de fondo hacen que sea casi imposible leer. Mal.

Hay una manera fácil de asegurarse de que los colores de fondo, el estilo de botón, etc. de la interfaz de usuario coinciden con el de Visual Studio con un pequeño truco. De este modo, la misma interfaz de usuario puede tener este aspecto en el tema Light:

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

O en el tema Oscuro:

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

Eso parece mucho mejor. Veamos cómo podemos temar nuestra interfaz de usuario.

WPF UserControl

Este es un ejemplo de un WPF <UserControl> que se puede usar directamente dentro de una ventana de herramientas.

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

Observe el xmlns:toolkit espacio de nombres importado y el toolkit:Themes.UseVsTheme="True" atributo . Aplicarán automáticamente el estilo oficial para los controles WPF que Visual Studio usa. No tenemos que hacer nada más para aplicar el estilo a todo <UserControl>. Fácil.

Una ventaja adicional es que cuando el usuario cambia el tema de color de, por ejemplo, claro a oscuro, nuestra interfaz de usuario cambiará inmediatamente sin necesidad de volver a cargar.

Control DialogWindow

Visual Studio se incluye con un control que se puede usar para ventanas personalizadas, que es el DialogWindow control . Se recomienda usar para cualquier ventana de diálogo, pero también se puede usar dentro de las ventanas de herramientas.

Es muy similar a otros tipos de ventana 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">

Observe los espacios de nombres importados para el kit de herramientas y la plataforma y el atributo toolkit:Themes.UseVsTheme="True".

Así de simple. La ventana de diálogo ahora tiene temas con colores y estilos de Visual Studio.

Obtención del código fuente

Puede encontrar el código fuente de esta extensión en el proyecto de prueba community Toolkit.

Contenido relacionado

Obtenga más información sobre los colores de Visual Studio de estos recursos.