 |
General Programming »
Macros and Add-ins »
Visual Studio Add-ins
Beginner
License: The Code Project Open License (CPOL)
ZoomSliderVSX - Visual Studio Extension (VSX) 2010By Abhijit JanaScrollable Zooming Extension for VS 2010 |
C# (C#3.0, C#4.0), Windows, Visual-Studio (VS2010), WPF, Dev
|
|
Advanced Search Add to IE Search |
|
|
||||||||||||||||||
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.
For developing Visual Studio 2010 Extension, we need to have the following installed in our system:
Before we start with implementation, please make sure that all the required things are installed that are mentioned in the prerequisite section.
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.
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.
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".
To add user control in the application, right click on the project > Add > New Item
Now Select "WPF Control" from the list of items.
Name the control as "SlideControl.xaml" and click on OK. Now, below is the final solution structure for "ZoomSliderVSX".
So currently, we are having two CS files and one WPF control for the whole extension.
So, let's have a look into the 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.
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.
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.
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.
If you change the value of Dropdown list zoom level, that will also be reflected in ZoomSlider as these are integrated with each other.
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.
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.
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+PgUp/PgDown to switch pages.
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 8 Feb 2010 Editor: Deeksha Shenoy |
Copyright 2010 by Abhijit Jana Everything else Copyright © CodeProject, 1999-2010 Web18 | Advertise on the Code Project |
