WPF를 사용하여 사용자 지정 UI를 빌드할 때마다 Visual Studio의 테마와 일치하는지 확인해야 합니다. 이렇게 하면 UI가 기본으로 표시되고 Visual Studio의 자연스러운 부분처럼 느껴집니다. 그렇지 않은 경우 도구 창과 대화 상자가 밝은 테마에서 다음과 같이 표시될 수 있습니다.
텍스트 상자와 단추 주위의 안쪽 여백이 제대로 보이지 않는지 알아봅니다. 어두운 테마에서 더 악화됩니다.
이제 텍스트와 배경색을 사용하면 읽기가 거의 불가능합니다. 좋지 않습니다.
UI의 배경색, 단추 스타일 지정 등이 Visual Studio의 항목과 간단한 트릭으로 일치하는지 확인하는 쉬운 방법이 있습니다. 이렇게 하면 밝은 테마에서 동일한 UI가 다음과 같이 표시할 수 있습니다.
또는 어두운 테마에서:
훨씬 나아 보입니다. UI를 테마로 하는 방법을 살펴보겠습니다.
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" 특성을 확인합니다. Visual Studio에서 자체적으로 사용하는 WPF 컨트롤에 대한 공식 스타일을 자동으로 적용합니다. 스타일이 전체 <UserControl>에 적용되도록 하기 위해 다른 작업을 수행할 필요가 없습니다. 아주 쉽습니다!
또한 사용자가 색 테마(예: 밝게에서 어둡게)를 변경하면 UI가 다시 로드할 필요 없이 즉시 전환된다는 이점이 있습니다.
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 색에 대해 자세히 알아봅니다.