Créer des fenêtres d’outils personnalisées

Article
10/10/2023

Les fenêtres d’outils personnalisées sont des options idéales pour ajouter une interface utilisateur complexe à Visual Studio.

Une fenêtre d’outil est un concept d’interface utilisateur principal dans Visual Studio, et la vidéo suivante vous montre comment ajouter une fenêtre personnalisée.

Une fenêtre d’outil est une fenêtre qui peut être déplacée et ancrée comme la Explorateur de solutions, la liste d’erreurs et d’autres fenêtres d’outils connues. Une fenêtre d’outil se compose d’un interpréteur de commandes externe fourni par Visual Studio et d’un contrôle d’interface utilisateur interne personnalisé, généralement un code XAML <usercontrol>fourni par l’extension.

Remarque

Pour créer une extension avec une fenêtre d’outil, créez un projet à l’aide du modèle VsIX Project w/Tool Window (Community) et ignorez le reste de cette recette. Consultez la prise en main pour plus d’informations.

L’ajout d’une fenêtre d’outil à une extension existante nécessite 4 étapes simples :

Créez une classe d’interpréteur de commandes externe de fenêtre d’outils.
Ajoutez un code XAML <usercontrol> à la fenêtre outil.
Inscrivez la fenêtre outil.
Créez une commande pour afficher la fenêtre outil.

Commençons par l’étape 1.

Créer la fenêtre outil

À l’aide de la BaseToolWindow<T> classe de base générique, nous sommes invités à fournir quelques informations de base. Nous devons spécifier le titre de la fenêtre outil, créer et retourner le contrôle utilisateur XAML et définir la classe réelle ToolWindowPane utilisée par Visual Studio pour créer l’interpréteur de commandes externe de la fenêtre.

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

Vous devez créer une instance de votre contrôle utilisateur personnalisé à partir de la CreateAsync(int, CancellationToken) méthode, qui est ensuite transmise automatiquement à l’interpréteur de commandes de la fenêtre outil lorsqu’elle est créée par Visual Studio.

Mais tout d’abord, vous devez créer le contrôle utilisateur.

Ajouter le contrôle utilisateur XAML

Il peut s’agir de n’importe quel code XAML avec sa classe code-behind. Voici un exemple simple d’un <usercontrol> bouton contenant un seul bouton :

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

Nous avons maintenant notre classe de fenêtre outil qui retourne notre contrôle personnalisé. L’étape suivante consiste à inscrire notre fenêtre outil auprès de Visual Studio.

Inscrire la fenêtre outil

L’inscription de la fenêtre outil signifie que nous parlons à Visual Studio de son existence et comment l’instancier. Nous le faisons à partir de notre classe de package à l’aide de l’attribut [ProvideToolWindow] .

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

Remarque

Notez que la classe de package doit hériter de l’héritage et non de Package ou ToolkitPackage AsyncPackage.

Vous pouvez spécifier le style que la fenêtre outil doit avoir et où elle doit s’afficher par défaut. L’exemple suivant montre que la fenêtre outil doit être placée dans le même conteneur d’ancrage que Explorateur de solutions dans un style lié.

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

Pour rendre la fenêtre outil visible par défaut, vous pouvez spécifier sa visibilité dans différents contextes d’interface utilisateur à l’aide de l’attribut [ProvideToolWindowVisibility] .

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

Commande pour afficher la fenêtre outil

Il s’agit de la même commande que n’importe quelle autre commande, et vous pouvez voir comment en ajouter une dans la recette Menus &Commandes.

La classe de gestionnaire de commandes qui affiche la fenêtre outil ressemble à ceci :

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

L’emplacement des commandes pour les fenêtres d’outils est généralement sous Affichage -> Autres Fenêtres dans le menu principal.

Vous avez terminé. Félicitations, vous avez maintenant créé votre fenêtre d’outil personnalisée.

Obtenir le code source

Vous trouverez le code source de cette recette dans le référentiel d’exemples.

Partager via