Designer Silverlight

Thanks to Joe McBride and Jason Alderman, who discovered this technique in some of Microsoft’s theme packs.

I’m trying something a little new… I’m going to post all future Silverlight tutorials on CodeRun, an online IDE. Basically, just follow the link below and click “Run” and you’ll see this in action. You can change the XAML at CodeRun to test it out, which I find exceptionally cool. Let me know if you a) like this or b) hate this.

Open this project on CodeRun.

This is just a little trick to get a nice flexible striped gradient in Silverlight or WPF. Our end product will look like this

Zoomed in:

Just adds some nice texture to the app.

First, go to the element you want to apply the gradient to and go to the (you guessed it!) gradient section in the background.

This will pull up the default black-to-white gradient that we all know and love. Give it two more gradient stops as close to the center as you can by clicking on the gradient twice. Make the two left stops the color of your stripe. For this example, I’m using a nice blue gradient with some transparency. I think it fits nice with the background. Also make the two right stops fully transparent. Should look something like this:

Dandy. Now click on the arrow to expand our options (seen at the bottom of the image above) and a new set of options open up for us to futz with. Let’s go ahead and set the following options:

• StartPoint = 0,0
• EndPoint = 1.5, 1.5
• MappingMode = Absolute
• SpreadMethod = Repeat

And that’s it! We can change the visible color to get something a little more appropriate to our background or we can change the EndPoint to make the stripes wider or at a different angle. But that’s all we need.

Here’s the XAML for reference.

<LinearGradientBrush
EndPoint=”1.5,1.5″
MappingMode=”Absolute”
SpreadMethod=”Repeat”
StartPoint=”0,0″>
<GradientStop Color=”#BF125881″/>
<GradientStop Color=”#BE6C9AE0″ Offset=”0.526″/>
<GradientStop Color=”Transparent” Offset=”0.544″/>
<GradientStop Color=”Transparent” Offset=”1″/>
</LinearGradientBrush>

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.

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.

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>