Designer Silverlight

Seeing as how I’ve already spent far too much time on this little project, barring major problems with this control (please point them out!) this will probably be my last version of the control. My ADD is kicking in and I need to work on something else.

If you’re interested in having the compact version of this control as a gadget, you can find it here.

Download Source for Color Picker Control

Download dll for Color Picker Control

Download Source for Color Picker Implementation (seen below)

Using the color picker in Blend

To add this to your application, just add the DLL above to your application by right clicking on the References folder in your Silverlight app.

Find the DLL and bring it into the application.

Open up the asset library (the bottom of the tool bar on the far left) and go to “Custom Controls”. You should find the ColorPicker in there.

Now you can just draw the whole thing right into your application.

Easy as pie.

You can swap between an extended view and a compact view by changing the “IsCompact” property. Compact view is basically gadget sized and expanded view can be as big as the screen if you want it to be.

Whenever you change the color, the control fires off a “ColorChanged” event. I thought that would be valuable for dynamic interactions. Hopefully you can find some fun uses for it.

First, glance over at Chris Szurgot’s post on creating a Silverlight Gadget. It really is as easy as he says it is. Just build your project in Visual Studio and in the html page replace the:

<param name=”source” value=”ClientBin/MySilverlightApp.xap”/>

with

<param name=”source” value=”x-gadget:///MySilverlightApp.xap”/>

There are a couple things that should be noted though.

Here is how to give your Silverlight gadget a transparent background.

It needed it’s own post.

Take note: If you plan on using any level of dragging in your gadget (like I use), I would recommend against planning on having anything transparent. The only way I can get it to work is if you make the Silverlight object windowless. An unfortunate side effect is that it looks like this also intercepts any sort of MouseDrag event and interprets it as “the user wants to move the gadget off the sidebar”. For me, this meant that I couldn’t commit to any action on my color picker since the whole thing was interacted via dragging.

Next, if you want to see a handle for your gadget (pictured below), you need to do one of two things.

The first is that if you host your application online and add the silverlight app via an <iframe />. For reasons that boggle my mind at 11PM, this works. The downside is that if your user is not connected to the internet when they boot their machine, they will be unable to use your gadget.

The other solution is to give your application some room to breathe in the html page. Basically, make the body size in your gadget larger than your silverlight app. When the user hovers over something that isn’t Silverlight, the handle will appear. But if you fill the whole gadget space with Silverlight, your app will block any indication that the mouse is hovering over it.

For a working sample, download my Color Picker Gadget as an example. Just download it, rename it from *.gadget to *.zip and extract all the files I used.

I’ve finally updated my Silverlight color picker and it was none too soon, if you ask me. I’ve been missing this thing ever since the last compatibility break. Here you can download the source.

Download Source for Color Picker Gadget

And here you can download the gadget.

Download Color Picker Gadget

And here you can check it out.

As you can see, I’ve updated a number of things, not the least of which was the fact that I was using a slider for the hue to the right in the old version. The new one uses an interface of my own because the slider wasn’t flexible enough for what I needed.

I also added functionality so that clicking on the color boxes selects all the text. I have a blog post on how to do that if you’re so inclined.

I’ve made some discoveries regarding creating Silverlight gadgets, but that is a post in and of itself. It’s coming.

One of the nifty little tricks I got working in my attempt to update my Silverlight Color Picker was that I wanted to have the entire content of a TextBox to select when I clicked on it. Imagine my surprise when clicking on the TextBox didn’t fire either a MouseLeftButtonUp or a MouseLeftButtonDown event!

This stunned me a little bit. Turns out there is a big discussion about this over at the Silverlight Forum. Long story short, I needed to add this code to my project (you’ll see it in my Color Picker project if you download it).

Add this code to your MyPage.xaml.cs file:

public class TextBoxClickable : TextBox
{
     protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
     {
           base.OnMouseLeftButtonDown(e);
           e.Handled = false;
     }

     protected override void OnMouseLeftButtonUp(MouseButtonEventArgs e)
     {
           base.OnMouseLeftButtonUp(e);
           e.Handled = false;
     }
}

Your XAML should define your namespace:

<UserControl x:Class=”MyProjectName.MyPage”
      xmlns:clickable=”clr-namespace:MyPage“>

And you can use your new clickable TextBox like this:

<clickable:TextBoxClickable MouseLeftButtonDown=”TextBox_SelectAll” />

If you’re like me and want to select everything in the TextBox with a single click, your method will look like this:

private void TextBox_SelectAll(object sender, MouseButtonEventArgs e)
{
     TextBox selectionBox = (TextBox)sender;
     selectionBox.SelectAll();
}

That’s it. I’ll post my updated color pickers in a couple hours.

Just for fun, I took my color picker and plugged into Robby Ingebretsen’s Silverlight Particle Generator. I had to make some tweaks to the XAML to alter the look to just what I wanted it to be, but you can check out the result here.

By the way, if you’d like a rock solid version of the color picker, let me know. My inclination is to re-write the whole thing as a custom control and give it support for things like two way color binding, make it a template-able control, that kind of stuff. The end result would be something faster, easier to use and more customizable, but I hesitate to put the energy into it if there is no desire for other people to use it.

So… let me know if you’re interested.

UPDATE from December 3: I’ve updated the Silverlight gadget, which is a stripped down version of the Silverlight control. I’ll be getting the more robust control out shortly. You’re more than welcome to download the gadget source and deconstruct.

Update (12/05/08):

Updated Color Picker Utility

UPDATED (12/05/08):

Updated Color Picker Utility

UPDATED (09/29/08): I added an event to my user control. You can now use the ColorChanged event to figure out when the color has changed and subsequently apply that color. This invalidates my problem with the slider click events. All downloads are updated appropriately.

Download Color Picker Control Only

Download Color Picker Sidebar Gadget

Download Full Source Code for Project Below

I’m working on getting a tutorial up about how I made my color picker control, but I thought that in the meantime I could at least put up the code and how to use it.

This color picker is nothing more than a simple Silverlight user control with some attached properties. You could literally just add these files to your project and then start drawing color pickers all over the place.

The control has two modes. The default mode is the one seen here. This color picker can be resized to pretty much any size you want. You could make the whole screen a color picker if that was your whim. The second mode is a “compact” mode that reduces the color picker to size of a Vista sidebar gadget (130px by 200px).

Incidentally, if you would like that gadget, you can download it here. I now have it as my constant companion on my side bar.

To switch between these modes, simply flip the “IsCompact” property. Here’s an example app so you can see both color pickers.

(Sample removed due to incompatibility, please see the updated link at the top.)

You can grab the color from this color picker by watching the ColorChanged event, which delivers both the new color and the old color. There is also a “SelectedColor” property that can used. ColorPickerSolution

If you’d like to see how all this is working, I have the entire source code for the above project right here.

My biggest problem right now is that, for reasons I’ve yet to discover, the slider control (the rainbow colored bar on the side) is a black hole for mouse events, which is why the button doesn’t update when I drag it. If anyone knows why, please let me know. UPDATE: This problem has been invalidated by my implementation of the “ColorChanged” event.