ZoomSliderVSX - Visual Studio Extension (VSX) 2010

Prize winner in Competition "Visual Studio 2010 Extension Contest"

Introduction
Prerequisite for Extension Development
Developing ZoomSliderVSX
Using Code
Run and Test Application
Installation of ZoomSliderVSX
How to Use ZoomSliderVSX
Publishing Extension - MSDN Visual Studio Gallery

Introduction

Developing Visual Studio 2010 Extension is very much easy and full of fun. I have developed one small extension for VS 2010 called "ZoomSliderVSX". ZoomSliderVSX will provide you a sliding Zooming facility to zoom your source code, where minimum zoom level is 20% and maximum is 400%. Though Visual Studio 2010 has an inbuilt dropdown to set the zoom level for VS Source editor still I found that the scrolling features is missing which is one of the most common features in most of the Microsoft Products like Microsoft-Word, Excel. So I have implemented this small add-in for Visual Studio 2010. Hope you will enjoy it. Please provide your valuable feedback and suggestions to improve this control.

Figure: ZoomSliderVSX UI

Prerequisite for Extension Development

For developing Visual Studio 2010 Extension, we need to have the following installed in our system:

Developing ZoomSliderVSX

Before we start with implementation, please make sure that all the required things are installed that are mentioned in the prerequisite section.

Extension Template Selection

After installing VS 2010 SDK, we will have different types of Extension Templates and based on our requirement, we have to select proper extension template. For ZoomSlider, I have used "Editor Margin" Template. If you want to learn more about what are the uses of other extension templates, please have a look into this.

To start up, Open Visual Studio 2010 IDE. Goto Start > New > Project. Select "Extensibility" from Left side template section. Then select "Editor Margin" Extension.

Figure: Select Extension Template

Default Solution Structure

After selecting template, give the project name as "ZoomSliderVSX" and click on "Ok". This will create one Sample VS Addin control of Editor margin type. Below is the default file structure for the "Editor Margin" type solution.

Figure: Default Solution Structure

As my control name is "ZoomSlider", I have renamed both the CS files to "ZoomSlider.cs" and "ZoomSliderFactory.cs". I have explained the use of both the files in the "Code" section. Now we are already set for starting our development, but one thing is remaining, adding the WPF user control. This is the heart of this extension. So, let’s add one WPF user control named "SliderControl.xaml".

Adding WPF User Control

To add user control in the application, right click on the project > Add > New Item

Figure: Adding New Item

Now Select "WPF Control" from the list of items.

Figure: Adding New WPF Control

Name the control as "SlideControl.xaml" and click on OK. Now, below is the final solution structure for "ZoomSliderVSX".

Final Solution Structure

So currently, we are having two CS files and one WPF control for the whole extension.

Figure: Final solution structure for development

So, let's have a look into the code.

Using Code

In this application, we have three main code files: ZoomSlider.cs, ZoomSliderFactory.cs and SliderControl.XML.

The ZoomControl class has been created to handle appropriate methods when the actual execution takes place within the extension. This class actually creates an object of the WPF User control, and places the control in Editor Margin. ZoomSlider constructor is used to place the control into margin and handle the LayoutChanged event when required.

// The IWpfTextView that our margin will be attached to.
private IWpfTextView _textView;

// The name of the margin
public const string MarginName = "ZoomSlideBar";

// A flag stating whether this margin has been disposed
private bool _isDisposed = false;

//Slider WPF User Control 
private SliderControl _slider = null;

public ZoomSlider(IWpfTextView textView)
{
    // Set the IWpfTextView
    _textView = textView;

    // Establish the background of the margin.
    this.Height = 30;
    this.ClipToBounds = true;
    this.Background = new SolidColorBrush(Color.FromArgb(60, 41,57, 85));
            
    //Set Direction of Control
    this.FlowDirection = System.Windows.FlowDirection.RightToLeft;
            
    //Add Event handler for for LayoutChanges Event
    _textView.LayoutChanged += this.OnLayoutChanged;
          
    //Create New instance for WPF Slider Control
    _slider = new SliderControl(_textView);

    //Add Control
    this.Children.Add(_slider);
}

ZoomSliderFactory class creates the object of ZoomSlider and returns it. In this class, we can also set property like order, margin, etc.

namespace ZoomSliderVSX
{
    #region ZoomSliderVSX Factory
    [Export(typeof(IWpfTextViewMarginProvider))]
    [Name("ZoomSlideBar")]
    //Ensure that the margin occurs below the horizontal scrollbar
    [Order(After = PredefinedMarginNames.HorizontalScrollBar)]
    //Set the container to the bottom of the editor window
    [MarginContainer(PredefinedMarginNames.Bottom)]
    //Do this for all content types
    [ContentType("text")]
    [TextViewRole(PredefinedTextViewRoles.Zoomable)]
    internal sealed class ZoomSliderFactory : IWpfTextViewMarginProvider
    {
        public IWpfTextViewMargin CreateMargin
	(IWpfTextViewHost textViewHost, IWpfTextViewMargin containerMargin)
        {
            return new ZoomSlider(textViewHost.TextView);
        }
    }
    #endregion
}

Now, check the code for the actual WPF control. This is very much simple where I have used two buttons and one Slider control.

     <StackPanel Orientation="Horizontal" Height="25">
        <Label Name="ZoomValue"
               Content=""
               Width="40"
               Foreground="#FF2C3B59">
            
        </Label>
        <Button Name="ZoomMinus" 
                Content="-"
                Width="20" 
                Click="ZoomMinus_Click" 
                Background="#FF293954" 
                Foreground="#FF00FA00">
        </Button>
       <Slider Name="Zoomer"
               Width="100"
               Minimum="20"
               Maximum="400"
               Cursor="Hand"
               Value="100"
               Ticks="20,50,70,100,150,200,400"
               TickPlacement="BottomRight"
               ValueChanged="Zoomer_ValueChanged"
               SmallChange="1"
               IsSnapToTickEnabled="True"
               Foreground="#FFAF1F28">
            <Slider.Background>
                <RadialGradientBrush>
                    <GradientStop Color="#FFBE2C00" Offset="0" />
                    <GradientStop Color="#FF9DB7B7" Offset="1" />
                </RadialGradientBrush>
            </Slider.Background>
        </Slider>
        <Button Name="ZoomPlus"
                Content="+"
                Width="20"
                Click="ZoomPlus_Click"
                Foreground="Lime"
                Background="#FF293855">
        </Button>
        
    </StackPanel>

Now all the events for button and slider control are handled in the xaml.cs file. Code for handling the slider value and setting the zoom level of textview is as below. We need to just increase and decrease the value of slider and based on that, we have set the TextView Zoom Level. Here SliderControl(IWpfTextView view) gets initialized from zoomslider class and Slider control receives the reference of WPFTextView.

namespace ZoomSliderVSX
{
    /// <summary>
    /// Interaction logic for Slider.xaml
    /// </summary>
    public partial class SliderControl : UserControl
    {
        //Initilize TextView
        IWpfTextView _view = null;
        public SliderControl()
        {
            InitializeComponent();
        }

        /// <summary>
        /// Initilize Slider  Control
        /// </summary>
        /// <param name=""view"">
        public SliderControl(IWpfTextView view)
        {
            this._view = view;
            InitializeComponent();
        }
        /// <summary>
        /// Click on Plus Button
        /// </summary>
        /// <param name=""sender"">
        /// <param name=""e"">
        private void ZoomPlus_Click(object sender, RoutedEventArgs e)
        {
            Zoomer.Value = Zoomer.Value + 10;
            _view.ZoomLevel = Zoomer.Value;
            ZoomValue.Content = "%" + Zoomer.Value;
        }

        /// <summary>
        /// Click on Minus Button
        /// </summary>
        /// <param name=""sender"">
        /// <param name=""e"">
        private void ZoomMinus_Click(object sender, RoutedEventArgs e)
        {
            Zoomer.Value = Zoomer.Value - 10;
            _view.ZoomLevel = Zoomer.Value;
            ZoomValue.Content = "%" + Zoomer.Value;
        }

        /// <summary>
        /// On Change of Slider Value
        /// </summary>
        /// <param name=""sender"">
        /// <param name=""e"">
        private void Zoomer_ValueChanged(object sender, 
			RoutedPropertyChangedEventArgs<double> e)
        {
            ZoomValue.Content = "%" + Zoomer.Value ;
            
            //Set the Zoom Level
            _view.ZoomLevel = Zoomer.Value;
        }

        /// <summary>
        /// Update Slider on Layout Changed
        /// </summary>
        public void UpdateSlider()
        {
            //Check if need be update the slider 
            if (Zoomer.Value != _view.ZoomLevel)
            {
                //Set the Zoom Value to Content and Slider
                ZoomValue.Content = "%" + _view.ZoomLevel;
                Zoomer.Value = _view.ZoomLevel;
            }  
        }
    }

Here I have also handled the layout changed event for Visual Studio editor. As I have already mentioned, VS 2010 has inbuilt Zooming dropdown to zoom the text, so I have integrated those changes with the ZoomSlider. In ZoomSlider.Cs file, inside ZoomSlider() constructor I have handled the event for layout change event.

private void OnLayoutChanged(object sender, TextViewLayoutChangedEventArgs e)
{
    if (_slider != null)
    //Call Update method of SliderControl
    _slider.UpdateSlider();
}

So, on layout change, it will call the UpdateSlider() method of my Slider usercontrol, which will automatically set the value of Slider and label based on the changes in dropdown list.

public void UpdateSlider()
{
    //Check if need be update the slider 
    if (Zoomer.Value != _view.ZoomLevel)
    {
        //Set the Zoom Value to Content and Slider
        ZoomValue.Content = "%" + _view.ZoomLevel;
        Zoomer.Value = _view.ZoomLevel;
    }  
}

We are now done with our development. Now, just build the application and run.

Run and Test Application

Whenever we run any extention control to test, Visual Studio will create one "Experimental Instance" where you can see your extension is on placed inside the VS IDE. This instance can also be used for debugging your control.

Figure: Test Application in VS Experimental Instance

Installation of ZoomSliderVSX

This is very easy. First of all, we need to run the .vsix file to setup the addin within Visual Studio IDE. Then we have to open "ExtentionManager" from Tool > Extension Manager to manage the extension where we can easily "Install", "Uninstall" or "Disabled" any extension.

Figure: Installing and Uninstalling ZoomSliderVSX

How to Use ZoomSliderVSX

Using Zoom Slider is very similar to using any zooming control. This is similar to all other Microsoft products like Microsoft-Office, Microsoft-Excel zooming control. Use Scroll to Zoom-in or Zoom-Out. You can use "+" and "-" button to achieve the same.

Figure: Using ZoomSlider

If you change the value of Dropdown list zoom level, that will also be reflected in ZoomSlider as these are integrated with each other.

Publishing Extension - MSDN Visual Studio Gallery

I have published the extension in MSDN Visual Studio Gallery. This is also very simple. You just need to upload the VSIX file. Www.visualstudiogallery.com. Here is my Extension in MSDN Visual Studio Library.

Summary

Developing an extension for VS 2010 is very easy and lots of fun. This is my first extension for VS 2010. Though this is very simple, I have enjoyed a lot. I have published the same in MSDN Visual Studio Gallery also. Please provide your feedback and suggestions.