Pick a color, any... "Integrated Color Picker for Visual Studio IDE"

Today's Visual Studio Extension is more of a "teach you how to fish" kind of extension as anything. As he does so well, Shemeer NS, of Shemeer's World of Programming, has posted another project where he leverages another Control to create a Visual Studio addin that fits just what he needs, showing you all just how he does it.

This sounds familiar? Yep, he's taught us all out before in this post, Visual Studio Bing... The WebSearch Extension for Visual Studio

Today he takes the very cool Extended WPF Toolkit™ leverages the Color Canvas and Color Picker to create his own...

Integrated Color Picker for Visual Studio IDE

image

Click here to download Color Picker extension for Visual Studio from Visual Studio Gallery.

This tool will very useful if you are working as a Web Developer or UI designer, who mainly uses Visual Studio for the day to day assignments.

This tool offers the below options,

  • Color Selection from Color Canvas.
  • Color Selection from Available Colors.
  • Color Selection from Standard Colors.
  • Color Selection from Saved Colors.
  • Color Selection using Eyedropper.

Currently this tool works with below Visual Studio versions,

  • Visual Studio 2010.
  • Visual Studio 2012.
  • Visual Studio 2013.

Integrated Color Picker for Visual Studio IDE - VSPackage (AddIn)

Integrated Color Picker for Visual Studio will be very useful to you, if you are working as a Web Developer or UI designer, who mainly uses Visual Studio for their day to day assignments. In this article I'm going to give you a walkthrough on the Color Picker AddIn (or Plugin).

If you like to get latest version of Color Picker AddIn then click here.

Background

Sometimes I used to work in UI designing like changing color or alignment using CSS and or HTML markups and I found difficulty in getting a color picker directly from the IDE for my purpose. So I thought to write my own color picker plugin for visual studio. I will be sharing the initial code here so that you also can play with it.

Using the code

I have used some components from Extended WPF Toolkit for this Color Picker tool.  Before you start on this, it would better to have a look on the article 'Using Color Canvas and Color Picker from Extended WPF Toolkit', so that you will get to know the implementation of Color Canvas, Color Picker from Extended WPF Toolkit.

There are many ways to extend Visual Studio. Three common ones are: automation, VSPackage extensions, and Managed Extensibility Framework (MEF) extensions. Visual Studio add-ins are deprecated in Visual Studio 2013. You should upgrade your add-ins to VSPackage extensions.

I will be using Visual Studio Package (VSPackage) for creating this AddIn, You might be interested in Web Search that is created using Visual Studio Add-In project template.

To start developing Visual Studio extensions, you first need to download and install the Visual Studio SDK at the Visual Studio 2013 SDK download website. It is compatible with the Visual Studio 2013 Professional, Premium, or Ultimate editions.  I'm using Visual Studio 2013, if you are using a different version then make sure you have the right version of Visual Studio SDK installed.

New Project

...

image

...

Now lets talk about the actual color picker implementation. As we are utilizing components from Extended WPF Toolkit we need to refer the toolkit binaries in our application.

I'm going to add reference of "Xceed.Wpf.Toolkit.dll" from "Extended WPF Toolkit Binaries". Read article 'Using Color Canvas and Color Picker from Extended WPF Toolkit' for detailed steps of adding reference.

Once we add the reference to "Xceed.Wpf.Toolkit.dll", We need to add a WPF window that will be used to host the color picker functionalities.

...

Summary

In this article I have tried to explain how to create a Visual Studio Package with the help of Intgrated Color Picker for Visual Studio. 

I have put my time and efforts on all of my articles, please don't forget to mark your votes, suggestions and feedback to improve the quality of this and upcoming articles. 

[Click through for the source and the full details]

If you're interested in the Extended WPF Toolkit, check out Shemeer NS's other article, WPF: Using Color Canvas and Color Picker from Extended WPF Toolkit

Introduction

Some days back I got a chance to work on WPF with Extended WPF Toolkit and I really got impressed with the controls they have offered. I am using this article to demonstrate the implementation of Color Canvas, Color Picker from the Extended WPF Toolkit. I hope this will be useful to you if you are planning to add a color picker functionality in your WPF application.

Extended WPF Toolkit

Extended WPF Toolkit™ contains a collection of WPF controls, components and utilities for creating next generation Windows applications. Use it to build professional looking, modern, and easy to use line of business applications. The free, open source Community Edition comes with many useful controls and Plus version comes with some additional controls.

If you want to explore the Extended WPF Toolkit then Live Explorer app is available online as a Click Once app. Try it now!.

In this article we will go through the Color Canvas and Color Picker controls.

...

[Click through for the entire project]



Tags:

Follow the Discussion

No Comments

Sorry, no comments have been submitted yet.

Please make a comment below or check back later.

Comment on the Post

Already have a Channel 9 account? Please sign in