Ajouter une fenêtre d’outil

  • Article

Dans cette procédure pas à pas, vous allez apprendre à créer une fenêtre d’outil et à l’intégrer à Visual Studio de la manière suivante :

  • Ajoutez un contrôle à la fenêtre outil.

  • Ajoutez une barre d’outils à une fenêtre d’outils.

  • Ajoutez une commande à la barre d’outils.

  • Implémentez les commandes.

  • Définissez la position par défaut de la fenêtre outil.

Prérequis

Le Kit de développement logiciel (SDK) Visual Studio est inclus en tant que fonctionnalité facultative dans le programme d’installation de Visual Studio. Pour plus d’informations, consultez Installer le Kit de développement logiciel (SDK) Visual Studio.

Créer une fenêtre d’outil

  1. Créez un projet nommé FirstToolWin à l’aide du modèle VSIX et ajoutez un modèle d’élément de fenêtre d’outil personnalisé nommé FirstToolWindow.

    Remarque

    Pour plus d’informations sur la création d’une extension avec une fenêtre d’outil, consultez Créer une extension avec une fenêtre d’outil.

Ajouter un contrôle à la fenêtre outil

  1. Supprimez le contrôle par défaut. Ouvrez FirstToolWindowControl.xaml et supprimez le bouton Cliquer sur moi !

  2. Dans la boîte à outils, développez la section Tous les contrôles WPF et faites glisser le contrôle Élément multimédia vers le formulaire FirstToolWindowControl . Sélectionnez le contrôle et, dans la fenêtre Propriétés , nommez cet élément mediaElement1.

Ajouter une barre d’outils à la fenêtre outil

En ajoutant une barre d’outils de la manière suivante, vous garantissez que ses dégradés et couleurs sont cohérents avec le reste de l’IDE.

  1. Dans Explorateur de solutions, ouvrez FirstToolWindowPackage.vsct. Le fichier .vsct définit les éléments d’interface utilisateur graphique (GUI) dans votre fenêtre d’outil à l’aide de XML.

  2. Dans la <Symbols> section, recherchez le nœud dont name l’attribut <GuidSymbol> est guidFirstToolWindowPackageCmdSet. Ajoutez les deux <IDSymbol> éléments suivants à la liste des éléments de <IDSymbol> ce nœud pour définir une barre d’outils et un groupe de barres d’outils.

    <IDSymbol name="ToolbarID" value="0x1000" />
<IDSymbol name="ToolbarGroupID" value="0x1001" />

  3. Juste au-dessus de la <Buttons> section, créez une <Menus> section semblable à ceci :

    <Menus>
    <Menu guid="guidFirstToolWindowPackageCmdSet" id="ToolbarID" priority="0x0000" type="ToolWindowToolbar">
        <Parent guid="guidFirstToolWindowPackageCmdSet" id="ToolbarID" />
        <Strings>
            <ButtonText>Tool Window Toolbar</ButtonText>
            <CommandName>Tool Window Toolbar</CommandName>
        </Strings>
    </Menu>
</Menus>

    Il existe plusieurs types de menus différents. Ce menu est une barre d’outils dans une fenêtre outil, définie par son type attribut. Les guid paramètres constituent id l’ID complet de la barre d’outils. En règle générale, le <Parent> menu est le groupe contenant. Toutefois, une barre d’outils est définie comme son propre parent. Par conséquent, le même identificateur est utilisé pour les éléments et <Parent> les <Menu> éléments. L’attribut priority est juste « 0 ».

  4. Les barres d’outils ressemblent à des menus de plusieurs façons. Par exemple, tout comme un menu peut avoir des groupes de commandes, les barres d’outils peuvent également avoir des groupes. (Dans les menus, les groupes de commandes sont séparés par des lignes horizontales. Dans les barres d’outils, les groupes ne sont pas séparés par des séparateurs visuels.)

    Ajoutez une <Groups> section qui contient un <Group> élément. Cela définit le groupe dont vous avez déclaré l’ID dans la <Symbols> section. Ajoutez la <Groups> section juste après la <Menus> section.

    <Groups>
    <Group guid="guidFirstToolWindowPackageCmdSet" id="ToolbarGroupID" priority="0x0000">
        <Parent guid="guidFirstToolWindowPackageCmdSet" id="ToolbarID" />
    </Group>
</Groups>

    En définissant le GUID parent et l’ID sur le GUID et l’ID de la barre d’outils, vous ajoutez le groupe à la barre d’outils.

Ajouter une commande à la barre d’outils

Ajoutez une commande à la barre d’outils, qui s’affiche sous la forme d’un bouton.

  1. Dans la <Symbols> section, déclarez les éléments IDSymbol suivants juste après les déclarations de groupe de barre d’outils et de barre d’outils.

    <IDSymbol name="cmdidWindowsMedia" value="0x0100" />
<IDSymbol name="cmdidWindowsMediaOpen" value="0x132" />

  2. Ajoutez un élément Button à l’intérieur de la <Buttons> section. Cet élément apparaît dans la barre d’outils de la fenêtre outil, avec une icône de recherche (loupe).

    <Button guid="guidFirstToolWindowPackageCmdSet" id="cmdidWindowsMediaOpen" priority="0x0101" type="Button">
    <Parent guid="guidFirstToolWindowPackageCmdSet" id="ToolbarGroupID"/>
    <Icon guid="guidImages" id="bmpPicSearch" />
    <Strings>
        <CommandName>cmdidWindowsMediaOpen</CommandName>
        <ButtonText>Load File</ButtonText>
    </Strings>
</Button>

  3. Ouvrez FirstToolWindowCommand.cs et ajoutez les lignes suivantes dans la classe juste après les champs existants.

    public const string guidFirstToolWindowPackageCmdSet = "00000000-0000-0000-0000-0000";  // get the GUID from the .vsct file
public const uint cmdidWindowsMedia = 0x100;
public const int cmdidWindowsMediaOpen = 0x132;
public const int ToolbarID = 0x1000;

    Cela rend vos commandes disponibles dans le code.

Ajouter une propriété MediaPlayer à FirstToolWindowControl

À partir des gestionnaires d’événements pour les contrôles de barre d’outils, votre code doit être en mesure d’accéder au contrôle Lecteur multimédia, qui est un enfant de la classe FirstToolWindowControl.

Dans Explorateur de solutions, cliquez avec le bouton droit sur FirstToolWindowControl.xaml, cliquez sur Afficher le code et ajoutez le code suivant à la classe FirstToolWindowControl.

public System.Windows.Controls.MediaElement MediaPlayer
{
    get { return mediaElement1; }
}

Instancier la fenêtre et la barre d’outils de l’outil

Ajoutez une barre d’outils et une commande de menu qui appelle la boîte de dialogue Ouvrir un fichier et lit le fichier multimédia sélectionné.

  1. Ouvrez FirstToolWindow.cs et ajoutez les directives suivantes using :

    using System.ComponentModel.Design;
using System.Windows.Forms;
using Microsoft.VisualStudio.Shell.Interop;

  2. Dans la classe FirstToolWindow, ajoutez une référence publique au contrôle FirstToolWindowControl.

    public FirstToolWindowControl control;

  3. À la fin du constructeur, définissez cette variable de contrôle sur le contrôle nouvellement créé.

    control = new FirstToolWindowControl();
base.Content = control;

  4. Instanciez la barre d’outils à l’intérieur du constructeur.

    this.ToolBar = new CommandID(new Guid(FirstToolWindowCommand.guidFirstToolWindowPackageCmdSet),
    FirstToolWindowCommand.ToolbarID);
this.ToolBarLocation = (int)VSTWT_LOCATION.VSTWT_TOP;

  5. À ce stade, le constructeur FirstToolWindow doit ressembler à ceci :

    public FirstToolWindow() : base(null)
{
    this.Caption = "FirstToolWindow";
    this.BitmapResourceID = 301;
    this.BitmapIndex = 1;
    control = new FirstToolWindowControl();
    base.Content = control;
    this.ToolBar = new CommandID(new Guid(FirstToolWindowCommand.guidFirstToolWindowPackageCmdSet),
        FirstToolWindowCommand.ToolbarID);
        this.ToolBarLocation = (int)VSTWT_LOCATION.VSTWT_TOP;
}

  6. Ajoutez la commande de menu à la barre d’outils. Dans la classe FirstToolWindowCommand.cs, ajoutez la directive using suivante :

    using System.Windows.Forms;

  7. Dans la classe FirstToolWindowCommand, ajoutez le code suivant à la fin de la méthode ShowToolWindow(). La commande ButtonHandler sera implémentée dans la section suivante.

    // Create the handles for the toolbar command.
var mcs = this.ServiceProvider.GetService(typeof(IMenuCommandService)) as OleMenuCommandService;
var toolbarbtnCmdID = new CommandID(new Guid(FirstToolWindowCommand.guidFirstToolWindowPackageCmdSet),
    FirstToolWindowCommand.cmdidWindowsMediaOpen);
var menuItem = new MenuCommand(new EventHandler(
    ButtonHandler), toolbarbtnCmdID);
mcs.AddCommand(menuItem);

Pour implémenter une commande de menu dans la fenêtre outil

  1. Dans la classe FirstToolWindowCommand, ajoutez une méthode ButtonHandler qui appelle la boîte de dialogue Ouvrir un fichier . Lorsqu’un fichier a été sélectionné, il lit le fichier multimédia.

  2. Dans la classe FirstToolWindowCommand, ajoutez une référence privée à la fenêtre FirstToolWindow créée dans la méthode FindToolWindow().

    private FirstToolWindow window;

  3. Modifiez la méthode ShowToolWindow() pour définir la fenêtre que vous avez définie ci-dessus (afin que le gestionnaire de commandes ButtonHandler puisse accéder au contrôle de fenêtre. Voici la méthode ShowToolWindow() complète.

    private void ShowToolWindow(object sender, EventArgs e)
{
    window = (FirstToolWindow) this.package.FindToolWindow(typeof(FirstToolWindow), 0, true);
    if ((null == window) || (null == window.Frame))
    {
        throw new NotSupportedException("Cannot create tool window");
    }

    IVsWindowFrame windowFrame = (IVsWindowFrame)window.Frame;
    Microsoft.VisualStudio.ErrorHandler.ThrowOnFailure(windowFrame.Show());

    var mcs = this.ServiceProvider.GetService(typeof(IMenuCommandService)) as OleMenuCommandService;
    var toolbarbtnCmdID = new CommandID(new Guid(FirstToolWindowCommandguidFirstToolWindowPackageCmdSet),
        FirstToolWindowCommand.cmdidWindowsMediaOpen);
    var menuItem = new MenuCommand(new EventHandler(
        ButtonHandler), toolbarbtnCmdID);
    mcs.AddCommand(menuItem);
}

  4. Ajoutez la méthode ButtonHandler. Il crée un OpenFileDialog pour que l’utilisateur spécifie le fichier multimédia à lire, puis lit le fichier sélectionné.

    private void ButtonHandler(object sender, EventArgs arguments)
{
    OpenFileDialog openFileDialog = new OpenFileDialog();
    DialogResult result = openFileDialog.ShowDialog();
    if (result == DialogResult.OK)
    {
        window.control.MediaPlayer.Source = new System.Uri(openFileDialog.FileName);
    }
}

Définir la position par défaut de la fenêtre outil

Ensuite, spécifiez un emplacement par défaut dans l’IDE pour la fenêtre outil. Les informations de configuration de la fenêtre outil se trouve dans le fichier FirstToolWindowPackage.cs .

  1. Dans FirstToolWindowPackage.cs, recherchez l’attribut ProvideToolWindowAttribute sur la FirstToolWindowPackage classe, qui transmet le type FirstToolWindow au constructeur. Pour spécifier une position par défaut, vous devez ajouter d’autres paramètres au constructeur suivant.

    [ProvideToolWindow(typeof(FirstToolWindow),
    Style = Microsoft.VisualStudio.Shell.VsDockStyle.Tabbed,
    Window = "3ae79031-e1bc-11d0-8f78-00a0c9110057")]

    Le premier paramètre nommé est Style et sa valeur est Tabbed, ce qui signifie que la fenêtre sera un onglet dans une fenêtre existante. La position d’ancrage est spécifiée par le Window paramètre, n ce cas, le GUID du Explorateur de solutions.

    Remarque

    Pour plus d’informations sur les types de fenêtres dans l’IDE, consultez vsWindowType.

Tester la fenêtre outil

  1. Appuyez sur F5 pour ouvrir une nouvelle instance de la build expérimentale visual Studio.

  2. Dans le menu Affichage , pointez sur Autres fenêtres , puis cliquez sur Première fenêtre Outil.

    La fenêtre de l’outil lecteur multimédia doit s’ouvrir à la même position que Explorateur de solutions. S’il apparaît toujours à la même position que précédemment, réinitialisez la disposition de la fenêtre (Fenêtre/Réinitialiser la disposition de la fenêtre).

  3. Cliquez sur le bouton (il contient l’icône De recherche ) dans la fenêtre d’outil. Sélectionnez un fichier audio ou vidéo pris en charge, par exemple C  :\windows\media\chimes.wav, puis appuyez sur Ouvrir.

    Vous devriez entendre le son de chime.

Contenu connexe