Visual Studio 2010 : Introducing the Visual Studio Extensibility - Extending the Code Editor

7/30/2012 5:48:03 PM

One of the most important new features in the Visual Studio 2010 is the capability of extending the code editor, which is now based on WPF. Code editor extensions get the instance of the WPF objects keeping the editor itself alive. For a better understanding, instead of building a particular extension, we explain required objects taking advantage of one of the sample projects added by the Visual Studio 2010 SDK. Create a new project and select the Visual Basic, Extensibility folder; finally select the Editor Text Adornment project template, as shown in Figure 1.

Figure 1. Selecting the code editor extension template.

The goal of this sample project is simple: adorning each “a” character in the code with a different background color. The most important object in providing editor extensions is the Microsoft.VisualStudio.Text.Editor.IWpfTextView type that represents the instance of the code editor. For the current example, there is the need of placing an adornment on all occurrences of the specified character. To place adornments, you need an instance of the IAdornmentLayer type that represents a space for placing adornments. Listing 1 shows the complete code; read comments that can help you understand what is under the hood.

Listing 1. Providing a Code Editor Extension with Adornments

Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports Microsoft.VisualStudio.Text
Imports Microsoft.VisualStudio.Text.Editor
Imports Microsoft.VisualStudio.Text.Formatting

''' <summary>
''' ScarletCharacter adornment places red boxes behind all
''' the "a"s in the editor window
''' </summary>
Class ScarletCharacter

    Private WithEvents _view As IWpfTextView
    Private ReadOnly _layer As IAdornmentLayer
    Private ReadOnly _brush As Brush
    Private ReadOnly _pen As Pen

    'The IWpFTextView object represents the
    'instance of the code editor
    Public Sub New(ByVal view As IWpfTextView)
        _view = view

        'IAdornmentLayer represents the place where
        'adorners are placed
        _layer = view.GetAdornmentLayer("ScarletCharacter")

        'Create the pen and brush to color the box behind the a's
        Dim brush As New SolidColorBrush(Color.
                         FromArgb(&H20, &H0, &H0, &HFF))
        brush.Freeze()
        Dim penBrush As New SolidColorBrush(Colors.Red)
        penBrush.Freeze()
        Dim pen As New Pen(penBrush, 0.5)
        pen.Freeze()

        _brush = brush
        _pen = pen
    End Sub

    ''' <summary>
    ''' On layout change add the adornment to any reformated lines
    ''' </summary>
    Private Sub OnLayoutChanged(ByVal sender As Object,
                                ByVal e As TextViewLayoutChangedEventArgs) _
                                Handles _view.LayoutChanged

        'TextViewLayoutChangedEventArgs provides information when
        'the code editor layout changes
        For Each line In e.NewOrReformattedLines
            Me.CreateVisuals(line)
        Next line
    End Sub

    ''' <summary>
    ''' Within the given line add the scarlet box behind the a
    ''' </summary>
    Private Sub CreateVisuals(ByVal line As ITextViewLine)
        'grab a reference to the lines in the current TextView
        Dim textViewLines = _view.TextViewLines
        Dim lineStart As Integer = line.Start
        Dim lineEnd As Integer = line.End

        'Loop through each character, and place a box around any a
        For i = lineStart To lineEnd - 1
            If _view.TextSnapshot(i) = "a"c Then
                Dim charSpan As New SnapshotSpan(_view.TextSnapshot,
                                    Span.FromBounds(i, i + 1))
                Dim g As Geometry = textViewLines.GetMarkerGeometry(charSpan)
                If g IsNot Nothing Then
                    Dim drawing As New GeometryDrawing(_brush, _pen, g)
                    drawing.Freeze()

                    Dim drawingImage As New DrawingImage(drawing)
                    drawingImage.Freeze()

                    Dim image As New Image()
                    image.Source = drawingImage

                    'Align the image with the top of the bounds of the text geometry
                    Canvas.SetLeft(image, g.Bounds.Left)
                    Canvas.SetTop(image, g.Bounds.Top)

                    'AdornmentPositioningBehavior sets how
                    'the adornment is placed
                    _layer.AddAdornment(AdornmentPositioningBehavior.
                                        TextRelative, charSpan,
                                        Nothing, image, Nothing)
                End If
            End If
        Next
    End Sub

End Class

Notice how the Microsoft.VisualStudio.Text namespace exposes objects and other namespaces for interacting with the code editor. Now run the extension by pressing F5. Try to create a new console project and write some text containing “a” characters and you will see how they are surrounded with a different background, as shown in Figure 2.

Figure 2. The WPF editor extension adorning some text.

There are so many scenarios in which you might need to extend the Visual Studio code editor. You can find lots of interesting extensions by searching the Visual Studio Gallery with the Extension Manager.