Using Telerik's Color Selector inside Visual Studio - Designer mode

Thread is closed for posting
2 posts, 0 answers
  1. Curtis
    Curtis avatar
    75 posts
    Member since:
    Oct 2014

    Posted 24 Jul 2017 Link to this post


    Telerik Product and Version

    Product requirements are UI for WinForms

    Version supported - any.

    Supported Browsers and Platforms

    Components/Widgets used (JS frameworks, etc.)


    Replace Visual Studio IDE Color Selector with my Own built using RadColorSelector

    First off - I'm using VS 2017, not 2010 and I'm using .Net 4.6.1, not 4.0 but I built this in 4.0 and VS 2010 to demonstrate downward compatibility.


    This is a sample Telerik Winform Project with a single form and a simple User Control to demonstrate how you can replace the Visual Studio IDE with your own editor - In this case it's the default Color-Selection tool in the Properties window that I personally dislike so I've replaced it with my own, built using Telerik's RadColorSelector


    My User Control will import System.ComponentModel as well as set the default property and event for the User Control (When you double-click on the User Control on your Form in the Designer, the Code window will automatically pop-up with the default event I've defined.)


    Since my User Control inherits from a Panel, I also tell the IDE to use the same icon as the Panel control.  Here's what that code looks like:


    Imports System.ComponentModel

    <Serializable(), System.Drawing.ToolboxBitmap(GetType(System.Windows.Forms.Panel)),
    System.ComponentModel.DefaultProperty("BorderColor"), DefaultEvent("Paint")>

    Public Class BorderPanel

       Inherits Windows.System.Forms.Panel


    *NOTE* The ToolboxBitmap won't work for User Controls built INSIDE the same project you're working on - I don't know why, I just know it doesn't so in VS 2010 you can expect to see the lovely gear while in 2016+ you'll see the happy lil guy standing in front of a small box.  I just do it out of habit anymore even for User Controls that will only ever exist inside the current Project.


    In order to replace the IDE's default "Color Selector" with my own, you have to include the files found in _ColorPicker sub folder in the attached Zip file and of course I'm using RadColorSelector so you'll have to either have created a Telerik Windows Forms Application which will automatically include the libraries required or you'll have to manually add them to your references...either way you have to have Telerik.WinControls, WinControls.UI and TelerikCommon libraries included in your references.

    Once you've done that you'll have to REBUILD your project...this is code that runs INSIDE the IDE and until you compile it...nothing gonna happen :)


    Anyway - once you've added the files in the _ColorPicker sub folder now all you have to do is tell the ComponentModel that you're replacing its default editor with your own like this (I'm going to pick on BorderColor because it's not one of the inherited properties.)

    Private _BorderColor As Color = Color.Black
    <Editor(GetType(ColorEditor), GetType(System.Drawing.Design.UITypeEditor)),
    Description("The Border Color"), TypeConverter(GetType(SimpleColorConverter))>
    Public Property BorderColor() As Color
    Return _BorderColor
    End Get
    Set(ByVal value As Color)
    _BorderColor = value
    End Set
    End Property


    If your original Color is a "System" or "Named" color - it will automatically flip to that Tab on the editor AND select the correct color but unfortunately I haven't been able to figure out how to get the Telerik RadListControl to scroll so that element is visible...I'm sure it's something I'm overlooking but for me, for now, 90% of my colors are custom so I'm rarely in either of those tabs anyway.


    If you want to replace one of the inherited color properties - instead of Public Property BLAHBLAH you'd include the Overrides keyword like this:

    <Editor(GetType(ColorEditor), GetType(System.Drawing.Design.UITypeEditor)),
    Description("The Background Color"), TypeConverter(GetType(SimpleColorConverter))>
    Public Overrides Property BackColor As System.Drawing.Color


    Lastly - we're actually creating our own Dialog Box and telling the IDE to use IT instead of the default but the bottom line is - this IS a dialog box which means you can use it in your applications too...I mention this only in passing because Telerik's RadColorDialog is far superior.


    Anyone is welcome to use this - its been customized for my own purposes but the code in extremely simple to follow so for example if you wanted to show the Custom Colors boxes, you can just by flipping the ShowCustomColors Boolean from False to True. 


    If anyone has any questions I'm happy to try and answer as best I can.





  2. Dimitar
    Dimitar avatar
    2984 posts

    Posted 25 Jul 2017 Link to this post

    Hello Curtis,

    Thank you for sharing this with the community. I am sure that someone will benefit from it. 

    I have updated your Telerik Points as well.  

    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.