F#– WPF Component Development

This post will only deal about using F# for WPF custom component development; it is considered that the user has already knowledge about WPF custom control development.

The current F# support for VS2010 is lagging in some ways,

· Can’t create a folder, this directly affects the way we can define the generic.xaml file.

· XAML -> BAML conversion with MSBuild task

We can do workarounds in both the cases and make component development using F# language and that is what we are going to discuss here. If there is any other better way to go for it, do let me know in your comments.

Creating Folders in an F# project

Till the F# team include this support in VS2010 we need to do the below workaround,

· Edit the .fsproj in Notepad.

· Add the below line in <ItemGroup>

.fsproj code

<Resource Include="Themes\generic.xaml" />

<Compile Include=”NewFolder\somefile.fs” />

XAML to BAML conversion through code

WPF has an API Application.LoadComponent(Uri) which loads a resource, although it is a bit slow. For a WPF component to load its inner template, it requires the generic.xaml file to be loaded when the control is initialized. In WPF C# custom control library, the below code does that automatically,

C# Code

public class CustomControl1 : Control


static CustomControl1()


DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomControl1), new FrameworkPropertyMetadata(typeof(CustomControl1)));



Or we can just have the DefaultStyleKey overridden in the constructor,

C# Code

public class CustomControl1 : Control


public CustomControl1()


this.DefaultStyleKey = typeof(CustomControl1);



F# Solution

BAML conversion doesn’t work in F# because the MSBuild targets project for F# has issues when building the generic.xaml as a “Page” element.

On further investigation, I found that we can manually do the steps through code and make the control apply the template defined in XAML. Below are the steps that needs to be done,

1. Override the “DefaultStyleKey” property,

do this.DefaultStyleKey <- typeof<WatermarkTextBox>

2. Load the resource file and merge it to the control’s resources collection,

let resourceDict = Application.LoadComponent(new Uri("/FSharp.SampleControls.Wpf;component/Themes/generic.xaml", System.UriKind.Relative)) :?> ResourceDictionary

do this.Resources.MergedDictionaries.Add(resourceDict)

This will ensure that the control template is implicitly set to the control, you also have the OnApplyTemplate() getting called when you override that method. That’s it; we have loaded the control template and enabled the custom control to load like a normal WPF component. I also tested by editing the control’s Style using Blend and that also worked,


The full test sample is available in this link. The project contains a simple implementation of a WatermarkTextBox as a WPF custom control; it also has a C# WPF application that uses it.

I have also prepared a simple F# WPF custom control library project, You can download that from this link. You have to place this in the “Project Templates” location,

Windows 7

C:\Users\{UserName}\Documents\Visual Studio 2010\Templates\ProjectTemplates

This should enable VS2010 to load the template.


2 thoughts on “F#– WPF Component Development

  1. Hi Fahad.

    I follow you on Twitter.
    Though I fond this/your blog post searching F# WPF component.


    I see/think your life is balanced design code.

    Symmorphmetry(tm,) is my art project.
    Developing Refolding Planar Polygons (RPP) by Iben O’Brien Demaine.
    I use F# and WPF. WPF because it “knows” video, and can map it to polygon.

    Reading Draft F# Component Design Gidlines (August 2010) …
    Wondering “small” v “large” …

    Do I extend WPF polygon OOP “large”, of use FP F# & data struct “small” and convert to WPF dor display …???

    I do not expect any answers, or help … but any thoughts appreciated.


    PLH OOE Art

    • Fahad says:

      Yep, you can certainly use the WPF drawing APIs to draw 2D and 3D planes, and F# will help you in constructing the data structures. Of course you can limit the usage of OOP in your context and let it just be used to use it.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: