Loving WPF and Visual Studio is easy

Best-in-class Design View

Meet XAML, the view templating, stylesheet and animation describing, event triggering, and callback firing markup beast.

Imagine CSS + JS + HTML all in one neat markup. No, that’s not good enough.

Imagine Sass + EmberScript (MVC aware CoffeeScript) + Mustache + LiveReload + Guard watching and refreshing changes to files made by your IDE. That’s XAML-level of zen!


See those app-icons sitting in my wannabe-dock? They aren’t defined in the view. They come from the ViewModel. Pfft” you say, “a fixed array of images, big deal! Oh no, that’s not what is going on. A real live breathing ViewModel is generating those icons at design-time. The rest of the application is not running.

The View’s ViewModel is initialized through a XAML one liner: d:DataContext=”{d:DesignInstance vm:DockPanelVM, IsDesignTimeCreatable=True}” . This “DockPanel” VM does some fun stuff:

var apps = ProcessHelper.GetRunningAppList();

foreach (var app in apps)
	Dbg.Print("{0}   \"{1}\" [{2}]", app.ProcessName, app.MainWindowTitle, app.FilePath);

	// checks the skin/theme folder for icons to override the built-in icon
	var iconOverride = GetIconOverride(app.ProcessName);

	BitmapSource icon
		= iconOverride != null
			? new BitmapImage(new Uri(iconOverride, UriKind.Absolute))
			: Helpers.IconExtractor.GetBiggestIcon(app.FilePath);

	Dbg.Print(" -> icon size {0}x{1} {2}", icon.PixelWidth, icon.PixelHeight, icon.PixelWidth >= 128 ? "(HD Icon)" : "(SD Icon)");

	Icons.Add(new ViewModels.DockIconVM()
		AppInfo = app,
		IconOverride = icon,
		Text = app.ProcessName

It gets the list of currently running processes, enumerates their windows, and extracts their icons. You don’t want to see what’s inside Helpers.IconExtractor.GetBiggestIcon() . Think: dllimports, LoadLibrary/LoadResource(), handles to icons, Marshal.Copy() and GetIconOverride()  hits up the file-system and checks whether certain files exist

The VM updates an ObservableCollection of Icons. This automatically notifies loosely-coupled bindings. In response, the View redraws itself, parading newly loaded icons.

This approach is quickly making its way into the web world through Knockout.js and Ember.js

Oh and you can debug the ViewModel code as it runs inside Visual Studio. System.Diagnostics.Debug.Print()  will output in a way that SysInternal’s DbgView picks up when you enable it’s “Capture Win32” option.

DbgView at work

If you don’t have every single SysInternals tool in your Tools folder,  get them immediately.

Fast Iteration is the secret to pixel-perfect and beautiful code

C# compiles ridiculously quickly; there is no need for Makefile hackery with parallel compilation or unreliable incremental linking. It just works. But checking up on your View by starting your app and navigating to a specific page is still a pain. This is why WPF gives you an amazing advantage:

The live Design View lets you tweak layout and styles without recompiling or starting your application. It runs the necessary code in the background without much scaffolding.

Iterate on, my friends.

Leave a Reply

Your email address will not be published. Required fields are marked *