Designer Silverlight

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.

UPDATE (12/05/08):

Updated Color Picker Utility

UPDATE: I’ve posted links to all my code here.

I apologize, but I don’t have the time right now to go over how I made this, but I did want to take the time to show it off.

(Sample removed because of incompatibility with current version, please visit the updated post linked at the top)

Copy the following to paste this app into web page:

<iframe scrolling="no" frameBorder="0" src="http://silverlight.services.live.com/invoke/77530/ColorPicker/iframe.html" style="width: 300px; height: 200px"></iframe>

Download code for this sample (updated for RCW)

I was reading Mike Snow’s blog and he had a recent Silverlight tutorial on creating a Zooming toolbar. I looked at it and said to myself, “I think I can do that without code in Blend!” So here’s a tutorial on exactly that.

End product :

Big bonuses to this XAML-only method include:

• Much smoother animation
• Midway animation (if you fly over a button, it doesn’t need to animate all the way up before it starts to animate back down)
• Really low overhead
• Can be done and maintained entirely by a designer in Blend without any code

1) create a new Silverlight project in either Visual Studio 2008 or Blend 2.5.

2) In Blend, add a new folder for our images by right-clicking on the project and selecting “Add New Folder”

3) Pull in our images by right-clicking on our new folder and selecting “Add Existing Item…” Navigate to the images you want to use and select “OK” to bring them into the project.

4) Create the button to which you want to add the image and then double-click it in the Obejcts and Timeline pane so that it has a yellow outline around it.

5) Now, go to the image you want to insert (in the Project panel), right click on it and select “Insert”

OK… so now we have a button with an image in it. Now it’s time to make the sucker zoom.

6) Right click on the button and select “Edit Control Parts (Template) -> Edit a Copy…”

Name your custom Template and hit OK

7) In the “States” pane, you see a set of “CommonStates” (Normal, MouseOver, Pressed, and Disabled). Click on the MouseOver state and a red box will surround your composition, indicating that any changes made will be changes to the “Mouse Over” state, not to the default control.

Recording state:

8] Click on the highest level item in the template (in my case, it is a “Grid”) and go to the “Transform” section in the “Properties” pane and select the “Scale” transformation tab. Change the X and Y scales to “1.5″

If you run the project now, you’ll notice that we get a cool zoom in effect on the mouse over, but our zoom out when the mouse leaves the button is basically a snap back to the original size. Let’s fix that now.

9) Click on the the arrow icon in the MouseOver state in the States pane and select the “MouseOver -> Normal”

In the “Transition Duration” box, type “.2″

10) Extra Designer Happiness Bonus Step! – If you’d like to have a zoom effect that isn’t strictly linear, open up the timeline view with the button on the right hand of the state recording box (seen below).

Click and drag the keyframe (the light gray oval below) to the point you want it. I put mine at .3 seconds.

With the keyframe selected, you should see an “Easing” pane on the right. The default easing is linear (aka. no easing), but you can change the easing curve by just dragging the yellow dots. Here is the easing curve I’ve found works pretty well for my apps.

That’s it. Now you can just assign this template to a button and you’ll have this zooming functionality all set up.rcw_zooming_button

Over at Project Rosetta they have the post I’ve been waiting for: How to use mathematics to enhance user experiences.

They basically walk step by step through how we can use mathematics to create easing equations and pseudo-3D effects. They then use these principles to create the following application. Click and drag on a name to spin the interface.

Awesome.

I’ve been too quiet lately and I need to dump some links so I don’t forget about them:

• SVLite Effects from Cellbi – Amazing work with Silverlight… play around with their Carousel project in particular. Awesome.
• Silverlight.FX – From Nikhil Kothari, a very useful FX library with about a dozen kinds of transitions and effects. Download library here. View samples here.
• Silverlight Slider Solutions – From Tim Heuer, if you’re having trouble with the Silverlight slider, this is probably a good place for you.
• Project Rosetta – Familiar with Flash but looking to get into Silverlight? This is your place. It just started up, but design god Rick Barraza is a part of the group so it promises great things.
• Getting all your controls to have the same width in an Items Control – there really is no good way of summarizing what Josh Smith is doing here, but he’s using the fabulous Grid.IsSharedSizeScope property, which is not well known but is fantastically useful for aligning items (especially in WPF forms).
• Dragging, Docking and Expanding Panels in Silverlight Part 1, Part 2, Part 3 – Martin Grayson has a great series of posts on some more advanced interactions possible with Silverlight.