組建自訂工具視窗

發行項
03/01/2024

自訂工具視窗是將複雜 UI 新增至 Visual Studio 的絕佳選項。

工具視窗是 Visual Studio 中的核心 UI 概念，下列影片將示範如何新增自訂視窗。

工具視窗是一個可以移動並停駐的視窗，就像 [方案總管]、[錯誤清單] 和其他已知的工具視窗一樣。工具視窗是由 Visual Studio 所提供的外部殼層和自訂內部 UI 控制項所組成，通常是擴充工具所提供的 XAML <usercontrol>。

注意

若要使用工具視窗建立新的擴充功能，請使用 VSIX Project w/Tool Window (Community) 範本建立新專案，並略過此配方的其餘部分。如需詳細資訊，請參閱使用者入門。

將工具視窗新增至現有的擴充功能需要 4 個簡單的步驟：

建立工具視窗外部殼層類別。
將 XAML <usercontrol>新增至工具視窗。
註冊工具視窗。
建立命令以顯示工具視窗。

讓我們從步驟 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，因此以下是包含單一按鈕的 <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();
     }
}

注意

請注意，封裝類別必須繼承自 ToolkitPackage ，而不是繼承自 Package 或 AsyncPackage。

您可以指定工具視窗應該具有的樣式，以及預設應該顯示的位置。下列範例顯示工具視窗應該放在與連結樣式中 [方案總管] 相同的停駐容器中。

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

若要讓工具視窗預設可見，可以使用 [ProvideToolWindowVisibility] 屬性，在不同的 UI 內容中指定其可見度。

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

顯示工具視窗的命令

這與任何其他命令相同，而且您可以查看如何在功能表和命令配方中新增命令。

顯示工具視窗的指令處理常式類別，看起來像這樣：

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();
}

工具視窗的命令放置通常位於主功能表中的檢視 -> 其他視窗底下。

這樣就大功告成了。恭喜，您現在已建立自訂工具視窗。

取得原始程式碼

您可以在範例存放庫中找到本配方的原始程式碼。

共用方式為