Walkthrough: Using a Shell Command with an Editor Extension

From a VSPackage, you can add features such as menu commands to the editor. This walkthrough shows how to add an adornment to a text view in the editor by invoking a menu command.

This walkthrough demonstrates the use of a VSPackage together with a Managed Extensibility Framework (MEF) component part. You must use a VSPackage to register the menu command with the Visual Studio shell, and you can use the command to access the MEF component part.

To follow this walkthrough, you must install the Visual Studio 2013 SDK. For more information, see Visual Studio Software Development Kit (SDK).

The Visual Studio Package project template can be found in three different locations in the New Project dialog:

  1. Under Visual Basic, Extensibility. The default language of the project is Visual Basic.

  2. Under C#, Extensibility. The default language of the project is C#.

  3. Under Other Project Types, Extensibility. The default language of the project is C++

Create a VSPackage that puts a menu command named Add Adornment on the Tools menu.

To create a menu command VSPackage

  1. Create a Visual Studio Package and name it MenuCommandTest. Click OK.

  2. On the welcome page, click Next.

  3. On the Select a Programming Language page, select Visual Basic or Visual C#, make sure that Generate a new key file to sign the assembly is selected, and then click Next.

  4. On the Basic VSPackage Information page, keep the current values, and then click Next.

  5. On the Select VSPackage Options page, select Menu Command and then click Next.

  6. On the Command Options page, in the Command name text box, type Add Adornment. In the Command ID text box, type cmdidAddAdornment. Click Next.

  7. On the Select Test Options page, clear both options and then click Finish.

  8. A solution named MenuCommandTest is opened. The MenuCommandTestPackage file has the code that creates the menu command and puts it on the Tools menu. At this point, the command just causes a message box to be displayed. Later steps show how to change this to display the comment adornment.

  9. Open the source.extension.vsixmanifest file in the VSIX Manifest Editor. The Assets tab should have a row for a Microsoft.VisualStudio.VSPackage named MenuCommandTest.

  10. Save and close the Source.extension.vsixmanifest file.

To add the MEF extension to the VSPackage solution

  1. In Solution Explorer, right-click the solution node, click Add, and then click New Project. In the Add New Project dialog box, click Extensibility under Visual Basic or Visual C#, then EditorClassifier. Name the project CommentAdornmentTest.

  2. Because this project will interact with the strongly-named VSPackage assembly, you must sign the assembly. You can reuse the key file already created for the VSPackage assembly.

    1. Open the project properties and select the Signing page.

    2. Select Sign the assembly.

    3. Under Choose a strong name key file, select the Key.snk file that was generated for the MenuCommandTest assembly.

    4. Save the project.

Because you are adding a MEF component to the VSPackage, you must specify both kinds of assets in the manifest.

Note Note

For more information about MEF, see Managed Extensibility Framework (MEF).

To refer to the MEF component in the VSPackage project

  1. In the MenuCommandTest project, open the source.extension.vsixmanifest file in the VSIX Manifest Editor.

  2. On the Assets tab, click New.

  3. In the Type list, choose Microsoft.VisualStudio.MefComponent.

  4. In the Source list, choose A project in current solution.

  5. In the Project list, choose CommentAdornmentTest.

  6. Save and close the source.extension.vsixmanifest file.

  7. Add a reference to the CommentAdornmentTest project.

The comment adornment itself consists of an ITrackingSpan that tracks the selected text, and some strings that represent the author and the description of the text.

To define a comment adornment

  1. In the CommentAdornmentTest project, delete the existing class files.

  2. Add a new class file and name it CommentAdornment.

  3. Add the following using statement.

    using Microsoft.VisualStudio.Text;
  4. Add a class named CommentAdornment.

    internal class CommentAdornment
  5. Add three fields to the CommentAdornment class for the ITrackingSpan, the author, and the description.

    public readonly ITrackingSpan Span;
    public readonly string Author;
    public readonly string Text;
  6. Add a constructor that initializes the fields.

    public CommentAdornment(SnapshotSpan span, string author, string text)
        this.Span = span.Snapshot.CreateTrackingSpan(span, SpanTrackingMode.EdgeExclusive);
        this.Author = author;
        this.Text = text;

You must also define a visual element for your adornment. For this walkthrough, define a control that inherits from the Windows Presentation Foundation (WPF) class Canvas.

To create a visual element for the adornment

  1. Create a class in the CommentAdornmentTest project, and name it CommentBlock.

  2. Add the following using statements.

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Media;
    using System.Windows.Shapes;
  3. Make the CommentBlock class inherit from Canvas.

    internal class CommentBlock : Canvas
  4. Add some private fields to define the visual aspects of the adornment.

    private Geometry textGeometry;
    private Grid commentGrid;
    private static Brush brush;
    private static Pen solidPen;
    private static Pen dashPen;
  5. Add a constructor that defines the comment adornment and adds the relevant text.

    public CommentBlock(double textRightEdge,
    double viewRightEdge,
    Geometry newTextGeometry,
    string author,
    string body)
        if (brush == null)
            brush = new SolidColorBrush(Color.FromArgb(0x20, 0x00, 0xff, 0x00));
            Brush penBrush = new SolidColorBrush(Colors.Green);
            solidPen = new Pen(penBrush, 0.5);
            dashPen = new Pen(penBrush, 0.5);
            dashPen.DashStyle = DashStyles.Dash;
        this.textGeometry = newTextGeometry;
        TextBlock tb1 = new TextBlock();
        tb1.Text = author;
        TextBlock tb2 = new TextBlock();
        tb2.Text = body;
        const int MarginWidth = 8;
        this.commentGrid = new Grid();
        this.commentGrid.RowDefinitions.Add(new RowDefinition());
        this.commentGrid.RowDefinitions.Add(new RowDefinition());
        ColumnDefinition cEdge = new ColumnDefinition();
        cEdge.Width = new GridLength(MarginWidth);
        ColumnDefinition cEdge2 = new ColumnDefinition();
        cEdge2.Width = new GridLength(MarginWidth);
        this.commentGrid.ColumnDefinitions.Add(new ColumnDefinition());
        System.Windows.Shapes.Rectangle rect = new System.Windows.Shapes.Rectangle();
        rect.RadiusX = 6;
        rect.RadiusY = 3;
        rect.Fill = brush;
        rect.Stroke = Brushes.Green;
        Size inf = new Size(double.PositiveInfinity, double.PositiveInfinity);
        double middleWidth = Math.Max(tb1.DesiredSize.Width, tb2.DesiredSize.Width);
        this.commentGrid.Width = middleWidth + 2 * MarginWidth;
        Grid.SetColumn(rect, 0);
        Grid.SetRow(rect, 0);
        Grid.SetRowSpan(rect, 2);
        Grid.SetColumnSpan(rect, 3);
        Grid.SetRow(tb1, 0);
        Grid.SetColumn(tb1, 1);
        Grid.SetRow(tb2, 1);
        Grid.SetColumn(tb2, 1);
        Canvas.SetLeft(this.commentGrid, Math.Max(viewRightEdge - this.commentGrid.Width - 20.0, textRightEdge + 20.0));
        Canvas.SetTop(this.commentGrid, textGeometry.GetRenderBounds(solidPen).Top);
  6. Also implement an OnRender event handler that draws the adornment.

    protected override void OnRender(DrawingContext dc)
        if (this.textGeometry != null)
            dc.DrawGeometry(brush, solidPen, this.textGeometry);
            Rect textBounds = this.textGeometry.GetRenderBounds(solidPen);
            Point p1 = new Point(textBounds.Right, textBounds.Bottom);
            Point p2 = new Point(Math.Max(Canvas.GetLeft(this.commentGrid) - 20.0, p1.X), p1.Y);
            Point p3 = new Point(Math.Max(Canvas.GetLeft(this.commentGrid), p1.X), (Canvas.GetTop(this.commentGrid) + p1.Y) * 0.5);
            dc.DrawLine(dashPen, p1, p2);
            dc.DrawLine(dashPen, p2, p3);

The IWpfTextViewCreationListener is a MEF component part that you can use to listen to view creation events.

To add an IWpfTextViewCreationListener

  1. Add a class file to the CommentAdornmentTest project and name it Connector.

  2. Add the following using statements.

    using System.ComponentModel.Composition;
    using Microsoft.VisualStudio.Text.Editor;
    using Microsoft.VisualStudio.Utilities;
  3. Declare a class that implements IWpfTextViewCreationListener, and export it with a ContentTypeAttribute of "text" and a TextViewRoleAttribute of Document. The content type attribute specifies the kind of content to which the component applies. The text type is the base type for all non-binary file types. Therefore, almost every text view that is created will be of this type. The text view role attribute specifies the kind of text view to which the component applies. Document text view roles generally show text that is composed of lines and is stored in a file.

    public sealed class Connector : IWpfTextViewCreationListener
  4. Implement the TextViewCreated method so that it calls the static Create() event of the CommentAdornmentManager.

    public void TextViewCreated(IWpfTextView textView)
  5. Add a method that you can use to execute the command.

    static public void Execute(IWpfTextViewHost host)
        IWpfTextView view = host.TextView;
        //Add a comment on the selected text. 
        if (!view.Selection.IsEmpty)
            //Get the provider for the comment adornments in the property bag of the view.
            CommentAdornmentProvider provider = view.Properties.GetProperty<CommentAdornmentProvider>(typeof(CommentAdornmentProvider));
            //Add some arbitrary author and comment text. 
            string author = System.Security.Principal.WindowsIdentity.GetCurrent().Name;
            string comment = "Four score....";
            //Add the comment adornment using the provider.
            provider.Add(view.Selection.SelectedSpans[0], author, comment);

To add a new adornment, you must define an adornment layer.

To define an adornment layer

  • In the Connector class, declare a public field of type AdornmentLayerDefinition, and export it with a NameAttribute that specifies a unique name for the adornment layer and an OrderAttribute that defines the Z-order relationship of this adornment layer to the other text view layers (text, caret, and selection).

    [Order(After = PredefinedAdornmentLayers.Selection, Before = PredefinedAdornmentLayers.Text)]
    public AdornmentLayerDefinition commentLayerDefinition;

When you define an adornment, also implement a comment adornment provider and a comment adornment manager. The comment adornment provider keeps a list of comment adornments, listens to Changed events on the underlying text buffer, and deletes comment adornments when the underlying text is deleted.

To add the comment adornment provider

  1. Add a new class file to the CommentAdornmentTest project and name it CommentAdornmentProvider.

  2. Add the following using statements.

    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using Microsoft.VisualStudio.Text;
    using Microsoft.VisualStudio.Text.Editor;
  3. Add a class named CommentAdornmentProvider.

    internal class CommentAdornmentProvider
  4. Add private fields for the text buffer and the list of comment adornments related to the buffer.

    private ITextBuffer buffer;
    private IList<CommentAdornment> comments = new List<CommentAdornment>();
  5. Add a constructor for CommentAdornmentProvider. This constructor should have private access because the provider is instantiated by the Create() method. The constructor adds the OnBufferChanged event handler to the Changed event.

    private CommentAdornmentProvider(ITextBuffer buffer)
        this.buffer = buffer;
        //listen to the Changed event so we can react to deletions. 
        this.buffer.Changed += OnBufferChanged;
  6. Add the Create() method.

    public static CommentAdornmentProvider Create(IWpfTextView view)
        return view.Properties.GetOrCreateSingletonProperty<CommentAdornmentProvider>(delegate { return new CommentAdornmentProvider(view.TextBuffer); });
  7. Add the Detach() method.

    public void Detach()
        if (this.buffer != null)
            //remove the Changed listener 
            this.buffer.Changed -= OnBufferChanged;
            this.buffer = null;
  8. Add the OnBufferChanged event handler.

    private void OnBufferChanged(object sender, TextContentChangedEventArgs e)
        //Make a list of all comments that have a span of at least one character after applying the change. There is no need to raise a changed event for the deleted adornments. The adornments are deleted only if a text change would cause the view to reformat the line and discard the adornments.
        IList<CommentAdornment> keptComments = new List<CommentAdornment>(this.comments.Count);
        foreach (CommentAdornment comment in this.comments)
            Span span = comment.Span.GetSpan(e.After);
            //if a comment does not span at least one character, its text was deleted. 
            if (span.Length != 0)
        this.comments = keptComments;
  9. Add a declaration for a CommentsChanged event.

    public event EventHandler<CommentsChangedEventArgs> CommentsChanged;
  10. Create an Add() method to add the adornment.

    public void Add(SnapshotSpan span, string author, string text)
        if (span.Length == 0)
            throw new ArgumentOutOfRangeException("span");
        if (author == null)
            throw new ArgumentNullException("author");
        if (text == null)
            throw new ArgumentNullException("text");
        //Create a comment adornment given the span, author and text.
        CommentAdornment comment = new CommentAdornment(span, author, text);
        //Add it to the list of comments. 
        //Raise the changed event.
        EventHandler<CommentsChangedEventArgs> commentsChanged = this.CommentsChanged;
        if (commentsChanged != null)
            commentsChanged(this, new CommentsChangedEventArgs(comment, null));
  11. Add a RemoveComments() method.

    public void RemoveComments(SnapshotSpan span)
        EventHandler<CommentsChangedEventArgs> commentsChanged = this.CommentsChanged;
        //Get a list of all the comments that are being kept 
        IList<CommentAdornment> keptComments = new List<CommentAdornment>(this.comments.Count);
        foreach (CommentAdornment comment in this.comments)
            //find out if the given span overlaps with the comment text span. If two spans are adjacent, they do not overlap. To consider adjacent spans, use IntersectsWith. 
            if (comment.Span.GetSpan(span.Snapshot).OverlapsWith(span))
                //Raise the change event to delete this comment. 
                if (commentsChanged != null)
                    commentsChanged(this, new CommentsChangedEventArgs(null, comment));
        this.comments = keptComments;
  12. Add a GetComments() method that returns all the comments in a given snapshot span.

    public Collection<CommentAdornment> GetComments(SnapshotSpan span)
        IList<CommentAdornment> overlappingComments = new List<CommentAdornment>();
        foreach (CommentAdornment comment in this.comments)
            if (comment.Span.GetSpan(span.Snapshot).OverlapsWith(span))
        return new Collection<CommentAdornment>(overlappingComments);
  13. Add a class named CommentsChangedEventArgs, as follows.

    internal class CommentsChangedEventArgs : EventArgs
        public readonly CommentAdornment CommentAdded;
        public readonly CommentAdornment CommentRemoved;
        public CommentsChangedEventArgs(CommentAdornment added, CommentAdornment removed)
            this.CommentAdded = added;
            this.CommentRemoved = removed;

The comment adornment manager creates the adornment and adds it to the adornment layer. It listens to the LayoutChanged and Closed events so that it can move or delete the adornment. It also listens to the CommentsChanged event that is fired by the comment adornment provider when comments are added or removed.

To manage comment adornments

  1. Add a class file to the CommentAdornmentTest project and name it CommentAdornmentManager.

  2. Add the following using statements.

    using System;
    using System.Collections.Generic;
    using System.Windows.Media;
    using Microsoft.VisualStudio.Text;
    using Microsoft.VisualStudio.Text.Editor;
    using Microsoft.VisualStudio.Text.Formatting;
  3. Add a class named CommentAdornmentManager.

    internal class CommentAdornmentManager
  4. Add some private fields.

    private readonly IWpfTextView view;
    private readonly IAdornmentLayer layer;
    private readonly CommentAdornmentProvider provider;
  5. Add a constructor that subscribes the manager to the LayoutChanged and Closed events, and also to the CommentsChanged event. The constructor is private because the manager is instantiated by the static Create() method.

    private CommentAdornmentManager(IWpfTextView view)
        this.view = view;
        this.view.LayoutChanged += OnLayoutChanged;
        this.view.Closed += OnClosed;
        this.layer = view.GetAdornmentLayer("CommentAdornmentLayer");
        this.provider = CommentAdornmentProvider.Create(view);
        this.provider.CommentsChanged += OnCommentsChanged;
  6. Add the Create() method that gets a provider or creates one if required.

    public static CommentAdornmentManager Create(IWpfTextView view)
        return view.Properties.GetOrCreateSingletonProperty<CommentAdornmentManager>(delegate { return new CommentAdornmentManager(view); });
  7. Add the CommentsChanged handler.

    private void OnCommentsChanged(object sender, CommentsChangedEventArgs e)
        //Remove the comment (when the adornment was added, the comment adornment was used as the tag). 
        if (e.CommentRemoved != null)
        //Draw the newly added comment (this will appear immediately: the view does not need to do a layout). 
        if (e.CommentAdded != null)
  8. Add the Closed handler.

    private void OnClosed(object sender, EventArgs e)
        this.view.LayoutChanged -= OnLayoutChanged;
        this.view.Closed -= OnClosed;
  9. Add the LayoutChanged handler.

    private void OnLayoutChanged(object sender, TextViewLayoutChangedEventArgs e)
        //Get all of the comments that intersect any of the new or reformatted lines of text.
        List<CommentAdornment> newComments = new List<CommentAdornment>();
        //The event args contain a list of modified lines and a NormalizedSpanCollection of the spans of the modified lines.  
        //Use the latter to find the comments that intersect the new or reformatted lines of text. 
        foreach (Span span in e.NewOrReformattedSpans)
            newComments.AddRange(this.provider.GetComments(new SnapshotSpan(this.view.TextSnapshot, span)));
        //It is possible to get duplicates in this list if a comment spanned 3 lines, and the first and last lines were modified but the middle line was not. 
        //Sort the list and skip duplicates.
        newComments.Sort(delegate(CommentAdornment a, CommentAdornment b) { return a.GetHashCode().CompareTo(b.GetHashCode()); });
        CommentAdornment lastComment = null;
        foreach (CommentAdornment comment in newComments)
            if (comment != lastComment)
                lastComment = comment;
  10. Add the private method that draws the comment.

    private void DrawComment(CommentAdornment comment)
        SnapshotSpan span = comment.Span.GetSpan(this.view.TextSnapshot);
        Geometry g = this.view.TextViewLines.GetMarkerGeometry(span);
        if (g != null)
            //Find the rightmost coordinate of all the lines that intersect the adornment. 
            double maxRight = 0.0;
            foreach (ITextViewLine line in this.view.TextViewLines.GetTextViewLinesIntersectingSpan(span))
                maxRight = Math.Max(maxRight, line.Right);
            //Create the visualization.
            CommentBlock block = new CommentBlock(maxRight, this.view.ViewportRight, g, comment.Author, comment.Text);
            //Add it to the layer. 
            this.layer.AddAdornment(span, comment, block);

You can use the menu command to create a comment adornment by implementing the MenuItemCallback method of the VSPackage.

To use the menu command to add the comment adornment

  1. Add the following references to the MenuCommandTest project:

    • Microsoft.VisualStudio.TextManager.Interop

    • Microsoft.VisualStudio.Editor

    • Microsoft.VisualStudio.Text.UI.Wpf

  2. Add a reference to the CommentAdornmentTest project.

  3. Open the MenuCommandTestPackage file.

  4. Add the following using statements.

    using Microsoft.VisualStudio.TextManager.Interop;
    using Microsoft.VisualStudio.Text.Editor;
    using Microsoft.VisualStudio.Editor;
    using CommentAdornmentTest;
  5. In the MenuItemCallback method, remove the existing code.

  6. Add code to get the active view. You must get the SVsTextManager of the Visual Studio shell to get the active IVsTextView.

    IVsTextManager txtMgr = (IVsTextManager)GetService(typeof(SVsTextManager));
    IVsTextView vTextView = null;
    int mustHaveFocus = 1;
    txtMgr.GetActiveView(mustHaveFocus, null, out vTextView);
  7. If this text view is an instance of an editor text view, you can cast it to the IVsUserData interface and then get the IWpfTextViewHost and its associated IWpfTextView.

    IVsUserData userData = vTextView as IVsUserData;
    if (userData == null)
        Console.WriteLine("No text view is currently open");
    IWpfTextViewHost viewHost;
    object holder;
    Guid guidViewHost = DefGuidList.guidIWpfTextViewHost;
    userData.GetData(ref guidViewHost, out holder);
    viewHost = (IWpfTextViewHost)holder;
  8. Use the IWpfTextViewHost to call the Connector.Execute() method, which gets the comment adornment provider and adds the adornment.


To test this code, build the MenuCommand solution and run it in the experimental instance.

To build and test the MenuCommand solution

  1. Build the solution. When you run this project in the debugger, a second instance of Visual Studio is instantiated.

  2. Create a text file. Type some text and then select it.

  3. On the Tools menu, click Add Adornment. A balloon should be displayed on the right side of the text window, and should contain text that resembles the following text.