Creare finestre degli strumenti personalizzate

Articolo
01/13/2024

Le finestre degli strumenti personalizzate sono opzioni ideali per l'aggiunta di un'interfaccia utente complessa a Visual Studio.

Una finestra degli strumenti è un concetto di interfaccia utente di base in Visual Studio e il video seguente illustra come aggiungere una finestra personalizzata.

Una finestra degli strumenti è una finestra che può essere spostata e ancorata esattamente come il Esplora soluzioni, Elenco errori e altre finestre degli strumenti note. Una finestra degli strumenti è costituita da una shell esterna fornita da Visual Studio e da un controllo dell'interfaccia utente interno personalizzato, che in genere è un codice XAML <usercontrol>fornito dall'estensione.

Nota

Per creare una nuova estensione con una finestra degli strumenti, creare un nuovo progetto usando il modello VsIX Project w/Tool Window (Community) e ignorare il resto di questa ricetta. Per altre informazioni, vedi Introduzione .

L'aggiunta di una finestra degli strumenti a un'estensione esistente richiede 4 semplici passaggi:

Creare una classe shell esterna della finestra degli strumenti.
Aggiungere un codice XAML <usercontrol> alla finestra degli strumenti.
Registrare la finestra degli strumenti.
Creare un comando per visualizzare la finestra degli strumenti.

Iniziamo con il passaggio 1.

Creare la finestra degli strumenti

Usando la BaseToolWindow<T> classe di base generica, viene chiesto di fornire alcune informazioni di base. È necessario specificare il titolo della finestra degli strumenti, creare e restituire il controllo utente XAML e impostare la classe effettiva ToolWindowPane usata da Visual Studio per creare la shell esterna della finestra.

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

È necessario creare un'istanza del controllo utente personalizzato dal CreateAsync(int, CancellationToken) metodo , che viene quindi passato automaticamente alla shell della finestra degli strumenti quando viene creato da Visual Studio.

Prima di tutto, è necessario creare il controllo utente.

Aggiungere il controllo utente XAML

Può trattarsi di qualsiasi XAML con la relativa classe code-behind, quindi di seguito è riportato un semplice esempio di contenitore di un <usercontrol> singolo pulsante:

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

Ora è disponibile la classe della finestra degli strumenti che restituisce il controllo personalizzato. Il passaggio successivo consiste nel registrare la finestra degli strumenti con Visual Studio.

Registrare la finestra degli strumenti

La registrazione della finestra degli strumenti indica che Visual Studio indica la sua esistenza e come crearne un'istanza. Questa operazione viene eseguita dalla classe del pacchetto usando l'attributo [ProvideToolWindow] .

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

Nota

Si noti che la classe del pacchetto deve ereditare da ToolkitPackage e non da Package o AsyncPackage.

È possibile specificare quale stile deve avere la finestra degli strumenti e dove dovrebbe essere visualizzato per impostazione predefinita. L'esempio seguente mostra che la finestra degli strumenti deve essere posizionata nello stesso contenitore di ancoraggio di Esplora soluzioni in uno stile collegato.

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

Per rendere visibile la finestra degli strumenti per impostazione predefinita, è possibile specificarne la visibilità in contesti di interfaccia utente diversi usando l'attributo [ProvideToolWindowVisibility] .

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

Comando per visualizzare la finestra degli strumenti

Questo è lo stesso di qualsiasi altro comando e si può vedere come aggiungerne uno nella ricetta Menu e comandi.

La classe del gestore comandi che mostra la finestra degli strumenti avrà un aspetto simile al seguente:

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

Il posizionamento dei comandi per le finestre degli strumenti è in genere in Visualizza -> Altre finestre nel menu principale.

È tutto. Ora è stata creata la finestra degli strumenti personalizzata.

Ottenere il codice sorgente

È possibile trovare il codice sorgente per questa ricetta nel repository degli esempi.

Condividi tramite