カスタム ツール ウィンドウをビルドする

カスタム ツール ウィンドウは、複雑な UI を Visual Studio に追加するための優れたオプションです。

ツール ウィンドウは、Visual Studio の主要な UI 概念です。次のビデオでは、カスタム ウィンドウを追加する方法について説明します。

ツール ウィンドウは、ソリューション エクスプローラー、エラー一覧、およびその他の既知のツール ウィンドウと同様に、移動したりドッキングしたりできるウィンドウです。 ツール ウィンドウは、Visual Studio によって提供される外部シェルと、拡張機能によって提供されるカスタムの内部 UI コントロール (通常は XAML <usercontrol>) で構成されます。

既存の拡張機能にツール ウィンドウを追加するには、次の 4 つの簡単な手順が必要です。

1. ツール ウィンドウの外部シェル クラスを作成します。
2. ツール ウィンドウに XAML <usercontrol> を追加します。
3. ツール ウィンドウを登録します。
4. ツール ウィンドウを表示するコマンドを作成します。

手順 1 から始めましょう。

ツール ウィンドウを作成する

BaseToolWindow<T> 汎用基底クラスを使用して、いくつかの基本的な情報を提供するように求められます。 ツール ウィンドウのタイトルを指定し、XAML ユーザー コントロールを作成して返し、Visual Studio によって使用される実際の ToolWindowPane クラスを設定して、ウィンドウの外部シェルを作成する必要があります。

using System;
using System.Runtime.InteropServices;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using Community.VisualStudio.Toolkit;
using EnvDTE80;
using Microsoft.VisualStudio.Imaging;
using Microsoft.VisualStudio.Shell;

public class MyToolWindow : BaseToolWindow<MyToolWindow>
{
    public override string GetTitle(int toolWindowId) => "My Tool Window";

    public override Type PaneType => typeof(Pane);

    public override async Task<FrameworkElement> CreateAsync(int toolWindowId, CancellationToken cancellationToken)
    {
        await Task.Delay(2000); // Long running async task
        return new MyUserControl();
    }

    // Give this a new unique guid
    [Guid("d3b3ebd9-87d1-41cd-bf84-268d88953417")] 
    internal class Pane : ToolWindowPane
    {
        public Pane()
        {
            // Set an image icon for the tool window
            BitmapImageMoniker = KnownMonikers.StatusInformation;
        }
    }
}

CreateAsync(int, CancellationToken) メソッドからカスタム ユーザー コントロールのインスタンスを作成する必要があります。これは、Visual Studio で作成されているときにツール ウィンドウ シェルに自動的に渡されます。

ただし、まず、ユーザー コントロールを作成する必要があります。

XAML ユーザー コントロールを追加する

分離コード クラスを含む任意の XAML を使用できます。1 つのボタンを含む <usercontrol> の簡単な例を次に示します。

<UserControl x:Class="MyUserControl"
             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"
             mc:Ignorable="d"
             toolkit:Themes.UseVsTheme="True"
             d:DesignHeight="300" d:DesignWidth="300"
             Name="MyToolWindow">
    <Grid>
        <StackPanel Orientation="Vertical">
            <Label Margin="10" HorizontalAlignment="Center">My Window</Label>
            <Button Content="Click me!" Click="button1_Click" Width="120" Height="80" Name="button1"/>
        </StackPanel>
    </Grid>
</UserControl>

これで、カスタム コントロールを返すツール ウィンドウ クラスが作成されました。 次の手順では、ツール ウィンドウを Visual Studio に登録します。

ツール ウィンドウを登録する

ツール ウィンドウを登録するということは、その存在とインスタンス化方法を Visual Studio に示すことを意味します。 これは、[ProvideToolWindow] 属性を使用してパッケージ クラスから行います。

[ProvideToolWindow(typeof(MyToolWindow.Pane))]
public sealed class MyPackage : ToolkitPackage
{
     protected override async Task InitializeAsync(CancellationToken cancellationToken, IProgress<ServiceProgressData> progress)
     {
         this.RegisterToolWindows();
     }
}

ツール ウィンドウのスタイルと、既定で表示する場所を指定できます。 次の例は、リンクされたスタイルで、ソリューション エクスプローラーと同じドッキング コンテナーにツール ウィンドウを配置することを示しています。

[ProvideToolWindow(typeof(MyToolWindow.Pane), Style = VsDockStyle.Linked, Window = WindowGuids.SolutionExplorer)]

ツール ウィンドウを既定で表示するには、[ProvideToolWindowVisibility] 属性を使用してさまざまな UI コンテキストでその可視性を指定できます。

[ProvideToolWindowVisibility(typeof(MyToolWindow.Pane), VSConstants.UICONTEXT.NoSolution_string)]

ツール ウィンドウを表示するコマンドを作成する

これは他のコマンドと同じで、Menus > Commands レシピで追加する方法を確認できます。

ツール ウィンドウを表示するコマンド ハンドラー クラスは、次のようになります。

using Community.VisualStudio.Toolkit;
using Microsoft.VisualStudio.Shell;
using Task = System.Threading.Tasks.Task;

[Command(PackageIds.RunnerWindow)]
internal sealed class MyToolWindowCommand : BaseCommand<MyToolWindowCommand>
{
    protected override async Task ExecuteAsync(OleMenuCmdEventArgs e) =>
        await MyToolWindow.ShowAsync();
}

ツール ウィンドウのコマンドの配置は、通常、メイン メニューの [表示] -> [その他のウィンドウ] の下になります。

これで終了です。 これで、カスタム ツール ウィンドウが作成されました。

ソース コードを入手する

このレシピのソース コードは、サンプル リポジトリにあります。