My First Silverlight Tutorial is Up on Silverzine.com

For those who aren't aware, a great resource for Silverlight designers launched a few weeks ago named Silverzine. It already has several tutorials worth checking out, all centered on not just Silverlight, but coming at Silverlight from the designer perspective - meaning primarily Expression Blend centric.

At some point after this site is redesigned this article will end up posted here as well, but with Silverzine around for such tutorials, I don't see much need for cross-posting it.


Initial Code Drop of Matchingo Now Available

The initial code drop of Matchingo is now available on CodePlex at matchingo.codeplex.com. This release contains the same functionality set as is currently featured in the Server Quest Contest, but the code itself has undergone major refactoring since that initial release.

The Matchingo codebase makes use of various technologies including:

Announcing Matchingo.com - An Open Source Silverlight Memory Game

I am very pleased to announce the launch of Matchingo.com. Matchingo.com is the main hosting page for my new game Matchingo - a Silverlight implementation of a matching game.

Matchingo includes several features including the ability to replay every game you play, track all your high scores, choose from various card and background image sets, and more. Matchingo was developed using C#, Silverlight, and the Composite Guidance for WPF and Silverlight (aka Prism).

Matchingo will be competing in the upcoming Server Quest Silverlight game contest, and will be posted as open source in the coming weeks on CodePlex.

But enough of all that, go check it out!

Announcement Coming Next Week

For those who are concerned, I have not fallen off the map - in fact I've been busting butt the last 2-3 months on a project which I will be announcing sometime next week. This project is relative to the Silverlight game contest that Microsoft is hosting, and is a derivative of a previous game project I had started in WPF.

See you next week!

A Decent WPF StatusBar Example

A simple, but hopefully decent, StatusBar example in WPF/XAML

Searching for information on new(er) technology can be pretty interesting. Sometimes you can find all the information you need, and other times you can't find anything. For whatever reason finding information on the StatusBar in WPF was one of those things where the articles written on the subject were slim pickings. Luckily it is really easy to reinvent the wheel in XAML if necessary once you know the basics.

It is pretty easy to create a StatusBar, it's just as you might imagine it would be in XAML:

<StatusBar> <TextBlock>Field 1</TextBlock> <Separator/> <TextBlock>Field 2</TextBlock> </StatusBar>

The problem is that typically you need something a little more advanced in your StatusBar. You'll probably want regions which can expand/contract, a tooltip to read the truncated text, some columns which are fixed width, and you probably don't want your items to go off the edge of the screen if the window is too small or the text too large either. Keep in mind that the StatusBar container behaves like a DockPanel when your trying to make use of it.

Attached is a XAML file of the StatusBar example shown above. The basic premise is that the StatusBar contains a Grid which defines the areas on the StatusBar, and some of the fields are allowed to be as large as they need while others will be truncated if they are too long to fit.

You can make any TextBlock show the Ellipses(...) by using the TextTrimming and TextWrapping properties, or in a Style definition like this:

<Style TargetType="TextBlock" x:Key="StatusBarTextBlock"> <Setter Property="TextWrapping" Value="NoWrap" /> <Setter Property="TextTrimming" Value="CharacterEllipsis" /> </Style>

.. just keep in mind that a TextBlock inside a StackPanel, or some other container allowed to grow horizontally indefinitely, will never show the ellipses because it will never actually be forcefully constrained - even if it is cut off and the full text isn't visible.

We also want to add the drag handle in the lower right corner of the Window, which can be done with the ResizeMode Window property like so:


Be sure to check out the XAML file attached and provide any suggestions you might have, or ask any questions, etc. Hopefully the keywords in this post will be good enough to help someone else down the line when trying to create a decent WPF StatusBar.

WPF Resource Monitor XAML Mockup

Every once in a while I'll get an idea for something I wish I had time to create. Today I did some searches for a resource monitor for my home server. I didn't want anything fancy, just something which showed resource usage at a glance and looks good. I didn't find much. It seems most performance monitors are commercial packages aside from Perfmon which ships with Windows.


Getting Started With WPF

I wrote the following blog entry for my company's intranet a few months back and had been meaning to share it publicly. Hopefully it will be of use to people trying to learn WPF from scratch:

Getting Started with WPF


WPF Unleashed - When I first went to a microsoft event over a year ago to talk about silverlight and WPF I was told that this book was the best book on the subject. I picked up a copy and let it sit on my shelf until almost a year later - and it was still considered one of the best books on the subject. This book is highly focused on XAML and UI creation in WPF, and is a good basis for learning XAML markup - expect to read a few pages, then play with the XAML, read a few pages, play with more XAML, etc.

Programming WPF - I recently picked up this 800+ page book and now that I am 150~ pages in I can firmly state that this book is worth the read. This book is almost the exact opposite as WPF Unleashed in that it talks very little of XAML, and focuses more on programming with WPF applications. Think of it as if you bought a book on coding WinForms applications - it wouldn't just cover the UI designer in Visual Studio, it would cover the hundreds of other things you need to know to create and distribute a real app. This book goes great with WPF Unleashed as they both cover totally different subjects. I also like that I can read this book for 20-30 pages at a time without doing any playing, instead mostly just trying to learn the technologies that are involved in WPF.


Kaxaml - Kaxaml is like XamlPad if you have played with that. It lets you write up loose XAML files and see what they look like real time. It was developed by a member of the Blend team, and the guy who runs nerdplusart.com (a blog worth following). This tool is a must have, and is without a doubt the best way to learn how to code XAML by hand (see tips below).

Expression Blend - This tool is sort of a devil in sheeps clothing. It is a really great application, but much like FrontPage it can be the creator of evil when it comes to XAML. It is worth learning Blend for advanced functionality such as animation, tweaning, paths, and maybe complex gradients, but it should in no way replace the need to know XAML itself. When you get Blend be sure to get the latest version - Expression Blend 2.5 June 2008 Preview, and be sure to check out this blog entry for how to get intellisense in Blend.

Video Resources:

WPF Boot Camp 2008 - There was a 3 day boot camp on WPF put on by IdentityMine (the company the creater of Kaxaml and owner of nertplusart.com works for) and other WPF top dogs earlier this year. This site has all the video footage from this boot camp, and best of all it is all free. When downloading the videos make sure you download the ones with '2MB' in the name if you want the highest quality (although the mp4 ones work pretty well for the iPod Touch as well). You can download these and watch them when your eyes get tired of reading books on WPF, that way you can become a total WPF learning zombie.

Lynda.com Expression Blend Videos - Lynda.com has about 6 hours of video training available for free on using Expression Blend. I would suggest you put these off until after you can write a whole UI and its resource dictionaries by hand in Kaxaml.

WindowsClient.net WPF Videos - WindowsClient.net has a section dedicated to WPF videos, these tend to be pretty short and to the point, and videos are being added about 1-2 per week.

General Tips:

  • Learn how to code XAML by hand before you even bother with Expression Blend. A recent interview on hanselman.com between a WPF designer and a WPF developer was very insightful to me. The designer made the point that much as no self-respecting HTML designer would only use generated HTML by Dreamweaver, no self-respecting XAML designer will ever use tools like Expression Blend without tweaking and improving the generated XAML by hand. You should get to know XAML by hand, and then use Blend to speed up the development of more complex features of XAML such as animations, etc. Get Kaxaml and learn the XAML first.
  • Being able to reproduce examples does not mean WPF is as easy as it looks. Many quick demos show off the 'wow' factor of Blend and how easy it is to make a Flickr browser for example, but this does not translate easily to a real application which you might need to create. Don't always just do examples in books or video tutorials, take the time to try and create something else on your own and see all the roadblocks you run in to and need to research.
  • Practice, Practice, Practice - the only way you are going to learn XAML is to do it. Expect a rather large learning curve, and become best buddies with Kaxaml.
  • There are significant changes to the application, window, and command models in WPF - be sure to suppliment learning XAML with learning the new programming techniques that go along with WPF as well - the aforementioned 'Programming WPF' book is essential for learning the real meat of WPF beyond just the XAML markup.
  • Web Resources:

    http://j832.com/bagotricks/ (the WPF bag of tricks contains full source and a demo executable showing off some of the k-rad advanced things you can do in WPF)

    http://www.dotnetkicks.com/ (use the WPF tag)
    http://blogs.msdn.com/expression/default.aspx (Expression Blend Team blog)
    http://www.hanselman.com/blog/ (use the WPF tag, and read about Baby Smash)


An Odd Error With CompositeWPF and Other Embedded Controls

I just spent a few minutes trying to figure out an odd error I was having in trying to add Kevin's WPF Bag-o-Tricks to my MemoryGame project. Apparently if you make use of such a 3rd party control (or anything with a different app domain) in one XAML file and then attempt to put that XAML page into another XAML page (whose project does not contain a reference to said 3rd party library) you will get this lovely error: