Udostępnij przez


Tworzenie niestandardowych okien narzędziowych

Niestandardowe okna narzędzi to doskonałe opcje dodawania złożonego interfejsu użytkownika do programu Visual Studio.

Okno narzędzi to podstawowa koncepcja interfejsu użytkownika w programie Visual Studio, a poniższe wideo pokaże, jak dodać okno niestandardowe.

Okno narzędzi to okno, które można przenosić i zadokować tak samo jak Eksplorator rozwiązań, Lista błędów i inne dobrze znane okna narzędzi. Okno narzędzia składa się z zewnętrznej powłoki dostarczonej przez program Visual Studio i niestandardowej wewnętrznej kontrolki interfejsu użytkownika, która jest zwykle XAML <usercontrol>, dostarczana przez rozszerzenie.

Uwaga / Notatka

Aby utworzyć nowe rozszerzenie za pomocą okna narzędzi, utwórz nowy projekt przy użyciu szablonu VsIX Project w/Tool Window (Community) i pomiń pozostałą część tego przepisu. Aby uzyskać więcej informacji, zobacz wprowadzenie .

Dodanie okna narzędzi do istniejącego rozszerzenia wymaga 4 prostych kroków:

  1. Utwórz klasę zewnętrznej powłoki okna narzędzi.
  2. Dodaj kod XAML <usercontrol> do okna narzędzia.
  3. Zarejestruj okno narzędzia.
  4. Utwórz polecenie, aby wyświetlić okno narzędzia.

Zacznijmy od kroku 1.

Tworzenie okna narzędzi

Korzystając z ogólnej klasy bazowej BaseToolWindow<T> , prosimy o podanie kilku podstawowych informacji. Musimy określić tytuł okna narzędzi, utworzyć i zwrócić kontrolkę użytkownika XAML oraz ustawić rzeczywistą ToolWindowPane klasę używaną przez program Visual Studio do utworzenia zewnętrznej powłoki okna.

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

Należy utworzyć wystąpienie niestandardowej kontrolki użytkownika za pomocą metody CreateAsync(int, CancellationToken), która jest następnie automatycznie przekazywana do powłoki okna narzędzi podczas tworzenia przez program Visual Studio.

Najpierw należy jednak utworzyć kontrolkę użytkownika.

Dodawanie kontrolki użytkownika XAML

Może to być dowolny XAML z klasą code-behind, tak więc oto prosty przykład <usercontrol>, który zawiera pojedynczy przycisk:

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

Teraz mamy klasę okna narzędzia, która zwraca naszą własną kontrolkę. Następnym krokiem jest zarejestrowanie okna narzędzi w programie Visual Studio.

Rejestrowanie okna narzędzia

Zarejestrowanie okna narzędzia oznacza, że informujemy Visual Studio o jego istnieniu oraz o tym, jak je tworzyć. Robimy to z klasy pakietu przy użyciu atrybutu [ProvideToolWindow] .

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

Uwaga / Notatka

Należy pamiętać, że klasa pakietu musi dziedziczyć z klasy ToolkitPackage , a nie z Package lub AsyncPackage.

Możesz określić styl, jaki powinien zawierać okno narzędzi i gdzie powinno być domyślnie wyświetlane. W poniższym przykładzie pokazano, że okno narzędzi powinno zostać umieszczone w tym samym kontenerze dokowania, co Eksplorator rozwiązań, w stylu połączonym.

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

Aby okno narzędzia było domyślnie widoczne, można określić jego widoczność w różnych kontekstach interfejsu użytkownika przy użyciu atrybutu [ProvideToolWindowVisibility] .

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

Polecenie, aby wyświetlić okno narzędzia

Jest to takie samo jak każde inne polecenie i można zobaczyć, jak dodać nowe w przepisie Menu i polecenia.

Klasa obsługi poleceń, która pokazuje okno narzędzia, będzie wyglądać mniej więcej tak:

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

Lokalizacja poleceń dla okien narzędzi jest zwykle w obszarze Widok —> Inne Okna w menu głównym.

To wszystko. Gratulacje, stworzyłeś swoje niestandardowe okno narzędziowe.

Pobieranie kodu źródłowego

Kod źródłowy tego przepisu można znaleźć w repozytorium przykładów.