UserControl in WPF considered harmful?

CodeCurve — Sun, 28 Sep 2008 20:14:33 GMT

I am currently working on a large app that is using WPF as its UI technology. I’m on a small team of talented developers (i.e. I think my colleagues are talented!) and we came at WPF six months ago from scratch, although everyone apart from me had WinForms experience.

As we built our app, we made frequent use of the WPF UserControl. I think the main reasons for this were:

Visual Studio lists UserControl as an item and this encourages its use.
It’s a convenient container for XAML that can be reused anywhere.
It feels WinForms-ish and allows you to do whatever you like in the code behind

As we got further into the project, however, it soon became apparent that UserControl allows you to do things that don’t fit very well with “the way of WPF” and we have pretty much refactored out every UserControl in the app, in favour of DataTemplate, ContentPresenter and custom controls, e.g. sub-classes of ContentControl.

This is very much inspired by the Prism project and the use of Model – View – ViewModel (see Dan Crevier’s blog for a good description of this), which we have found a very natural way of structuring the app.

From my experience so far, I’d observe the following:

DataTemplate rocks as a way of representing data in the UI
If you need to wire things up, bindings and triggers are the first things to think about
Code behind comes relatively low down on the list. Certainly, if a lot of behaviour is going in the code behind I would think quite hard about why.

I’m still in the early days of my journey with WPF, but I’m very impressed with DataTemplate and the use of M-V-VM. I wanted to get my experiences with UserControl out there and see if anyone else has had similar experiences. What are the legitimate uses of UserControl? Any comments?

Aligning text baseline in WPF

CodeCurve — Sat, 27 Sep 2008 17:19:20 GMT

I had a very frustrating experience last week trying to align the baselines of adjacent pieces of text in a WPF app. The problem seems to be that this is supported behaviour in a flow document, but not in general UI (e.g. the visual tree of a Window).

After a lot of fiddling, head scratching and googling we discovered that the easiest way to do this is to have two TextBlock elements inside an outer TextBlock. The following markup:

produces this end result:

The TextBlock has magically communicated with its TextBlock children and pulled them into line.

However, we are using a Label next to a ContentPresenter to present arbitrary data with a DataTemplate and we couldn’t find a way to automatically line up the baseline of text in each control.

This isn’t really surprising, since the ContentPresenter could present just about anything. It just so happens in our app that this is a line of text (with a different font size to the label next to it).

In the end, we had to resort to top aligning the Label (small font size) and the ContentPresenter (larger font size) and binding the Margin property on the Label to its FontSize property via a converter. This did the trick, but involved a hack because we couldn’t understand the Baseline property on the FontFamily class.

It seems from the MSDN docs that the Baseline property on this class should be the proportion of a font’s height represented by the distance from the very top to the baseline of the text, i.e. it should be less than 1. However, for Verdana it is 1.005!

The code in our converter ended up looking like this and I’m a bit shamefaced to be publishing it! I know that we will have to revisit this in the future and I’m frustrated that we couldn’t find an elegant solution to the problem.

The 0.75 bit is particularly gratuitous. Can anyone shed any light on this?