One of the reasons I’ve been avoiding using WPF is for its difficulties in matching the look and feel of an application to the OS. When WPF first came out I opened up a Window, added some text and then tried to get it display in Tahoma, 8.25pt. After a couple of hours of hair pulling I realised that it just wasn’t going to work, so I closed that solution and haven’t touched WPF again for a few years.
Coming back to it now I find that the experience is much improved. In fact since I am running at 125% or 120dpi it actually seems to match the OS better now.
Here for example is a WinForms Form with three labels in it. At fist this looks file the simpler option, you only need to detect what OS you are running on and apply the correct font. However this is an unfair test as it uses auto-sizing controls, and while all controls resize to the contents in WPF only the label does in WinForms. Textboxes for example, require an explicit height (23px at 96dpi) and while the auto scaling options works quite well, it fails quite spectacularly if you change the font size of the form (to inherit a consistent font across all of your controls).
Here is a simple WPF window with a textblock. Notice how the text in the window looks lighter than that in the title.
<Window x:Class="ControlPanelMock.Window1"
xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<StackPanel>
<TextBlock Text="Window1" />
</StackPanel>
</Window>
I’m going to try some simple tests to see how bad my eyes are, but first I need a baseline. Lets take a second to examine the control panel home page.
According to the Microsoft User Experience Interaction Guidelines that text at the top “Adjust your computer’s settings” should be Segoe UI, 12pt. In fact we can quickly duplicate the font section of UI Guidelines with the following XAML.
<Window x:Class="ControlPanelMock.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="347" Width="400">
<StackPanel Margin="25">
<TextBlock Text="Window1 Default Text" />
<TextBlock Text="Title Bar Text - Segoe UI, 9pt" FontFamily="Segoe UI" FontSize="9pt"/>
<TextBlock Text="Main Instructions - Segoe UI, 12pt, #003399 " FontFamily="Segoe UI" FontSize="12pt" Foreground="#003399"/>
<TextBlock Text="Secondary instructions - Segoe UI, 9pt" FontFamily="Segoe UI" FontSize="9pt"/>
<TextBlock Text="Normal - Segoe UI, 9pt" FontFamily="Segoe UI" FontSize="9pt"/>
<TextBlock Text="Emphasised Text - Segoe UI, 9pt, Bold" FontFamily="Segoe UI" FontSize="9pt" FontWeight="Bold" />
<Border><TextBlock Text="Editable Text - Segoe UI, 9pt" FontFamily="Segoe UI" FontSize="9pt"/></Border>
<TextBlock Text="Disabled Text - Segoe UI, 9pt, #323232" FontFamily="Segoe UI" FontSize="9pt" Foreground="#323232" />
<TextBlock Text="Link - Segoe UI, 9pt, #323232" FontFamily="Segoe UI" FontSize="9pt" Foreground="#323232" />
<TextBlock Text="Disabled Text - Segoe UI, 9pt, #0066cc" FontFamily="Segoe UI" FontSize="9pt" Foreground="#0066cc" />
<TextBlock Text="Links (Hover) - Segoe UI, 9pt, #3399ff" FontFamily="Segoe UI" FontSize="9pt" Foreground="#3399ff" />
<TextBlock Text="Adjust your computer's settings " FontFamily="Segoe UI" FontSize="12pt" Foreground="#003399"/>
<TextBlock Text="System and Security " FontFamily="Segoe UI" FontSize="12pt" Foreground="#006e12"/>
<TextBlock Text="Appearance and personalisation " FontFamily="Segoe UI" FontSize="12pt" Foreground="#00ae1d"/>
</StackPanel>
</Window>
Now the last three lines of the above are special, and entered to directly replicate the look of the control panel as before, so lets compare
Control Panel
WPF
The first thing I note is that the OS cleartype seems to be a using a different algorithm to the WPF. Note how the colours are truer with the OS rendering. In fact if you examine the vertical stick of the ‘d’ in ‘Adjust’ on WPF you note that while the centre pixel is #003399 on the OS rendering, it is #0033a2 on the WPF, although if you examine pixels in a horizontal run such as the top of the ‘o’ or ‘s’ then WPF does manage to generate most of them with the correct colour.
One of the most annoying parts of Font rendering is that setting either SnapsToDevicePixels="False" or SnapsToDevicePixels="True" has NO effect.
Summary
On the whole WPF’s UI layout engine is much more capable of rendering UIs that correctly scale to match the system DPI, unfortunately it seems let down by its cleartype engine, which isn’t pixel perfect. Is this likely to be an issue?
UPDATE
Looks like its going to be fixed properly in WPF 4.0 http://blogs.msdn.com/text/archive/2010/03/05/additional-wpf-text-clarity-improvements.aspx
My application is the bottom window, the top is media player. Thanks to the little mermaid for providing a nice desktop to show off the glass effect. MVC framework Behind the scenes it uses an MVC library which significantly simplifies the logic, keeping everything in sync. I described this in my previous post as I realised that there were two models, one for download information and one for processing activity. This library is very successful in simplifying threading concerns as well as it includes an IInvokableView interface which allows view to handle this very succinctly. In fact I even provide a rich base hierarchy which mean that implementing a new view whether its on a a label or a glass label, takes about 3 lines of code. I'm toying with the idea of moving this whole framework into the component space so that you can just drop views into the design space and wire up the properties of controls straight to them. HCI, Look and feel Everything is drawn using transparency and I've tried to stay close to the overall look Vista glass. All corners are rounded and colours muted to keep a soft look in keeping with the transparency. The list is guaranteed not to be more than ten items so instead of scrolling I resize the the window, or rather I use an animated resize to change the size slowly. Items of interest get a glow to help bring the them to the eye. Due to the way that each item in the list can have sub rows, I also included a hover highlight, but so far I've avoided using a selection as that would imply that operations can be performed at the row level. Instead the list gets a click handler that informs which piece of text or image was the contact point, and lets you know which item that belongs too, should that help. The status bar at the bottom basically has two indicators which show either current actions or issues. As soon as the action is completed we take away the glow and start to fade the colour to mid-tones with alpha, again using animation. What does the application do It reads an RSS feed for page URL's then scans through the pages linked to find a download URL. This is converted into a BITS operation which pulls down the file and wakes the application up again. The idea is not to run it as an icon in the system tray, but instead just have it run every day to have a look at what is available, and if there is nothing to do then get out of memory. Don't you wish more applications did this, instead of hogging your memory just so they can 'quick launch'?