The Visual Guide to WPF Font Weights

5. October 2009

Have you ever wondered what the difference between DemiBold and SemiBold text is? (the answer: not a whole lot). Have you ever wanted to go beyond "Normal" and "Bold" in your font weight selections? If so then this post is for you.

The following shows the different font weights (both names and numeric values) for the default UI font in Windows 7 and Windows Vista - Segoe UI at 24pt.

Segoe UI Font Weights

We can immediately see that Segoe UI supports a variety of weights, but why does 'Thin' (supposedly at 100-weight) look the same as 'Light' (300-weight)? The answer is the font itself - it only supports 4 different weights. Switching to Calibri we can see that it contains only two different weights.

Calibri Font Weights

The moral of the story is that WPF provides great typographic support for different font weights, but not all fonts will support all weights. Here is the XAML code to play around with different font families.

  xmlns=" "
  xmlns:x=" ">
    <Style TargetType="{x:Type TextBlock}">
      <Setter Property="FontFamily" Value="Calibri" />
      <Setter Property="Margin" Value="5" />
      <Setter Property="FontSize" Value="24" />
  <StackPanel >
<TextBlock FontWeight="Thin"  Text="Jackdaws love my big sphinx of quartz - Thin - 100" />
<TextBlock FontWeight="UltraLight"  Text="Jackdaws love my big sphinx of quartz - UltraLight - 200" />
<TextBlock FontWeight="ExtraLight"  Text="Jackdaws love my big sphinx of quartz - ExtraLight - 200" />
<TextBlock FontWeight="Light"  Text="Jackdaws love my big sphinx of quartz - Light - 300" />
<TextBlock FontWeight="Normal"  Text="Jackdaws love my big sphinx of quartz - Normal - 400" />
<TextBlock FontWeight="Regular"  Text="Jackdaws love my big sphinx of quartz - Regular - 400" />
<TextBlock FontWeight="Medium"  Text="Jackdaws love my big sphinx of quartz - Medium - 500" />
<TextBlock FontWeight="DemiBold"  Text="Jackdaws love my big sphinx of quartz - DemiBold - 600" />
<TextBlock FontWeight="SemiBold"  Text="Jackdaws love my big sphinx of quartz - SemiBold - 600" />
<TextBlock FontWeight="Bold"  Text="Jackdaws love my big sphinx of quartz - Bold - 700" />
<TextBlock FontWeight="UltraBold"  Text="Jackdaws love my big sphinx of quartz - UltraBold - 800" />
<TextBlock FontWeight="ExtraBold"  Text="Jackdaws love my big sphinx of quartz - ExtraBold - 800" />
<TextBlock FontWeight="Heavy"  Text="Jackdaws love my big sphinx of quartz - Heavy - 900" />
<TextBlock FontWeight="Black"  Text="Jackdaws love my big sphinx of quartz - Black - 900" />
<TextBlock FontWeight="ExtraBlack"  Text="Jackdaws love my big sphinx of quartz - ExtraBlack - 950" />
<TextBlock FontWeight="UltraBlack"  Text="Jackdaws love my big sphinx of quartz - UltraBlack - 950" />

Round Gel-like button template for WPF

26. April 2009
I keep re-creating this from time to time, so I thought I would put it up for others to use. This is a very simple style for rounded gel-like buttons (shown here magnified 3x, but the style works OK for buttons of various sizes). The left-most one is the "normal" style, the middle one is mouse-over and focused, and the right one is disabled. These are great with a slider to create "zoom" type controls, or for play/pause buttons etc.

Source Xaml

Where are the default templates for FlowDocumentScrollViewer located?

20. April 2009
Most controls in WPF are "look-less" and have no default rendering. Instead there are a number of "templates" that are applied by WPF. The control template is chosen by WPF, and can be over-ridden by the developer. In the absence of any developer intervention a default template is loaded from a resource assembly corresponding to the operating system that the application runs on (PresentationFramework.Aero.dll for windows vista styles and control templates, PresentationFramework.Luna.dll for windows XP etc). I was puzzled to learn that FlowDocumentScrollViewer and a number of other "document" type controls like FlowDocumentReader do NOT have control templates in these "theme" dlls. So where are they? It turns out they are stored in another ancilliary WPF dll called PresentationUI.dll in the themes/generic.baml resource. This dll also contains the "progress" download and error templates for XBAP applications.

Composite Application Guidance for WPF and Silverlight Released

17. February 2009
I'm not sure if I missed the memo, but P&P's Composite Application Guidance for WPF (formerly PRISM) is now live for Silverlight too (AKA PRISM V2)! Download it here.

Free reuxables WPF Theme - Paperlite available for a limited time

15. February 2009
Fellow WPF MVP Dax Pandhi's company nukeation has a free WPF theme called paperlite available for a "limited time"..
Their new ux kit (code-named "Alpha Dog") not-free looks fantastic.

New Window Chrome Materials - a not-too-serious look into the future

16. January 2009
Some time around 2004 apple began using a "brushed metal" look for some of the windows in OSX. In late 2006 Microsoft released Vista with its Aero Glass window chrome. Going further back we had a chiseled grey look-and-feel in many windowing systems (chiseled and grey implying stone?). Taking into account the obvious trend where window chrome is styled after real-world building materials, we confidenty predict that wood will be the substance of the future for mainstream operating systems. Agonising conversations regarding timber finishes and preferences that had previously been relegated to only the real world can now spill over into the computer one. Would you like a mahogany title bar and rosewood buttons? Would you like us to dove-tail the corners of the windows to make them stronger? The folks over at the WPF SDK blog have already given a great overview of current window chrome approaches. For ultimate window chrome customization I like Pavan Podila's [edit: fixed typo in Pavan's name]Fluidkit which contains the very useful "GlassWindow" style-able window control, and used it to create this beautifully finished window with a mahogany titlebar, trimmed with brushed silver and given a satin finish for the discerning computer user.

Or for the younger users there is this more european window style with a plantation pine title bar.
You can download the source here and build more of these windows for yourself. I used Wood Workshop from Spiral Graphics to create the textures. Later this week I'm hoping to bring you another hot tip for window chrome futures - this time with an emphasis on lightweight performance - yes, you guess it! Carbon-fibre window chrome!

WPF - A Year in Review

31. December 2008

.NET Framework 3.5 SP1 – The most significant thing on the WPF landscape in 2008 was .NET framework 3.5 SP1, released in September 2008. While service packs are traditionally about bug fixes and performance tweaks this release was a little different for the WPF team, as they added new features such as data template recycling, DirectX integration improvements like Direct3DImage, new controls like the WebBrowser control, a slew of performance improvements and changes to the application model and deployment. The most visible change was the addition of programmable pixel-shader support, a replacement for the slow software-rendered BitmapEffects which were often responsible for WPF performance issues. The release of the public symbols for .NET 3.5 SP1 in October 2008 means you can “step thru” the framework code during your debugging session, which is extremely useful.  

Silverlight 2.0 and the Rise of Silverlight – Silverlight Version 2, which bears a much stronger similarity to WPF than v1 did, was released in October 2008. At around a 4MB download (including a mini CLR and .NET framework stack) it has only a fraction of the features of its older sibling WPF, but the team did a great job balancing size vs. usefulness, and you can do a heck of a lot with what they put into those 4MB. Due to its small size and cross-platform nature Silverlight has seen a much sharper adoption curve than WPF, and a huge amount of community interest. We are now in the interesting position of having features such as the Silverlight Datagrid and stuff from the Silverlight Control Toolkit being “back-ported” to WPF. Announcement such as this one from Scott Guthrie telling of 3D hardware acceleration coming in Silverlight 3.0 (due in beta some time in 2009), and speculation around additional off-line capabilities to compete with Adobe AIR mean that Silverlight will continue to be very hot for 2009. 

MVC, MVP and MVVM – This year the consensus amongst a number of WPF proponents seemed to solidify around the Model-View-ViewModel pattern, a slightly different twist on the Model-View-Controller (MVC) and Model-View-Presenter (MVP) patterns. MVVM (originally described here by then-blend architect John Gossman) leverages WPF’s great data binding support to improve the testability of presentation-specific business logic, and creation of ultra-thin Window and Control-derived classes. Microsoft Patterns and Practices also released their composite guidance for WPF (formerly known as PRISM) to help customers build maintainable WPF applications.

Improved Tooling – in addition to improvements to the “core” WPF development/design tools with service packs for Visual Studio 2008 and Expression Blend 2, 2008 saw a number of tools and utilities from the WPF community come into their own, such as Robbie Ingerbretsen’s Kaxaml, Karl Shifflet’s MOLE and Josh Smith’s Crack and Pixel Shader editing tool Shazzam by Walt Ritscher. Microsoft also released an update of the WPF performance toolkit, and ETW tracing tool XPerf (which can be used for both Silverlight and WPF, in addition to many other things).

The Future – One of the best signs for a continuing bright future for WPF was the announcement that dev10 (Visual Studio 2010) will use WPF for a number of elements in the Visual Studio shell including one of the most key features – the text editor itself. Developer division’s internal “dog-fooding” of WPF will ensure it gets important attention in performance tuning and extensibility areas. PDC 2008 saw some discussion of a roadmap for WPF in the PC46 talk, but I found this one a bit lack-lustre. There were also some announcements regarding further improvements to the XAML language.

Overall I think 2008 was a great year for WPF as a platform, and I can’t wait to see what the future has in store for us. What were your big milestones for WPF in 2008?

XAML Complier has issues with linked xaml files

15. November 2008

I thought I would post a short explanation of a small issue I encountered recently with the XAML compiler, in particular with its treatment of linked XAML files. Linked files can be created for all kinds of project files, most commonly code files like .cs or .vb files but it can be anything else. This is almost always done to when you need the same thing in multiple places but don't want to go to the trouble of managing two copies of it. They are added by changing the option in the open file dialog triggered when you choose "add existing item" in your project from 'add' to  'add as link' as shown below.

Open File Dialog with the 'add as link' option selected

XAML files linked in this way will compile fine, but the relative path from the root of the project used as the key when retrieving them is lost when they are linked. Assuming we had a project structure like this. A project Foo contains a folder called resources, which in turn contains a XAML resource dictionary called stuff.xaml. Project Bar also has this same structure, but stuff.xaml has been added as a linked file from the Foo project.

Project Hierarchy

If we open up these two using reflector we see that in Foo the path to the resource dictionary has been specified correctly.

Foo project resource keys

In the decompiled output for Bar we can see that they key to stuff.baml is different.

Bar Resource Keys

Because resource keys are so...err...key in locating and using them this will substantially affect most usage scenarios for this resource. One way to work around this problem is to factor these resources out into a library DLL that just contains these resources, however this doesn't work with all resource usage scenarios.

AOL Silverlight-based RIA mail client debuts

25. October 2008

Hot on the heels of the Silverlight 2.0 release last week is a beta version of the AOL RIA mail clientpreviewed at Mix08 and built on Silverlight 2.0.

AOL RIA Email Client

(I just signed up but who knew their contextual advertising would catch on so fast!) Although the beta is missing the "HALO" theme featured at Mix08, it does feature 3 themes including Onyx (the default, shown above) "classic" which is themed similarly to a number of other AOL web properties, and a Hubble space theme.

AOL RIA mail client themes

Cursory analysis of the app suggests the vast majority of it is built in silverlight, including (it seems) the editing widget which at the time of Mix08 was still being done with DHTML. We'll do more digging and let you know.


WPF Shader Effects Community Project Launched -

7. September 2008

The recent release of .NET 3.5 SP1 adds hardware-accelerated pixelshader effects to WPF. In addition to replacing a number of the slow software-rendered BitmapEffects with shiny, fast hardware-accelerated ones they also added the ability to write your own effects. In order to provide an easy-to-digest package for those who don't want to write shaders themselves, but DO want to add cool effects to their app I created a community shader project, hosted on codeplex at . If you're a graphics wonk chances are you can write much cooler effects than the ones I've already build, so please feel free to contribute.

Here is an overview of the effects in the 0.1 release:

Negative Grayscale Sepia Bloom Motion Blur
Negative Gray-Scale Sepia Gray-Scale Gray-Scale

Also I've been fortunate enough to enlist the help of a _real_ graphics wonk already, who added a nice radial blur effect. Thanks OJ.

Radial Blur