Designer WPF

This is really more for me so I can remember where I put things:

• WPF Pixel Shader Effect Library is up on Code Plex. I’m not sure where I would use them in a business app, but there they are.
• The October release of the WPF Toolkit is out and now contains the V1 of the DataGrid as well as an early version of a default DatePicker/Calendar control (thank God!). Additionally (and importantly) the Visual State Manager that we use in Silverlight is being integrated into WPF. This release has a preview of that. Sweet.
• Veracity Solutions (the company I’m with) has put up a brand new ASP.Net/MVC/Silverlight site. I worked on many of the Silverlight components there. It is a little slow loading, but there is some good stuff there. If you’re looking for a company to do line-of-business in WPF or Silverlight, check us out.

I fought with this for a while today, so I thought I would toss it up as a solution.

I was trying to create a transition between two screens for a project I’m working on. I created the two ContentControls in my XAML like so:

<ContentControl x:Name=”OldContent”>
      <!– My Old Content –>
</ContentControl>
<ContentControl x:Name=”NewContent” Opacity=”0″>
      <!– My New Content –>
</ContentControl>

Let’s say for the sake of this post that I was trying to animate the top content as a fade in and then, after the animation is done,  put the top content into the bottom content so that I could fill the NewContent with something else and have it ready for the next transition.

So… I’m using the following animation.

<Storyboard x:Name=”TransitionContent”>
   <DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″
         Storyboard.TargetName=”NewContent”
         Storyboard.TargetProperty=”Opacity”>
                <SplineDoubleKeyFrame KeyTime=”00:00:00.03″ Value=”1″ />
   </DoubleAnimationUsingKeyFrames>
</Storyboard>

(No Blend stuff today because I’m going a mile a minute for the sake of my looming project deadline.)

I add a “Completed” event handler to my Storyboard so that I can swap the content when the animation is over.

<Storyboard x:Name=”TransitionContent” Completed=”TransitionContent_Completed”>

In the C# code behind, I first wrote my content swapping like this:

this.OldContent.Content = this.NewContent.Content;
this.NewContent.Content = null;

And I got the following exception:

“System.ArgumentException was unhandled by user code
      Value does not fall within the expected range.”

I’m putting this in because it took me quite some time to figure out what the problem was. Simply put… Silverlight was yelling at me because I was trying to put the same stuff in the visual tree twice. This would have meant two copies of anything with a x:Name attribute… which would have been made it really hard for me to find anything. So it threw an exception.

Ultimately, I had to create an object to store the value of the NewContent  and then trash the NewContent.Content before I could put it into the OldContent.Content. I’ve re-written the code in such a way that if you wanted to swap the two contents, it will do just that.

private void Storyboard2_Completed(object sender, EventArgs e)       
{
            object oldStuff = this.OldContent.Content as object;
            object newStuff = this.NewContent.Content as object;

            this.OldContent.Content = null;
            this.NewContent.Content = null;

            this.OldContent.Content = newStuff;
            this.NewContent.Content = oldStuff;

            this.NewContent.Opacity = 0;
}

That last little bit is to reset the NewContent so that it is ready for the next transition.

And that’s all there is to it.

I’m totally slammed until PDC, but I need to make a mental note for the cool stuff that has come up over the last couple weeks.

• Josh Smith and Crack.Net - Josh Smith has a release of a free developer tool for .Net applications. Wildly popular around the office.
• Opacity Masks in Silverlight - Imran Shaik has a good post on using Opacity Masks. I’ll have something up on using a vector mask (known as a “clipping” mask in Silverlight) soon.
• A collection of XAML Gradients - if you’re looking for some colorful starting points, Imran Shaik has a set of good Silverlight-y gradients.
• If you haven’t seen it yet, the Microsoft Patient Journey Demonstrator has been upgraded to Silverlight RTW. Do yourself a favor and check it out.
• Looking for some nice looking Silverlight control templates? Dave Crawford has some spectacular designs up and running. Very slick.
• Silverlight Contrib has a new Silverlight Color Picker that is pretty slick as well as a “Mac Style” menu that is interesting. Go here to sample and here to download the source.
• Jesse Liberty gives as great jumpstart guide to Silverlight. (What tools, skills, technologies and books are good for learning… it’s all there.)

There’s stuff coming, but Veracity (the company I work for) is having a huge push right before PDC, so it’s back to the salt mines.

I’m in the middle of trying to update my life to Silverlight RC0. Starting in a week or so, I’ll be trying to update my samples to RC0 and I’ll be creating new Silverlight samples in RC0.

I’m putting the color picker control on hold until after PDC so that everyone is on the same Silverlight page.

Thank you for your patience.

David Anson has put up a pretty cool application for looking at the default templates for Silverlight 2 controls. It works with Silverlight 2 RC0, which was released just this last week.

This is pretty freaking awesome stuff for anyone doing design in Silverlight.  Go check it out.

A note: I would comment more about RC0 except that I’m doing alot of work with Silverlight that needs to be working with today’s plugins and it is my understanding that RC0 stuff may not work with the current plugin. If I’ve misunderstood, someone correct me please.

Super cool new thing I learned today. In WPF, we can make it so that the drop down (popup) on a ComboBox displays the data in a ListView. Because of the fact that I believe the DataGrid will eventually overtake the ListView as the gold standard for data display in WPF, we’ll do it both ways.

This tutorial is done entirely in Blend and without a line of code.

Step 0) (for the DataGrid only)

Go to Code Plex and download the WPF Toolkit. Extract to a convenient location.

Right-Click on the References folder in your project tab and click “Add Reference…”

Navigate to the location you extracted the WPFToolkit.dll file, select it and hit OK.

Step 1) Select the ComboBox you wish to change and edit the ControlTemplate by right-clicking and selecting “Edit Control Parts (Template) –> Edit a Copy…”

Step 2) Find the ItemsPresenter. This is what would normally display our ItemsSource.

We’re going to get rid of it. And the ScrollViewer for good measure.

Step 3) Where the ScrollViewer is, put in a ListView or a DataGrid, whichever one you’re using.

Now, go the properties of that ListView or DataGrid and click on the box to the right of “ItemsSource”

and, in the resulting menu, select “Template Binding –> ItemsSource”.

Set the DataContext of the ListView or DataGrid to the DataContext of the parent ComboBox using the same process.

And… you’re done! Open the ComboBox and you will see that you can select items in the ListView or DataGrid in the ComboBox dropdown and see those items change the selection of the ComboBox.

You’ll notice that this is probably not yet an ideal solution. For example, when we select an item, the dropdown doesn’t automatically close. Your best bet is to use the SelectionChanged event to trigger some logic to close the ComboBox dropdown.