次の方法で共有

Visual Studio 拡張機能で Visual Studio のテーマと一致させる

WPF を使ってカスタム UI を作成するときは常に、それが Visual Studio のテーマと一致していることを確認する必要があります。 そうすることで、UI はネイティブに見え、Visual Studio の自然な部分のように感じられます。 そうしないと、ツール ウィンドウとダイアログはライト テーマでは次のように表示される可能性があります。

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.

今度のテキストと背景色では、ほとんど読むことができなくなりました。 よくありません。

簡単な方法で UI の背景色やボタンのスタイルなどを Visual Studio のものと一致させることができます。 こうすることで、同じ UI をライト テーマで次のように表示できます。

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

または、ダーク テーマでは次のようになります。

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

はるかに良く見えます。 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 の配色とスタイルを使用するテーマ設定になりました。

ソース コードを入手する

この拡張機能のソース コードは、Community Toolkit テスト プロジェクトにあります。

関連するコンテンツ

これらのリソースで、Visual Studio の色についてさらに理解してください。