Click here to Skip to main content
Click here to Skip to main content

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

, 2 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Color Picker tool for Visual Studio IDE, VSPackage walkthrough.

Introduction

Intgrated 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.

Integrated Color Picker for Visual Studio

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

Integrated Color Picker for Visual Studio - Visual Studio Package

Here I have selected New Project->Other Project Types->Extensibility then after selecting Visual Studio Package project template I named the project name as Color Picker . Now click OK to countiniue.

Note: If you don't see the Visual Studio Package under Other Project Types then you must install the Visual Studio SDK. For more information about the Visual Studio SDK, see Extending Visual Studio Overview. To find out how to download the Visual Studio SDK, see Visual Studio Extensibility Developer Center on the MSDN Web site.

Use the following options in Visual Studio Package wizard.

Page 1 of 7 - Select a Programming Language

Select your language as Visual C# and Generate a new key file to sign the assembly.

Page 2 of 7 - Basic VSPackage Information

I have entered the Basic VSPackage Information as shown in the above picture.

Page 3 of 7 - Select VSPackage Options

Select Menu Command, By default this will add a Menu Item under Tools menu.

Page 4 of 7 - Command Options

Change the command name to "Color Picker"

Page 7 of 7 - Select Test Project Options

You should select Integration Test Project and Unit Test Project but for now deselect these. Smile | :)

Click Finish,

Visual Studio will now create the base Project for you. Now we have the Solution file ready, the solution file screen-shot is given below,

Let us Run ( F5 ) this application to see what we have got now.

Once we run the application, We can check the AddIn functionality in Visual Studio Expreimental Instance. If you click on the Tools menu in experimental instance then we can see the Command "Color Picker" as below

Click on the "Color Picker" menu to see the default code base in action.

Wondering how we got the Color Picker menu under Tools menu, In ColorPicker.vsct file we have mentioned the Menu Group parent as Tool Menu,

<Group guid="guidColorPickerCmdSet" id="MyMenuGroup" priority="0x0600">
  <Parent guid="guidSHLMainMenu" id="IDM_VS_MENU_TOOLS"/>
</Group>

and the Menu Item name and Icon are mentioned in <Button>

<Button guid="guidColorPickerCmdSet" id="cmdidColorPicker" priority="0x0100" type="Button">
  <Parent guid="guidColorPickerCmdSet" id="MyMenuGroup" />
  <Icon guid="guidImages" id="bmpPic1" />
  <Strings>
    <ButtonText>Color Picker</ButtonText>
  </Strings>
</Button>

The Icon is specified in <Bitmaps><Bitmap> and GuidSymbols are defined under <Symbols>. Use source.extension.vsixmanifest file to change the Icon and Preview Image which will be displayed in Extenstion Manager window. This file can be used to change the target visual studio versions and frameworks etc.

ColorPickerPackage.cs is used to add the menu item and its functionalities. The below code from ColorPickerPackage.cs is used to add the Menu Item to the IDE Menu.

/////////////////////////////////////////////////////////////////////////////
// Overridden Package Implementation
#region Package Members

/// <summary>
/// Initialization of the package; this method is called right after the package is sited, so this is the place
/// where you can put all the initialization code that rely on services provided by VisualStudio.
/// </summary>
protected override void Initialize()
{
    Debug.WriteLine (string.Format(CultureInfo.CurrentCulture, "Entering Initialize() of: {0}", this.ToString()));
    base.Initialize();

    // Add our command handlers for menu (commands must exist in the .vsct file)
    OleMenuCommandService mcs = GetService(typeof(IMenuCommandService)) as OleMenuCommandService;
    if ( null != mcs )
    {
        // Create the command for the menu item.
        CommandID menuCommandID = new CommandID(GuidList.guidColorPickerCmdSet, (int)PkgCmdIDList.cmdidColorPicker);
        MenuCommand menuItem = new MenuCommand(MenuItemCallback, menuCommandID );
        mcs.AddCommand( menuItem );
    }
}
#endregion

The MenuItemCallback will be called when you click on the Color Picker menu. Below I have given the default implementation of MenuItemCallback this interns Show the message box currently.

/// <summary>
/// This function is the callback used to execute a command when the a menu item is clicked.
/// See the Initialize method to see how the menu item is associated to this function using
/// the OleMenuCommandService service and the MenuCommand class.
/// </summary>
private void MenuItemCallback(object sender, EventArgs e)
{
    // Show a Message Box to prove we were here
    IVsUIShell uiShell = (IVsUIShell)GetService(typeof(SVsUIShell));
    Guid clsid = Guid.Empty;
    int result;
    Microsoft.VisualStudio.ErrorHandler.ThrowOnFailure(uiShell.ShowMessageBox(
                0,
                ref clsid,
                "ColorPicker",
                string.Format(CultureInfo.CurrentCulture, "Inside {0}.MenuItemCallback()", this.ToString()),
                string.Empty,
                0,
                OLEMSGBUTTON.OLEMSGBUTTON_OK,
                OLEMSGDEFBUTTON.OLEMSGDEFBUTTON_FIRST,
                OLEMSGICON.OLEMSGICON_INFO,
                0,        // false
                out result));
}

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.

I have named the WPF Window name as ColorPickerUI.xaml.

At first I'm going to add an xmlns to the recently added window that will enable us to use controls from Extended WPF Toolkit.

<Window x:Class="ShemeerNS.ColorPicker.ColorPickerUI"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        Title="ColorPickerUI" Height="300" Width="300">
    <Grid>
        
    </Grid>
</Window>

then after I have added three rows for the <Grid>, this rows will hold the actual controls.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <!--Row-1 Color Canvas-->
    <!--Row-2 Color Picker-->
    <!--Row-3 Copy Color Code-->
</Grid>

Now I have added Row 1 ( Color Canvas)

<GroupBox 
            Grid.Row="0"
            Header="Color Canvas:"
            HorizontalAlignment="Stretch">
    <xctk:ColorCanvas x:Name="_colorCanvas"                                             
                    VerticalAlignment="Top"
                    HorizontalAlignment="Stretch" />
</GroupBox>

Row 2 is given as below, (Color Picker)

<GroupBox 
    Grid.Row="1"
    Header="Color Picker:"
    HorizontalAlignment="Stretch">

    <xctk:ColorPicker x:Name="_colorPicker" VerticalAlignment="Top" DisplayColorAndName="True" ShowAdvancedButton="False" 
                ShowAvailableColors="True" ShowRecentColors="False" ShowStandardColors="True"
                ShowDropDownButton="True" Width="278" />
</GroupBox>

Row 3 is given as below (Copy Color Code)

<GroupBox 
            Grid.Row="2"
            Header="Get Color Code:"
            HorizontalAlignment="Stretch" Margin="0,2,0,5">
    <Grid  >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto"  />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Grid.Row="0"
                    Text="Alpha: " HorizontalAlignment="Left" Width="36" Margin="0,5,0,0"/>
        <CheckBox Grid.Column="1"
                    Grid.Row="0"
                    x:Name="_usingAlphaChannel"
                    IsChecked="{Binding ElementName=_colorCanvas, Path=UsingAlphaChannel, Mode=TwoWay}" Margin="0,5,0,0"/>
        <TextBlock Grid.Column="0"
                    Grid.Row="2"
                    Text="HEX: " Margin="0,5,0,0"/>
        <TextBox Grid.Column="1" x:Name="_hexvalue" BorderBrush="#FF617585"
                Grid.Row="2"
                IsReadOnly="True"
                Text="{Binding ElementName=_colorCanvas, Path=HexadecimalString}" Margin="0,5,0,0"  />

        <Button x:Name="btnCopy" Grid.Column="2"
                Grid.Row="2" Margin="2,0,0,0" ToolTip="Copy">Copy                  
        </Button>                
    </Grid>
</GroupBox>

To make the Color Canvas and Color picker to show the same color, I have added SelectedColorChanged method for both the controls as below

SelectedColorChanged="_colorCanvas_SelectedColorChanged"

SelectedColorChanged="_colorPicker_SelectedColorChanged"

Event definition is added in xaml.cs as below

private void _colorCanvas_SelectedColorChanged(object sender, RoutedPropertyChangedEventArgs<System.Windows.Media.Color> e)
{
    _colorPicker.SelectedColor = _colorCanvas.SelectedColor;
}
private void _colorPicker_SelectedColorChanged(object sender, RoutedPropertyChangedEventArgs<Color> e)
{
    _colorCanvas.SelectedColor = _colorPicker.SelectedColor;
}

The above codes will set the selected color of both controls same when any color change is happened. To copy the Color Code using "Copy" button", I have added the click event for Copy button as below

Click="btnCopy_Click"

and the definition added as below in xaml.cs file,

private void btnCopy_Click(object sender, RoutedEventArgs e)
{
    Clipboard.SetText(_colorCanvas.HexadecimalString);
}

Make sure you have referenced System.xaml in this project.

Full source code is given below, Full working source code is attached with this article.

ColorPickerUI.xaml

<Window x:Class="ShemeerNS.ColorPicker.ColorPickerUI"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
        Title="Color Picker" Height="430" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <GroupBox 
            Grid.Row="0"
            Header="Color Canvas:"
            HorizontalAlignment="Stretch">
            <xctk:ColorCanvas x:Name="_colorCanvas"                                             
                    VerticalAlignment="Top"
                    HorizontalAlignment="Stretch" SelectedColorChanged="_colorCanvas_SelectedColorChanged"/>
        </GroupBox>
        <GroupBox 
    Grid.Row="1"
    Header="Color Picker:"
    HorizontalAlignment="Stretch">

            <xctk:ColorPicker x:Name="_colorPicker" VerticalAlignment="Top" DisplayColorAndName="True" ShowAdvancedButton="False" 
                ShowAvailableColors="True" ShowRecentColors="False" ShowStandardColors="True"
                ShowDropDownButton="True" Width="278" SelectedColorChanged="_colorPicker_SelectedColorChanged" />
        </GroupBox>

        <GroupBox 
            Grid.Row="2"
            Header="Get Color Code:"
            HorizontalAlignment="Stretch" Margin="0,2,0,5">
            <Grid  >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto"  />
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" Grid.Row="0"
                    Text="Alpha: " HorizontalAlignment="Left" Width="36" Margin="0,5,0,0"/>
                <CheckBox Grid.Column="1"
                    Grid.Row="0"
                    x:Name="_usingAlphaChannel"
                    IsChecked="{Binding ElementName=_colorCanvas, Path=UsingAlphaChannel, Mode=TwoWay}" Margin="0,5,0,0"/>
                <TextBlock Grid.Column="0"
                    Grid.Row="2"
                    Text="HEX: " Margin="0,5,0,0"/>
                <TextBox Grid.Column="1" x:Name="_hexvalue" BorderBrush="#FF617585"
                Grid.Row="2"
                IsReadOnly="True"
                Text="{Binding ElementName=_colorCanvas, Path=HexadecimalString}" Margin="0,5,0,0"  />

                <Button x:Name="btnCopy" Grid.Column="2"
                Grid.Row="2" Margin="2,0,0,0" ToolTip="Copy" Click="btnCopy_Click">Copy
                </Button>
            </Grid>
        </GroupBox>
    </Grid>
</Window>

ColorPickerUI.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace ShemeerNS.ColorPicker
{
    /// <summary>
    /// Interaction logic for ColorPickerUI.xaml
    /// </summary>
    public partial class ColorPickerUI : Window
    {
        public ColorPickerUI()
        {
            InitializeComponent();
        }

        private void _colorCanvas_SelectedColorChanged(object sender, RoutedPropertyChangedEventArgs<System.Windows.Media.Color> e)
        {
            _colorPicker.SelectedColor = _colorCanvas.SelectedColor;
        }
        private void _colorPicker_SelectedColorChanged(object sender, RoutedPropertyChangedEventArgs<Color> e)
        {
            _colorCanvas.SelectedColor = _colorPicker.SelectedColor;
        }

        private void btnCopy_Click(object sender, RoutedEventArgs e)
        {
            Clipboard.SetText(_colorCanvas.HexadecimalString);
        }

    }
}

Output

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. 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Shemeer NS
Software Developer (Senior)
India India
Technology Specialist | CodeProject MVP | Visual Studio Gallery Contributor | Author | Geek | Netizen | Husband | ChessPlayer
 
Most of my articles are listed on top 5 of the respective 'Best articles of the month' and some of my articles are published on ASP.NET WebSite's Article of the Day section.
 
Check my contributions in Visual Studio Gallery and Code Project
 
Technical Blog: http://www.shemeerns.com
Facebook: http://facebook.com/shemeernsblog
Twitter : http://twitter.com/shemeerns
Google+ : http://google.com/+Shemeernsblog
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionVSPackage Addin in SSMS PinmemberVivek Goyal13-Jul-14 21:29 
AnswerRe: VSPackage Addin in SSMS PinmvpShemeer NS13-Jul-14 22:51 
GeneralRe: VSPackage Addin in SSMS PinmemberVivek Goyal13-Jul-14 22:59 
QuestionColor Picker fails on my VS2013 PinmemberMember 972686211-Jun-14 9:53 
AnswerRe: Color Picker fails on my VS2013 PinmvpShemeer NS11-Jun-14 10:09 
AnswerRe: Color Picker fails on my VS2013 PinmvpShemeer NS2-Jul-14 4:02 
QuestionVery good article! PinprofessionalVolynsky Alex1-Jun-14 9:45 
AnswerRe: Very good article! PinmvpShemeer NS11-Jun-14 10:12 
GeneralRe: Very good article! PinprofessionalVolynsky Alex11-Jun-14 10:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 2 Jul 2014
Article Copyright 2014 by Shemeer NS
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid