Experiments in WPF… Part 1

Just for the hell of it, I’m learning WPF and Silverlight (I’m sure it’ll be useful for work at some point).

Here’s the result of my second hacky experiment in building UIs. No real code behind this yet; just UI hackery – although it does show up on-screen and you can resize it:

WPF Facebook App

Let’s look at how this is built.

The Window and Border

First, I have a 4-pixel corner, 2-pixel wide on all sides Border element inside the Window and outside the DockPanel which forms the root of the UI layout.

The Window is set to have a transparent (null) background brush. It has a WindowStyle of None, AllowTransparency is set to True, and its ResizeMode is ResizeWithGrip.

You can move the Window by dragging any non-clickable control in the title-bar. This is achieved by adding an event-handler to the MouseDown event, checking if it’s the Left mouse button which is down, and then if it is, calling DragMove on the Window object’s instance from the handler.

Inside the window is a DockPanel, which forms the root of the layout. In the Top, we have the Title Area. In the Bottom, we have the Status Bar. Left as the last item is a ListBox which is going to fill the remaining space. (Although I still need to play around with this and maybe just switch it to a ScrollView; all of the clicking you’ll do on the app is via Hyperlinks as I see it right now).

The Title Area

The Title area is another DockPanel, where the Bottom docking area is filled with the Update Status TextBox and associated buttons (which is, itself another DockPanel).

After this in the file (so that the update status are fills the whole width of the window, but so that the logo stays flush-left instead of taking up the whole left-hand side) is the facebook logo, which is a simple Image element.

Filling the rest of the space, there’s a horizontal StackPanel, which contains the TextBlock containing a Hyperlink (the “more…” text).

The comment, like and share items are all Hyperlink elements inside a WPF TextBlock element.

The sneakiest part here is the use of a BulletDecorator in the “Update your Status” area. The name part – Simon Cooke in the diagram – is the BulletDecorator’s bullet, whereas the TextBox is the BulletDecorator’s content. The reason this is sneaky? Because this gets us the text on the left auto-aligned with the baseline of the text in the textbox. Pure awesomeness :)

The Status Bar Area

The Status Bar area (which will collapse when it’s not doing anything so as to not take up wasted space) is at the bottom of the first DockPanel. It’s literally a StatusBar control, with two StatusBar items; a TextBlock for the text, and a ProgressBar for the progress indicator. The only real trick here is the use of a margin on the ProgressBar of about 10 pixels, so that the sizing grip doesn’t overwrite it. (This should probably be grabbed from the system properties, but it isn’t yet).

The Main Window

The main part of the window (containing the status updates) is a ListBox, filled with a bunch of ListBoxItems. Each of these contains:

A Grid, with a 54-pixel wide column on the left, which the facebook user image goes into. The right-most column fills the available space.

The right-most column then contains a textblock with runs, spans, images, hyperlinks etc to fill in the relevant info for that item.


Well, it looks like the job of doing something that looks nice & stylized in WPF is pretty easy. Next up, I try to find out how hard it is to grab real live data and stash it in. (I’ll post the XAML code up at some point for those who are interested).

About the author

Simon Cooke is an occasional video game developer, ex-freelance journalist, screenwriter, film-maker, musician, and software engineer in Seattle, WA.

The views posted on this blog are his and his alone, and have no relation to anything he's working on, his employer, or anything else and are not an official statement of any kind by them (and barely even one by him most of the time).

facebook comments