Designer WPF

I’ve signed up for MIX 09, so I’ll be headed to Las Vegas this March. If you’re thinking about it, they’re having a pretty solid promotional where you can register for 40% off the standard cost with the RSVP code “MIXspecial1″.

Go do it

Interesting stuff happening at MIX this year…

Johnny Lee, whose idea of using the Wiimote for multi-point interaction I shamelessly ripped off,  will be giving a session on Interaction Techniques Using the Wii Remote (and Other HCI Projects). I’m curious to see if this gives us anything more than what we’ve seen in his previous videos.

Robby Ingebretsen is running the Design Fundamentals for Developers workshop. Robby has a great design sense and his talks are always entertaining. On the other side of that, there is the Cynergy workshop with Rick Barraza, Michael Wolf and Jose Fajerdo on Developing for Experience with 3 Heads. It would be a tough task to find a better design/development team and I look forward to their workshop.

Anyway… have a great holiday. I’m probably going to be offline for a while…

Karsten Januszewski has a post on getting intellisense into Blend. Apparently it only works for WPF (it “works” for Silverlight, but it pulls from the WPF XML schema, which sounds like it could be more confusing than useful).

I’ve been begging for this for a while. I’m glad to see it in there… its has easily been the biggest missing feature in an otherwise fantastic product.

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.

Ha, fooled you! This is actutally how to write a custom event (with event handlers and everything!) in C#, but it turns out that you don’t need to change a damn thing about it to get it to work in Silverlight. (It’s always the “what do I have to change?” question that stumps me.)

I know that this is old hat for you seasoned developers out there, but it was news to me… and vitally important for updating my color picker project.

Anyway, it unsurprisingly comes from O’Reilly. If you are so inclined, you can go check it out.

Warning: This is a poor solution if your gadget has any level of dragging interaction in it. The “windowless=true” step will make it so that any dragging interaction will be interrupted by the gadget, which will interpret such a move as an attempt to drag the gadget off the side bar.

Giving your Silverlight gadget a transparent background is actually quite simple. First, follow the directions from Chris Szurgot’s post on Silverlight gadgets. No point in duplicating his work.

When you’re done, create a transparent png file. Or download this one.

Now, head over to your html file. Get rid of all CSS background information. Add the following just below the body tag:

<g:background id=”background”
src=”transparent.png”
style=”position:absolute;top:0;left:0;z-index:-999;no=repeat;“ />

Finally, change the following params in the Silverlight object host.

<param name=”background” value=”transparent” />
<param name=”windowless” value=”true” />

And that’s it.

Additional Warning: It looks like there is no solution yet for the pink halo around any anti-aliased pixels in a Silverlight gadget.

This is a problem that transparent Silverlight gadgets have had for some time now. If that doesn’t bother you then you’re all set.

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.

Here’s a Mac style Button tray I whipped up. I think it’s a neat concept and I’d love to see some more of this kind of dynamic interfaces in Sivlerlight.

Actually, I’d love to see more dynamic interfaces in general.

The source code is a mess right now, but you’re welcome to it if you’d like.

Download Project files for Mac Style Button Tray

I’ve said this a couple times, but I’ll say this again… if you’re writing animation tweening in code for Silverlight, you’re doing it wrong. Take advantage of the Silverlight animation engine… it’s awesome. This sample actually creates the animations in XAML and then manipulates just the properties that we need to be dynamic in the code. Then it lets the Silverlight engine take care of the rest.

I’ve surrounded the tray with a border to give an indication of where interaction is possible.