<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>voyce &#187; wpf</title>
	<atom:link href="http://www.voyce.com/index.php/tag/wpf/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.voyce.com</link>
	<description>Programming and debugging tidbits</description>
	<lastBuildDate>Sun, 15 Jan 2012 13:10:46 +0000</lastBuildDate>
	
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Kinect SDK with F#</title>
		<link>http://www.voyce.com/index.php/2011/09/05/kinect-sdk-with-f/</link>
		<comments>http://www.voyce.com/index.php/2011/09/05/kinect-sdk-with-f/#comments</comments>
		<pubDate>Mon, 05 Sep 2011 14:34:47 +0000</pubDate>
		<dc:creator>ian</dc:creator>
				<category><![CDATA[.NET]]></category>
		<category><![CDATA[F#]]></category>
		<category><![CDATA[Graphics]]></category>
		<category><![CDATA[Software Development]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[kinect]]></category>
		<category><![CDATA[wpf]]></category>

		<guid isPermaLink="false">http://www.voyce.com/?p=1273</guid>
		<description><![CDATA[My first quick look at using the Kinect SDK with F#.]]></description>
			<content:encoded><![CDATA[<p><div id="attachment_1283" class="wp-caption alignleft" style="width: 210px"><a href="http://www.voyce.com/wp-content/uploads/2011/09/kinect.png"><img src="http://www.voyce.com/wp-content/uploads/2011/09/kinect.png" alt="Just what do you think you&#039;re doing, Dave?" title="kinect" width="200" height="200" class="size-full wp-image-1283" /></a><p class="wp-caption-text">Just what do you think you're doing, Dave?</p></div>I finally got around to taking a look at the <a href="http://research.microsoft.com/en-us/um/redmond/projects/kinectsdk/">Kinect SDK</a> the other day, partly because I was interested to see how the API looked from F#. Unfortunately getting it going turned out to be more of a pain than I was expecting.</p>
<p>The first bit was easy: I&#8217;m &#8220;lucky&#8221; enough to have one of the older Xboxes, which meant I&#8217;d had to get a Kinect with separate power, which is the one required by the SDK. Now all I needed was a Windows machine to develop on.<br />
<span id="more-1273"></span><br />
For all my Visual Studio stuff at home I use a virtual machine, and unfortunately I missed the point in the <a href="http://research.microsoft.com/en-us/um/redmond/projects/kinectsdk/docs/readme.htm">readme</a> about &#8220;Kinect for Windows applications cannot run in a virtual machine&#8221;. Doh. That would explain why, try as I might I couldn&#8217;t get <a href="http://www.virtualbox.org/">VirtualBox</a> to detect the device when I plugged it into the host. Whatever I did I ended up with a &#8216;resource is busy&#8217; error. </p>
<p>I even tried another VM, this time from VMWare. It got further, with the guest seeing the devices, but whenever I tried to run the sample apps the API initialisation call failed. Unfortunately the samples make a bit of a rookie mistake and don&#8217;t display the error code associated with the failure; the only way to get the underlying HRESULT is to debug the app. As it turned out the error was the catch-all <code>80080014</code>, which is attributed to various USB issues.</p>
<p>So, I finally relented and decided to once again set-up Bootcamp, which I&#8217;d stopped using a while back: why bother when VMs had done everything I needed? Again I was snookered, this time by the incompatibility of the <a href="http://en.wikipedia.org/wiki/Unified_Extensible_Firmware_Interface">EFI</a> firmware in my ageing MacBook with the Win7 x64 install disc (which I&#8217;d had to actually burn onto optical media &#8211; can&#8217;t remember the last time I burnt a real physical disk)!</p>
<p>Eventually, I got Win7 x86, Visual Studio and the Kinect SDK installed on the metal, plugged in the sensor and &#8211; whoa &#8211; the devices were recognised and the drivers installed and&#8230; the samples ran!</p>
<p>From this point doing some hacking was pretty straightforward. I set about creating a project that used the skeletal tracking ability from the SDK. The project needs to reference the <code>Microsoft.Research.Kinect</code> assembly, then we can open some namespaces and initialise the API:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">open</span> System
<span style="color: #06c; font-weight: bold;">open</span> Microsoft<span style="color: #000080;">.</span><span style="color: #505090;">Research</span><span style="color: #000080;">.</span><span style="color: #505090;">Kinect</span>
&nbsp;
<span style="color: #06c; font-weight: bold;">let</span> nui <span style="color: #000080;">=</span> Nui<span style="color: #000080;">.</span><span style="color: #505090;">Runtime</span><span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
nui<span style="color: #000080;">.</span><span style="color: #505090;">Initialize</span><span style="color: #000080;">&#40;</span>Nui<span style="color: #000080;">.</span><span style="color: #505090;">RuntimeOptions</span><span style="color: #000080;">.</span><span style="color: #505090;">UseSkeletalTracking</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>The API uses .NET events to communicate back to the application that some form of data is available. Depending on the options that you specify at init time, any of the skeletal, depth frame or colour data will be returned in the event arguments. This seems like a good place to use F# Async&#8217;s event integration: Async.AwaitEvent. We can quite easily write some code that will create an Async task that will repeatedly listen for events:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">    <span style="color: #06c; font-weight: bold;">let</span> skeleton <span style="color: #000080;">&#40;</span>nui <span style="color: #000080;">:</span> Nui<span style="color: #000080;">.</span><span style="color: #505090;">Runtime</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
        <span style="color: #06c; font-weight: bold;">let</span> <span style="color: #06c; font-weight: bold;">rec</span> loop <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
            async <span style="color: #000080;">&#123;</span> 
                <span style="color: #06c; font-weight: bold;">let</span><span style="color: #000080;">!</span> args <span style="color: #000080;">=</span> Async<span style="color: #000080;">.</span><span style="color: #505090;">AwaitEvent</span> nui<span style="color: #000080;">.</span><span style="color: #505090;">SkeletonFrameReady</span>
                <span style="color: #060; font-style: italic;">// Do something with the args</span>
                <span style="color: #06c; font-weight: bold;">return</span><span style="color: #000080;">!</span> loop <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> 
            <span style="color: #000080;">&#125;</span>
        loop <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
    <span style="color: #060; font-style: italic;">// Start the process of listening for events...</span>
    skeleton nui <span style="color: #000080;">|&gt;</span> Async<span style="color: #000080;">.</span><span style="color: #505090;">Start</span></pre></div></div>

<p>This seems to work nicely, although I&#8217;m not sure of the overhead involved, perhaps a solution involving Rx would be more appropriate. Anyway, let&#8217;s do something with the data we get in the event, like getting all the skeletons that are being tracked, and passing them to a <code>draw</code> function:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">                args<span style="color: #000080;">.</span><span style="color: #505090;">SkeletonFrame</span><span style="color: #000080;">.</span><span style="color: #505090;">Skeletons</span> 
                <span style="color: #000080;">|&gt;</span> Seq<span style="color: #000080;">.</span><span style="color: #505090;">filter</span> <span style="color: #000080;">&#40;</span><span style="color: #06c; font-weight: bold;">fun</span> s <span style="color: #000080;">-&gt;</span> s<span style="color: #000080;">.</span><span style="color: #505090;">TrackingState</span> <span style="color: #000080;">=</span> Nui<span style="color: #000080;">.</span><span style="color: #505090;">SkeletonTrackingState</span><span style="color: #000080;">.</span><span style="color: #505090;">Tracked</span><span style="color: #000080;">&#41;</span>
                <span style="color: #000080;">|&gt;</span> Seq<span style="color: #000080;">.</span><span style="color: #505090;">iter</span> draw</pre></div></div>

<p>All that&#8217;s left is doing something cool in <code>draw</code>! Oh, and setting up all the GUI stuff necessary to actually get some pixels on the screen. I went for the WPF approach (as the managed samples do), which involves creating a simple object tree to display a rectangle in a canvas in a grid in a window, and doing a bit of marshalling back from the thread pool (where our Async code runs) to the main GUI thread.</p>
<p>Here&#8217;s all the code for possibly the most tedious thing you could do with a Kinect! But hey, it&#8217;s a starting point, right? I&#8217;m sure at some point I&#8217;ll get around to doing something cooler than a couple of small red rectangles with it&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">open</span> System
<span style="color: #06c; font-weight: bold;">open</span> System<span style="color: #000080;">.</span><span style="color: #505090;">Windows</span>
<span style="color: #06c; font-weight: bold;">open</span> Microsoft<span style="color: #000080;">.</span><span style="color: #505090;">Research</span><span style="color: #000080;">.</span><span style="color: #505090;">Kinect</span>
&nbsp;
<span style="color: #000080;">&#91;</span><span style="color: #000080;">&lt;</span>STAThread<span style="color: #000080;">&gt;</span><span style="color: #000080;">&#93;</span>
<span style="color: #06c; font-weight: bold;">do</span>
    <span style="color: #06c; font-weight: bold;">let</span> nui <span style="color: #000080;">=</span> Nui<span style="color: #000080;">.</span><span style="color: #505090;">Runtime</span><span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
    nui<span style="color: #000080;">.</span><span style="color: #505090;">Initialize</span><span style="color: #000080;">&#40;</span>Nui<span style="color: #000080;">.</span><span style="color: #505090;">RuntimeOptions</span><span style="color: #000080;">.</span><span style="color: #505090;">UseSkeletalTracking</span><span style="color: #000080;">&#41;</span>
&nbsp;
    <span style="color: #060; font-style: italic;">// lifted straight from the sample code</span>
    <span style="color: #06c; font-weight: bold;">let</span> getDisplayPosition w h <span style="color: #000080;">&#40;</span>joint <span style="color: #000080;">:</span> Nui<span style="color: #000080;">.</span><span style="color: #505090;">Joint</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
            <span style="color: #06c; font-weight: bold;">let</span> <span style="color: #06c; font-weight: bold;">mutable</span> depthX <span style="color: #000080;">=</span> 0<span style="color: #000080;">.</span>0f
            <span style="color: #06c; font-weight: bold;">let</span> <span style="color: #06c; font-weight: bold;">mutable</span> depthY <span style="color: #000080;">=</span> 0<span style="color: #000080;">.</span>0f
            nui<span style="color: #000080;">.</span><span style="color: #505090;">SkeletonEngine</span><span style="color: #000080;">.</span><span style="color: #505090;">SkeletonToDepthImage</span><span style="color: #000080;">&#40;</span>joint<span style="color: #000080;">.</span><span style="color: #505090;">Position</span>, <span style="color: #000080;">&amp;</span>depthX, <span style="color: #000080;">&amp;</span>depthY<span style="color: #000080;">&#41;</span>
            <span style="color: #06c; font-weight: bold;">let</span> depthX <span style="color: #000080;">=</span> depthX <span style="color: #000080;">*</span> 320<span style="color: #000080;">.</span>0f<span style="color: #000080;">;</span> <span style="color: #060; font-style: italic;">//convert to 320, 240 space</span>
            <span style="color: #06c; font-weight: bold;">let</span> depthY <span style="color: #000080;">=</span> depthY <span style="color: #000080;">*</span> 240<span style="color: #000080;">.</span>0f<span style="color: #000080;">;</span> <span style="color: #060; font-style: italic;">//convert to 320, 240 space</span>
            <span style="color: #06c; font-weight: bold;">let</span> <span style="color: #06c; font-weight: bold;">mutable</span> colorX <span style="color: #000080;">=</span> <span style="color: #c6c;">0</span>
            <span style="color: #06c; font-weight: bold;">let</span> <span style="color: #06c; font-weight: bold;">mutable</span> colorY <span style="color: #000080;">=</span> <span style="color: #c6c;">0</span>
            <span style="color: #06c; font-weight: bold;">let</span> iv <span style="color: #000080;">=</span> <span style="color: #06c; font-weight: bold;">new</span> Nui<span style="color: #000080;">.</span><span style="color: #505090;">ImageViewArea</span><span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
            <span style="color: #060; font-style: italic;">// only ImageResolution.Resolution640x480 is supported at this point</span>
            nui<span style="color: #000080;">.</span><span style="color: #505090;">NuiCamera</span><span style="color: #000080;">.</span><span style="color: #505090;">GetColorPixelCoordinatesFromDepthPixel</span><span style="color: #000080;">&#40;</span>Nui<span style="color: #000080;">.</span><span style="color: #505090;">ImageResolution</span><span style="color: #000080;">.</span><span style="color: #505090;">Resolution640x480</span>, iv, 
                <span style="color: #000080;">&#40;</span>int<span style="color: #000080;">&#41;</span>depthX, <span style="color: #000080;">&#40;</span>int<span style="color: #000080;">&#41;</span>depthY, 0s, <span style="color: #000080;">&amp;</span>colorX, <span style="color: #000080;">&amp;</span>colorY<span style="color: #000080;">&#41;</span>
&nbsp;
            <span style="color: #060; font-style: italic;">// map back to visible area</span>
            <span style="color: #06c; font-weight: bold;">new</span> Point<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#40;</span>w <span style="color: #000080;">*</span> <span style="color: #000080;">&#40;</span>float<span style="color: #000080;">&#41;</span>colorX <span style="color: #000080;">/</span> 640<span style="color: #000080;">.</span><span style="color: #000080;">&#41;</span>, <span style="color: #000080;">&#40;</span>h <span style="color: #000080;">*</span> <span style="color: #000080;">&#40;</span>float<span style="color: #000080;">&#41;</span>colorY <span style="color: #000080;">/</span> 480<span style="color: #000080;">.</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
&nbsp;
    <span style="color: #060; font-style: italic;">// Set-up the WPF window and its contents</span>
    <span style="color: #06c; font-weight: bold;">let</span> width <span style="color: #000080;">=</span> 1024<span style="color: #000080;">.</span>
    <span style="color: #06c; font-weight: bold;">let</span> height <span style="color: #000080;">=</span> 768<span style="color: #000080;">.</span>
    <span style="color: #06c; font-weight: bold;">let</span> w <span style="color: #000080;">=</span> Window<span style="color: #000080;">&#40;</span>Width<span style="color: #000080;">=</span>width, Height<span style="color: #000080;">=</span>height<span style="color: #000080;">&#41;</span>
    <span style="color: #06c; font-weight: bold;">let</span> g <span style="color: #000080;">=</span> Controls<span style="color: #000080;">.</span><span style="color: #505090;">Grid</span><span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
    <span style="color: #06c; font-weight: bold;">let</span> c <span style="color: #000080;">=</span> Controls<span style="color: #000080;">.</span><span style="color: #505090;">Canvas</span><span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
    <span style="color: #06c; font-weight: bold;">let</span> hd <span style="color: #000080;">=</span> Shapes<span style="color: #000080;">.</span><span style="color: #505090;">Rectangle</span><span style="color: #000080;">&#40;</span>Fill<span style="color: #000080;">=</span>Media<span style="color: #000080;">.</span><span style="color: #505090;">Brushes</span><span style="color: #000080;">.</span><span style="color: #505090;">Red</span>, Width<span style="color: #000080;">=</span>10<span style="color: #000080;">.</span>, Height<span style="color: #000080;">=</span>10<span style="color: #000080;">.</span><span style="color: #000080;">&#41;</span>
    ignore <span style="color: #000080;">&lt;|</span> c<span style="color: #000080;">.</span><span style="color: #505090;">Children</span><span style="color: #000080;">.</span><span style="color: #505090;">Add</span> hd
    ignore <span style="color: #000080;">&lt;|</span> g<span style="color: #000080;">.</span><span style="color: #505090;">Children</span><span style="color: #000080;">.</span><span style="color: #505090;">Add</span> c
    w<span style="color: #000080;">.</span><span style="color: #505090;">Content</span> <span style="color: #000080;">&lt;-</span> g
&nbsp;
    <span style="color: #060; font-style: italic;">// We simple move the rectangle to where the head is</span>
    <span style="color: #06c; font-weight: bold;">let</span> draw <span style="color: #000080;">&#40;</span>s <span style="color: #000080;">:</span> Nui<span style="color: #000080;">.</span><span style="color: #505090;">SkeletonData</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
        <span style="color: #06c; font-weight: bold;">let</span> point <span style="color: #000080;">=</span> getDisplayPosition width height s<span style="color: #000080;">.</span><span style="color: #505090;">Joints</span><span style="color: #000080;">.</span><span style="color: #000080;">&#91;</span>Nui<span style="color: #000080;">.</span><span style="color: #505090;">JointID</span><span style="color: #000080;">.</span><span style="color: #505090;">Head</span><span style="color: #000080;">&#93;</span>
        ignore <span style="color: #000080;">&lt;|</span> w<span style="color: #000080;">.</span><span style="color: #505090;">Dispatcher</span><span style="color: #000080;">.</span><span style="color: #505090;">BeginInvoke</span><span style="color: #000080;">&#40;</span>Threading<span style="color: #000080;">.</span><span style="color: #505090;">DispatcherPriority</span><span style="color: #000080;">.</span><span style="color: #505090;">Normal</span>, Action<span style="color: #000080;">&#40;</span><span style="color: #06c; font-weight: bold;">fun</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">-&gt;</span>    
            hd<span style="color: #000080;">.</span><span style="color: #505090;">SetValue</span><span style="color: #000080;">&#40;</span>Controls<span style="color: #000080;">.</span><span style="color: #505090;">Canvas</span><span style="color: #000080;">.</span><span style="color: #505090;">TopProperty</span>, point<span style="color: #000080;">.</span><span style="color: #505090;">Y</span><span style="color: #000080;">&#41;</span>
            hd<span style="color: #000080;">.</span><span style="color: #505090;">SetValue</span><span style="color: #000080;">&#40;</span>Controls<span style="color: #000080;">.</span><span style="color: #505090;">Canvas</span><span style="color: #000080;">.</span><span style="color: #505090;">LeftProperty</span>, point<span style="color: #000080;">.</span><span style="color: #505090;">X</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
&nbsp;
    <span style="color: #06c; font-weight: bold;">let</span> skeleton <span style="color: #000080;">&#40;</span>nui <span style="color: #000080;">:</span> Nui<span style="color: #000080;">.</span><span style="color: #505090;">Runtime</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
        <span style="color: #06c; font-weight: bold;">let</span> <span style="color: #06c; font-weight: bold;">rec</span> loop <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
            async <span style="color: #000080;">&#123;</span> 
                <span style="color: #06c; font-weight: bold;">let</span><span style="color: #000080;">!</span> args <span style="color: #000080;">=</span> Async<span style="color: #000080;">.</span><span style="color: #505090;">AwaitEvent</span> nui<span style="color: #000080;">.</span><span style="color: #505090;">SkeletonFrameReady</span>
                args<span style="color: #000080;">.</span><span style="color: #505090;">SkeletonFrame</span><span style="color: #000080;">.</span><span style="color: #505090;">Skeletons</span> 
                <span style="color: #000080;">|&gt;</span> Seq<span style="color: #000080;">.</span><span style="color: #505090;">filter</span> <span style="color: #000080;">&#40;</span><span style="color: #06c; font-weight: bold;">fun</span> s <span style="color: #000080;">-&gt;</span> s<span style="color: #000080;">.</span><span style="color: #505090;">TrackingState</span> <span style="color: #000080;">=</span> Nui<span style="color: #000080;">.</span><span style="color: #505090;">SkeletonTrackingState</span><span style="color: #000080;">.</span><span style="color: #505090;">Tracked</span><span style="color: #000080;">&#41;</span>
                <span style="color: #000080;">|&gt;</span> Seq<span style="color: #000080;">.</span><span style="color: #505090;">iter</span> draw
                <span style="color: #06c; font-weight: bold;">return</span><span style="color: #000080;">!</span> loop <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> 
            <span style="color: #000080;">&#125;</span>
        loop <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
&nbsp;
    skeleton nui <span style="color: #000080;">|&gt;</span> Async<span style="color: #000080;">.</span><span style="color: #505090;">Start</span>
&nbsp;
    <span style="color: #06c; font-weight: bold;">let</span> a <span style="color: #000080;">=</span> System<span style="color: #000080;">.</span><span style="color: #505090;">Windows</span><span style="color: #000080;">.</span><span style="color: #505090;">Application</span><span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
    ignore <span style="color: #000080;">&lt;|</span> a<span style="color: #000080;">.</span><span style="color: #505090;">Run</span><span style="color: #000080;">&#40;</span>w<span style="color: #000080;">&#41;</span>
&nbsp;
    nui<span style="color: #000080;">.</span><span style="color: #505090;">Uninitialize</span><span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>The moral of the story? Don&#8217;t be like me, and make sure you actually read the FAQing readme, then maybe you&#8217;ll spend more time doing a decent demo and less time plugging and unplugging your Kinect!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.voyce.com/index.php/2011/09/05/kinect-sdk-with-f/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Public static fields gone from F# 2.0</title>
		<link>http://www.voyce.com/index.php/2010/10/01/public-static-fields-gone-from-f-2-0/</link>
		<comments>http://www.voyce.com/index.php/2010/10/01/public-static-fields-gone-from-f-2-0/#comments</comments>
		<pubDate>Fri, 01 Oct 2010 17:00:53 +0000</pubDate>
		<dc:creator>ian</dc:creator>
				<category><![CDATA[.NET]]></category>
		<category><![CDATA[F#]]></category>
		<category><![CDATA[Software Development]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[DependencyProperty]]></category>
		<category><![CDATA[IL]]></category>
		<category><![CDATA[wpf]]></category>

		<guid isPermaLink="false">http://www.voyce.com/?p=900</guid>
		<description><![CDATA[You can no longer create public static fields in F# 2.0. Why was the change made and what impact does it have on WPF development?]]></description>
			<content:encoded><![CDATA[<p>There have been quite a few changes in F# version 2.0, which shipped as the first &#8220;official&#8221; version of the language as part of Visual Studio 2010. Most of the changes are detailed in various release notes on Don Syme&#8217;s blog and other places, but unfortunately one of the more significant changes passed me by, and turned out to be quite significant in the context of WPF development: public static fields are no longer supported. But what does this mean? </p>
<h3>The change</h3>
<p>The change itself is simple: static fields can no longer be public. Static fields can still be created, but they must be private. </p>
<p>In pre-2.0 versions of F# it was possible to declare a static field on a type like this:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">type</span> MyType<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
    <span style="color: #000080;">&#91;</span><span style="color: #000080;">&lt;</span>DefaultValue<span style="color: #000080;">&gt;</span><span style="color: #000080;">&#93;</span>
    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">val</span> <span style="color: #06c; font-weight: bold;">mutable</span> <span style="color: #06c; font-weight: bold;">public</span> MyProperty <span style="color: #000080;">:</span> int</pre></div></div>

<p>Resulting in a type containing a static field, as you&#8217;d expect:</p>
<pre>
    .field public static int32 MyProperty
</pre>
<p>The code now generates the compiler error:</p>
<p><code>error FS0881: Static 'val' fields in types must be mutable, private and marked with the '[&lt;DefaultValue&gt;]' attribute. They are initialized to the 'null' or 'zero' value for their type. Consider also using a 'static let mutable' binding in a class type.</code></p>
<p>Notice that there are already some gnarly aspects to the definition of the property; notably the use of the <code>[&lt;DefaultValue&gt;]</code> attribute, which indicates that the field is un-initialized. This gives us a hint that there might be some inherent problems.</p>
<h3>Why do we even need them?</h3>
<p>In a word or three: WPF dependency properties. </p>
<p>The recommended way of implementing dependency properties in other .NET languages is to use public static fields, e.g. in C#:</p>

<div class="wp_syntax"><div class="code"><pre class="csharp" style="font-family:monospace;">    <span style="color: #0600FF;">public</span> <span style="color: #0600FF;">static</span> <span style="color: #0600FF;">readonly</span> DependencyProperty MyPropertyProperty <span style="color: #008000;">=</span>
        DependencyProperty.<span style="color: #0000FF;">Register</span><span style="color: #000000;">&#40;</span> 
          <span style="color: #666666;">&quot;MyProperty&quot;</span>, <span style="color: #008000;">typeof</span><span style="color: #000000;">&#40;</span><span style="color: #FF0000;">int</span><span style="color: #000000;">&#41;</span>, <span style="color: #008000;">typeof</span><span style="color: #000000;">&#40;</span>MyType<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span><span style="color: #008000;">;</span></pre></div></div>

<p>This is one of the few places where C# is terser than F#. Here we can declare and define the value in one line (ish), whereas F# requires a separate declaration of the field (as above) then initialisation in the static constructor (<code>static do</code>).</p>
<h3>Why was it removed?</h3>
<p>I got the answer from the horse&#8217;s mouth. Don Syme said that:</p>
<blockquote><p>
We deliberately removed the ability to create public static fields in Beta2/RC, because of issues associated with initialization of the fields (i.e. ensuring the “static do” bindings are run correctly, and if they are run, then they are run for the whole file, in the right order, with no deadlocks or uninitialized access when initialization occurs from multiple threads).</p></blockquote>
<p>You can imagine how this would be a problem; there would need to be a way of ensuring that whichever static field was accessed it caused the static constructor to run, which may itself access static fields. All pretty nasty. In fact, Don mentioned that C# suffers from much the same synchronisation issues, but just tends to be used in a way that means it&#8217;s less likely to be noticed!</p>
<h3>The alternative</h3>
<p>At least in theory it&#8217;s possible to create a type that uses static properties rather than static fields to store its registered DependencyProperty information.</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">type</span> Foo <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
    <span style="color: #06c; font-weight: bold;">inherit</span> FrameworkElement<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">mutable</span> <span style="color: #06c; font-weight: bold;">private</span> _myPropertyInternal <span style="color: #000080;">:</span> DependencyProperty 
    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">member</span> this<span style="color: #000080;">.</span><span style="color: #505090;">MyProperty</span> <span style="color: #06c; font-weight: bold;">with</span> get <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span> _myPropertyInternal</pre></div></div>

<p>Whether or not this works depends very much on how calling code accesses DependencyProperty information. If it uses reflection to access the field directly it will obviously fail. But if it uses a more robust/flexible method then it should be OK. Empirically it seems that the WPF framework code itself does the latter, for instance, when it&#8217;s instantiating objects from XAML, and it works properly independently of how it&#8217;s implemented. </p>
<h3>The conclusion</h3>
<p>So the conclusion is &#8220;wontfix&#8221;: the behaviour is by design. Unfortunately it has the effect that it&#8217;s no longer possible to create a type with an identical IL &#8220;signature&#8221; in both F# and C#. It seems a bit of a shame, but I guess the trade-off is that we&#8217;re protected against insiduous initialisation issues, so it will probably turn out to be the right thing in the long term.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.voyce.com/index.php/2010/10/01/public-static-fields-gone-from-f-2-0/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>A WPF custom control in F#</title>
		<link>http://www.voyce.com/index.php/2009/12/14/a-wpf-custom-control-in-fsharp/</link>
		<comments>http://www.voyce.com/index.php/2009/12/14/a-wpf-custom-control-in-fsharp/#comments</comments>
		<pubDate>Mon, 14 Dec 2009 11:05:02 +0000</pubDate>
		<dc:creator>ian</dc:creator>
				<category><![CDATA[.NET]]></category>
		<category><![CDATA[F#]]></category>
		<category><![CDATA[Software Development]]></category>
		<category><![CDATA[WPF]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[guidattribute fsharp]]></category>
		<category><![CDATA[wpf]]></category>

		<guid isPermaLink="false">http://www.voyce.com/?p=459</guid>
		<description><![CDATA[What F# language and syntax features are required to implement a fundamentally object-oriented WPF custom control?]]></description>
			<content:encoded><![CDATA[<p>In the world of WPF with its powerful templating support, you&#8217;re much less likely to need to build a custom control from scratch than you are with legacy Windows GUI frameworks. For the vast majority of scenarios it&#8217;s possible to take an existing control and modify its appearance and behaviour to get what you need. However it is still possible and sometimes necessary to build something in code. The other day I was looking at creating one &#8211; using F# of course &#8211; and realised that a skeleton control serves as a good example of the kind of cross-paradigm features the language offers. They&#8217;re the kind of things that make it possible to use functional F# with inherently imperative .NET languages and frameworks like WPF.<br />
<span id="more-459"></span><br />
Let&#8217;s start by looking at the code for the control in its entirety, and then we&#8217;ll break it down bit-by-bit:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">type</span> <span style="color: #06c; font-weight: bold;">public</span> MyControl<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
    <span style="color: #06c; font-weight: bold;">inherit</span> ItemsControl<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
&nbsp;
    <span style="color: #000080;">&#91;</span><span style="color: #000080;">&lt;</span>defaultValue<span style="color: #000080;">&gt;</span><span style="color: #000080;">&#93;</span>
    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">val</span> <span style="color: #06c; font-weight: bold;">mutable</span> FooProperty <span style="color: #000080;">:</span> DependencyProperty
&nbsp;
    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">member</span> OnFooChanged <span style="color: #000080;">&#40;</span>dob<span style="color: #000080;">:</span>DependencyObject<span style="color: #000080;">&#41;</span> args <span style="color: #000080;">=</span>
        <span style="color: #000080;">&#40;</span>dob <span style="color: #000080;">:</span>?<span style="color: #000080;">&gt;</span> MyControl<span style="color: #000080;">&#41;</span><span style="color: #000080;">.</span><span style="color: #505090;">Update</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
&nbsp;
    <span style="color: #000080;">&#91;</span><span style="color: #000080;">&lt;</span>system<span style="color: #000080;">.</span><span style="color: #505090;">ComponentModel</span><span style="color: #000080;">.</span><span style="color: #505090;">Bindable</span><span style="color: #000080;">&#40;</span><span style="color: #06c; font-weight: bold;">true</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">&gt;</span><span style="color: #000080;">&#93;</span>
    <span style="color: #06c; font-weight: bold;">member</span> <span style="color: #06c; font-weight: bold;">public</span> this<span style="color: #000080;">.</span><span style="color: #505090;">Foo</span>
        <span style="color: #06c; font-weight: bold;">with</span> get<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">:</span> string  <span style="color: #000080;">=</span> string <span style="color: #000080;">&#40;</span>base<span style="color: #000080;">.</span><span style="color: #505090;">GetValue</span><span style="color: #000080;">&#40;</span>MyControl<span style="color: #000080;">.</span><span style="color: #505090;">FooProperty</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
        <span style="color: #06c; font-weight: bold;">and</span>  set<span style="color: #000080;">&#40;</span>r <span style="color: #000080;">:</span> string<span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span> base<span style="color: #000080;">.</span><span style="color: #505090;">SetValue</span><span style="color: #000080;">&#40;</span>MyControl<span style="color: #000080;">.</span><span style="color: #505090;">FooProperty</span>, r<span style="color: #000080;">&#41;</span>
&nbsp;
    <span style="color: #06c; font-weight: bold;">override</span> this<span style="color: #000080;">.</span><span style="color: #505090;">OnPropertyChanged</span> <span style="color: #000080;">&#40;</span>args<span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
        <span style="color: #06c; font-weight: bold;">match</span> args<span style="color: #000080;">.</span><span style="color: #505090;">Property</span><span style="color: #000080;">.</span><span style="color: #505090;">Name</span> <span style="color: #06c; font-weight: bold;">with</span>
        <span style="color: #000080;">|</span> <span style="color: #008080;">&quot;Foo&quot;</span> <span style="color: #000080;">-&gt;</span> this<span style="color: #000080;">.</span><span style="color: #505090;">Update</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
        <span style="color: #000080;">|</span> <span style="color: #06c; font-weight: bold;">_</span>          <span style="color: #000080;">-&gt;</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
&nbsp;
    <span style="color: #06c; font-weight: bold;">member</span> <span style="color: #06c; font-weight: bold;">internal</span> this<span style="color: #000080;">.</span><span style="color: #505090;">Update</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
        System<span style="color: #000080;">.</span><span style="color: #505090;">Diagnostics</span><span style="color: #000080;">.</span><span style="color: #505090;">Debug</span><span style="color: #000080;">.</span><span style="color: #505090;">WriteLine</span> <span style="color: #000080;">&#40;</span>sprintf <span style="color: #008080;">&quot;Updating %A&quot;</span> <span style="color: #000080;">&#40;</span>base<span style="color: #000080;">.</span><span style="color: #505090;">GetValue</span><span style="color: #000080;">&#40;</span>MyControl<span style="color: #000080;">.</span><span style="color: #505090;">FooProperty</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
&nbsp;
    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">do</span>
        <span style="color: #06c; font-weight: bold;">let</span> metadata <span style="color: #000080;">=</span> PropertyMetadata<span style="color: #000080;">&#40;</span><span style="color: #06c; font-weight: bold;">null</span>, PropertyChangedCallback <span style="color: #000080;">&#40;</span>MyControl<span style="color: #000080;">.</span><span style="color: #505090;">OnFooChanged</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">&#41;</span>
        MyControl<span style="color: #000080;">.</span><span style="color: #505090;">FooProperty</span> <span style="color: #000080;">&lt;-</span> DependencyProperty<span style="color: #000080;">.</span><span style="color: #505090;">Register</span><span style="color: #000080;">&#40;</span><span style="color: #008080;">&quot;Foo&quot;</span>, typeof<span style="color: #000080;">&lt;</span>string<span style="color: #000080;">&gt;</span>, typeof<span style="color: #000080;">&lt;</span>MyControl<span style="color: #000080;">&gt;</span>, metadata<span style="color: #000080;">&#41;</span></pre></div></div>

<h2>Constructor</h2>
<p>We don&#8217;t have one! Well, that&#8217;s not strictly true. There&#8217;s no per-instance set-up that we need to do here, so instead we have a default, parameter-less constructor implied by the &#8220;empty brackets&#8221; syntax in the type declaration. If we wanted to execute some code in the constructor, we could add the following:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">    <span style="color: #06c; font-weight: bold;">do</span>
        Debug<span style="color: #000080;">.</span><span style="color: #505090;">WriteLine</span> <span style="color: #008080;">&quot;Constructing.&quot;</span></pre></div></div>

<p>It&#8217;s also possible to add further constructors (perhaps parameterised differently) but when using WPF bear in mind that instances of your class will often be created from a XAML declaration, which generally uses the default constructor and then sets properties as required. Mutable objects: ug.</p>
<h2>Inheritance</h2>
<p>Our type derives from the WPF <code>ItemsControl</code> class using the <code>inherit</code> keyword. Of course, we&#8217;re still subject to the single-inheritance limit of .NET (not a bad thing, if you ask me &#8211; no more tortured object hierarchies):</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">type</span> <span style="color: #06c; font-weight: bold;">public</span> MyControl<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
    <span style="color: #06c; font-weight: bold;">inherit</span> ItemsControl<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>Note that we have to include the empty brackets on the inherited type name, as this will be constructed implicitly when our derived class is constructed. We can access the inherited class from elsewhere in the code using the <code>base</code> keyword.</p>
<h2>Static members</h2>
<p>Dependency properties are a WPF construct that provide external storage of property values. They allow deep trees of objects to efficiently use lots of properties where they often have the default value, which is commonly the case in WPF. In order to use them with your class you have to do a few things, including creating a static value to hold the property and its metadata. We create a mutable static member for this:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">    <span style="color: #000080;">&#91;</span><span style="color: #000080;">&lt;</span>defaultValue<span style="color: #000080;">&gt;</span><span style="color: #000080;">&#93;</span>
    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">val</span> <span style="color: #06c; font-weight: bold;">mutable</span> FooProperty <span style="color: #000080;">:</span> DependencyProperty</pre></div></div>

<p>Why a mutable static value? If you&#8217;ve used F# already you might be aware that it&#8217;s also possible to declare an immutable static variable and its initial value in one shot with a <code>let</code>:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">let</span> FooProperty <span style="color: #000080;">=</span> DependencyProperty<span style="color: #000080;">.</span><span style="color: #505090;">RegisterProperty</span> <span style="color: #000080;">&#40;</span><span style="color: #008080;">&quot;Foo&quot;</span>, typeof<span style="color: #000080;">&lt;</span>string<span style="color: #000080;">&gt;</span>, typeof<span style="color: #000080;">&lt;</span>MyControl<span style="color: #000080;">&gt;</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>Unfortunately, this results in your DP being private. Although the CLR property is still accessible, anything that attempts to access the DP directly &#8211; for instance, code within the WPF libraries &#8211; won&#8217;t see it. This means you have to use the mutable style, which is unfortunate.</p>
<h2>Static methods</h2>
<p>We&#8217;ve declared a static member function that is used to receive notifications when our DP is changed (although it&#8217;s complete overkill in this example, because we&#8217;ve already declared our DP with metadata that tells it to notify us when it changes):</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">member</span> OnFooChanged <span style="color: #000080;">&#40;</span>dob<span style="color: #000080;">:</span>DependencyObject<span style="color: #000080;">&#41;</span> args <span style="color: #000080;">=</span>
        <span style="color: #000080;">&#40;</span>dob <span style="color: #000080;">:</span>?<span style="color: #000080;">&gt;</span> MyControl<span style="color: #000080;">&#41;</span><span style="color: #000080;">.</span><span style="color: #505090;">Update</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>As you&#8217;d expect, there&#8217;s no <code>this</code> parameter on the signature, a static member doesn&#8217;t have any implicit object instance to work on. Luckily the arguments to most event functions include the DependencyObject that raised the notification. That means we can downcast dynamically to our expected type (with <code>: ?&gt;</code>) and use it. Bear in mind that this is more like casting than <code>as</code> in C#, as it will throw an <code>InvalidCastException</code> at runtime rather than returning null.</p>
<h2>Properties</h2>
<p>In order for our dependency property to be easily accessible we can expose it as a plain old CLR property. The implementation of the getter and setter simply defers all of the actual work of storing and retrieving the value to the underlying dependency property.</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">    <span style="color: #06c; font-weight: bold;">member</span> <span style="color: #06c; font-weight: bold;">public</span> this<span style="color: #000080;">.</span><span style="color: #505090;">Foo</span>
        <span style="color: #06c; font-weight: bold;">with</span> get<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">:</span> string  <span style="color: #000080;">=</span> string <span style="color: #000080;">&#40;</span>base<span style="color: #000080;">.</span><span style="color: #505090;">GetValue</span><span style="color: #000080;">&#40;</span>MyControl<span style="color: #000080;">.</span><span style="color: #505090;">FooProperty</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
        <span style="color: #06c; font-weight: bold;">and</span>  set<span style="color: #000080;">&#40;</span>r <span style="color: #000080;">:</span> string<span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span> base<span style="color: #000080;">.</span><span style="color: #505090;">SetValue</span><span style="color: #000080;">&#40;</span>MyControl<span style="color: #000080;">.</span><span style="color: #505090;">FooProperty</span>, r<span style="color: #000080;">&#41;</span></pre></div></div>

<p>Notice how we have to cast the <code>obj</code> returned from <code>GetValue</code> into the correct type. This is another example of having to bridge the gap between the dynamically typed WPF property system and F#&#8217;s static typing.</p>
<h2>Overridden members</h2>
<p>As well as providing new member functions and properties, we may need to override existing ones. Member functions marked <code>abstract</code> in the base class can be overridden using the <code>override</code> keyword:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">    <span style="color: #06c; font-weight: bold;">override</span> this<span style="color: #000080;">.</span><span style="color: #505090;">OnPropertyChanged</span> <span style="color: #000080;">&#40;</span>args<span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
        <span style="color: #06c; font-weight: bold;">match</span> args<span style="color: #000080;">.</span><span style="color: #505090;">Property</span><span style="color: #000080;">.</span><span style="color: #505090;">Name</span> <span style="color: #06c; font-weight: bold;">with</span>
        <span style="color: #000080;">|</span> <span style="color: #008080;">&quot;Foo&quot;</span> <span style="color: #000080;">-&gt;</span> this<span style="color: #000080;">.</span><span style="color: #505090;">Update</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
        <span style="color: #000080;">|</span> <span style="color: #06c; font-weight: bold;">_</span>          <span style="color: #000080;">-&gt;</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>The F# compiler provides the same kind of checking that the C# compiler does, warning you if you inadvertantly hide a base class function by creating an override with the same name but not marking it with <code>override</code>.</p>
<h2>Static constructor</h2>
<p>As mentioned before, we use the static constructor to initialise our mutable static variables. The syntax is similar to the <code>do</code> syntax of a normal constructor, with the addition of the <code>static</code> keyword:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">    <span style="color: #06c; font-weight: bold;">static</span> <span style="color: #06c; font-weight: bold;">do</span>
        <span style="color: #06c; font-weight: bold;">let</span> metadata <span style="color: #000080;">=</span> PropertyMetadata<span style="color: #000080;">&#40;</span><span style="color: #06c; font-weight: bold;">null</span>, PropertyChangedCallback <span style="color: #000080;">&#40;</span>MyControl<span style="color: #000080;">.</span><span style="color: #505090;">OnFooChanged</span><span style="color: #000080;">&#41;</span> <span style="color: #000080;">&#41;</span>
        <span style="color: #000080;">...</span></pre></div></div>

<p>Static constructors are run once per class, regardless of how many instances of the class you have. WPF relies quite heavily on static, class-based functionality; mostly because a lot of what&#8217;s set-up is per-class configuration &#8211; it&#8217;s not going to change during the lifetime of the application &#8211; so you may find yourself doing a fair amount of work in a static constructor. </p>
<p>So, there&#8217;s a quick run around some of the object-oriented features of the F# language: classes, inheritance, instance constructors, overridden member functions, static member functions and constructors. You can see how using WPF means you lose some of the benefits of the F# language; notably immutability and static typing. If you&#8217;re an experienced functional programmer getting deep into creating WPF or Silverlight custom controls you may find yourself using these OO constructs more than you&#8217;d like. Although F# makes it relatively painless in practice, mixing this heavily object oriented style of programming with a functional approach can still be a little hard to stomach at times.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.voyce.com/index.php/2009/12/14/a-wpf-custom-control-in-fsharp/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>FormatException in WPF DataBinding</title>
		<link>http://www.voyce.com/index.php/2009/10/14/formatexception-in-wpf-databinding/</link>
		<comments>http://www.voyce.com/index.php/2009/10/14/formatexception-in-wpf-databinding/#comments</comments>
		<pubDate>Wed, 14 Oct 2009 11:09:26 +0000</pubDate>
		<dc:creator>ian</dc:creator>
				<category><![CDATA[.NET]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Visual Studio]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[DataBinding]]></category>
		<category><![CDATA[FormatException]]></category>
		<category><![CDATA[visualstudio]]></category>
		<category><![CDATA[wpf]]></category>

		<guid isPermaLink="false">http://www.voyce.com/?p=446</guid>
		<description><![CDATA[A FormatException is generated by the WPF DataBinding diagnostics if the original exception text contains curly brackets.]]></description>
			<content:encoded><![CDATA[<p>While working on some F#/C# WPF code the other day, I kept hitting a fatal FormatException when running under the debugger. Annoyingly, the app would quit with:<br />
<code><br />
An unhandled exception of type 'System.FormatException' occurred in mscorlib.dll<br />
Additional information: Input string was not in a correct format.<br />
</code><br />
But it worked fine when started from Expression Blend, or when run using Start Without Debugging in Visual Studio. Let&#8217;s take a closer look&#8230;<br />
<span id="more-446"></span><br />
Looking at the output window, there seemed to be an intial exception before the FormatException, and from the stack trace the second one seemed to be generated as WPF was trying to log the first one:</p>
<p><a href="http://72.47.193.211/wp-content/uploads/2009/10/callstack.png"><img src="http://www.voyce.com/wp-content/uploads/2009/10/callstack-300x113.png" alt="callstack" title="callstack" width="300" height="113" class="size-medium wp-image-449" /></a></p>
<p>I had a look at the text of the first exception, and from that it was obvious:</p>
<p><code><br />
Unable to cast COM object of type 'System.__ComObject' to interface type 'IWhatever'. This operation failed because the QueryInterface call on the COM component for the interface with IID '<b>{</b>CAD939D0-5E5D-11D7-AA0B-0002B33FE9DX<b>}</b>' failed due to the following error: Bad variable type. (Exception from HRESULT: 0x80020008 (DISP_E_BADVARTYPE)).<br />
</code></p>
<p>The message contains curly brackets around the IID, and they&#8217;re being intrepreted as insertion points by a call to String.Format!</p>
<h2>Workaround</h2>
<p>So that explained why it only happens in debugger runs; as <a href="http://blogs.msdn.com/mikehillberg/archive/2006/09/14/WpfTraceSources.aspx">this post</a> helpfully points out the WPF databinding is enabled by default in that case. To workaround it, you can disable logging programmatically or using the App.config file to only display <code>Critical</code> output. So if your app is named foo.exe, create a file foo.exe.config that contains:</p>
<div style="font-family: Consolas; font-size: 10pt; color: black; background: white;">
<pre style="margin: 0px;"><span style="color: blue;">&lt;</span><span style="color: #a31515;">configuration</span><span style="color: blue;">&gt;</span></pre>
<pre style="margin: 0px;"><span style="color: blue;">&nbsp; &lt;</span><span style="color: #a31515;">system.diagnostics</span><span style="color: blue;">&gt;</span></pre>
<pre style="margin: 0px;"><span style="color: blue;">&nbsp; &nbsp; &lt;</span><span style="color: #a31515;">sources</span><span style="color: blue;">&gt;</span></pre>
<pre style="margin: 0px;"><span style="color: blue;">&nbsp; &nbsp; &nbsp; &lt;</span><span style="color: #a31515;">source</span><span style="color: blue;"> </span><span style="color: red;">name</span><span style="color: blue;">=</span>"<span style="color: blue;">System.Windows.Data</span>"<span style="color: blue;"> </span><span style="color: red;">switchName</span><span style="color: blue;">=</span>"<span style="color: blue;">SourceSwitch</span>"<span style="color: blue;">/&gt;</span></pre>
<pre style="margin: 0px;"><span style="color: blue;">&nbsp; &nbsp; &lt;/</span><span style="color: #a31515;">sources</span><span style="color: blue;">&gt;</span></pre>
<pre style="margin: 0px;">&nbsp;</pre>
<pre style="margin: 0px;"><span style="color: blue;">&nbsp; &nbsp; &lt;</span><span style="color: #a31515;">switches</span><span style="color: blue;">&gt;</span></pre>
<pre style="margin: 0px;"><span style="color: blue;">&nbsp; &nbsp; &nbsp; &lt;</span><span style="color: #a31515;">add</span><span style="color: blue;"> </span><span style="color: red;">name</span><span style="color: blue;">=</span>"<span style="color: blue;">SourceSwitch</span>"<span style="color: blue;"> </span><span style="color: red;">value</span><span style="color: blue;">=</span>"<span style="color: blue;">Critical</span>"<span style="color: blue;"> /&gt;</span></pre>
<pre style="margin: 0px;"><span style="color: blue;">&nbsp; &nbsp; &lt;/</span><span style="color: #a31515;">switches</span><span style="color: blue;">&gt;</span></pre>
<pre style="margin: 0px;">&nbsp;</pre>
<pre style="margin: 0px;"><span style="color: blue;">&nbsp; &lt;/</span><span style="color: #a31515;">system.diagnostics</span><span style="color: blue;">&gt;</span></pre>
<pre style="margin: 0px;"><span style="color: blue;">&lt;/</span><span style="color: #a31515;">configuration</span><span style="color: blue;">&gt;</span></pre>
</div>
<h2>Fix&#8230;?</h2>
<p>Hopefully there&#8217;ll be a fix for this at some point soon, as disabling the logging is a pretty large hammer to crack this small nut.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.voyce.com/index.php/2009/10/14/formatexception-in-wpf-databinding/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Visualising Black-Scholes option pricing using F# and WPF</title>
		<link>http://www.voyce.com/index.php/2009/06/26/black-scholes-option-pricing-using-fsharp-and-wpf/</link>
		<comments>http://www.voyce.com/index.php/2009/06/26/black-scholes-option-pricing-using-fsharp-and-wpf/#comments</comments>
		<pubDate>Fri, 26 Jun 2009 16:17:10 +0000</pubDate>
		<dc:creator>ian</dc:creator>
				<category><![CDATA[.NET]]></category>
		<category><![CDATA[F#]]></category>
		<category><![CDATA[Software Development]]></category>
		<category><![CDATA[wpf]]></category>

		<guid isPermaLink="false">http://www.voyce.com/?p=173</guid>
		<description><![CDATA[Using F# to create simple plots of Black-Scholes option prices and greeks using WPF.]]></description>
			<content:encoded><![CDATA[<p>The other day I was looking for an example of some code relevant to finance that I could use as a test for experimenting with Windows Presentation Foundation (WPF) and F#. I decided I could use a simple Black-Scholes option pricer combined with WPF to easily visualise how the option inputs affect the value and greeks. For example, given all the usual Black-Scholes assumptions, and a non-zero interest rate, you&#8217;d expect the value of an at-the-money call option to increase as time to expiry increases, whereas a put option would decrease in value.</p>
<h3>Calculating option values using F#</h3>
<p>The first thing you need is an approximation to the cumulative normal distribution. I used the Abromowitz and Stegun approximation, which should give us enough precision. It&#8217;s fairly concise to implement in F#:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">let</span> ncdf x <span style="color: #000080;">=</span>
  <span style="color: #06c; font-weight: bold;">let</span> b1 <span style="color: #000080;">=</span>  <span style="color: #c6c;">0.319381530</span>
  <span style="color: #06c; font-weight: bold;">let</span> b2 <span style="color: #000080;">=</span> <span style="color: #000080;">-</span><span style="color: #c6c;">0.356563782</span>
  <span style="color: #06c; font-weight: bold;">let</span> b3 <span style="color: #000080;">=</span>  <span style="color: #c6c;">1.781477937</span>
  <span style="color: #06c; font-weight: bold;">let</span> b4 <span style="color: #000080;">=</span> <span style="color: #000080;">-</span><span style="color: #c6c;">1.821255978</span>
  <span style="color: #06c; font-weight: bold;">let</span> b5 <span style="color: #000080;">=</span>  <span style="color: #c6c;">1.330274429</span>
  <span style="color: #06c; font-weight: bold;">let</span> p  <span style="color: #000080;">=</span>  <span style="color: #c6c;">0.2316419</span>
  <span style="color: #06c; font-weight: bold;">let</span> c  <span style="color: #000080;">=</span>  <span style="color: #c6c;">0.39894228</span>
  <span style="color: #06c; font-weight: bold;">match</span> x <span style="color: #06c; font-weight: bold;">with</span>
  <span style="color: #000080;">|</span> x <span style="color: #06c; font-weight: bold;">when</span> x <span style="color: #000080;">&gt;=</span> <span style="color: #c6c;">0.0</span> <span style="color: #000080;">-&gt;</span>
    <span style="color: #06c; font-weight: bold;">let</span> t <span style="color: #000080;">=</span> <span style="color: #c6c;">1.0</span> <span style="color: #000080;">/</span> <span style="color: #000080;">&#40;</span><span style="color: #c6c;">1.0</span> <span style="color: #000080;">+</span> p <span style="color: #000080;">*</span> x<span style="color: #000080;">&#41;</span>
    <span style="color: #000080;">&#40;</span><span style="color: #c6c;">1.0</span> <span style="color: #000080;">-</span> c <span style="color: #000080;">*</span> Math<span style="color: #000080;">.</span><span style="color: #505090;">Exp</span><span style="color: #000080;">&#40;</span> <span style="color: #000080;">-</span>x <span style="color: #000080;">*</span> x <span style="color: #000080;">/</span> <span style="color: #c6c;">2.0</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">*</span> t <span style="color: #000080;">*</span> <span style="color: #000080;">&#40;</span>t<span style="color: #000080;">*</span><span style="color: #000080;">&#40;</span>t<span style="color: #000080;">*</span><span style="color: #000080;">&#40;</span>t<span style="color: #000080;">*</span><span style="color: #000080;">&#40;</span>t<span style="color: #000080;">*</span>b5<span style="color: #000080;">+</span>b4<span style="color: #000080;">&#41;</span><span style="color: #000080;">+</span>b3<span style="color: #000080;">&#41;</span><span style="color: #000080;">+</span>b2<span style="color: #000080;">&#41;</span><span style="color: #000080;">+</span>b1<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
  <span style="color: #000080;">|</span> <span style="color: #06c; font-weight: bold;">_</span> <span style="color: #000080;">-&gt;</span>
    <span style="color: #06c; font-weight: bold;">let</span> t <span style="color: #000080;">=</span> <span style="color: #c6c;">1.0</span> <span style="color: #000080;">/</span> <span style="color: #000080;">&#40;</span><span style="color: #c6c;">1.0</span> <span style="color: #000080;">-</span> p <span style="color: #000080;">*</span> x<span style="color: #000080;">&#41;</span>
    <span style="color: #000080;">&#40;</span>c <span style="color: #000080;">*</span> Math<span style="color: #000080;">.</span><span style="color: #505090;">Exp</span><span style="color: #000080;">&#40;</span> <span style="color: #000080;">-</span>x <span style="color: #000080;">*</span> x <span style="color: #000080;">/</span> <span style="color: #c6c;">2.0</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">*</span> t <span style="color: #000080;">*</span> <span style="color: #000080;">&#40;</span>t<span style="color: #000080;">*</span><span style="color: #000080;">&#40;</span>t<span style="color: #000080;">*</span><span style="color: #000080;">&#40;</span>t<span style="color: #000080;">*</span><span style="color: #000080;">&#40;</span>t<span style="color: #000080;">*</span>b5<span style="color: #000080;">+</span>b4<span style="color: #000080;">&#41;</span><span style="color: #000080;">+</span>b3<span style="color: #000080;">&#41;</span><span style="color: #000080;">+</span>b2<span style="color: #000080;">&#41;</span><span style="color: #000080;">+</span>b1<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>The CDF should be near 0 for low values, around 0.5 for zero, and near 1 for high values. Let&#8217;s check:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #000080;">&gt;</span> <span style="color: #000080;">&#91;</span><span style="color: #000080;">-</span><span style="color: #c6c;">5.0</span><span style="color: #000080;">;</span> <span style="color: #c6c;">0.0</span><span style="color: #000080;">;</span> <span style="color: #c6c;">5.0</span><span style="color: #000080;">&#93;</span> <span style="color: #000080;">|&gt;</span> List<span style="color: #000080;">.</span><span style="color: #505090;">map</span> ncdf<span style="color: #000080;">;;</span>
<span style="color: #06c; font-weight: bold;">val</span> it <span style="color: #000080;">:</span> float list <span style="color: #000080;">=</span> <span style="color: #000080;">&#91;</span>2<span style="color: #000080;">.</span>871049992e<span style="color: #000080;">-</span>07<span style="color: #000080;">;</span> <span style="color: #c6c;">0.500000001</span><span style="color: #000080;">;</span> <span style="color: #c6c;">0.9999997129</span><span style="color: #000080;">&#93;</span></pre></div></div>

<p>Looks good.</p>
<p>Now let&#8217;s put it to use by implementing the option pricing formula for call options:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">let</span> call strike spot <span style="color: #000080;">&#40;</span>rate<span style="color: #000080;">:</span>float<span style="color: #000080;">&#41;</span> <span style="color: #000080;">&#40;</span>now<span style="color: #000080;">:</span>float<span style="color: #000080;">&#41;</span> <span style="color: #000080;">&#40;</span>expiry<span style="color: #000080;">:</span>float<span style="color: #000080;">&#41;</span> <span style="color: #000080;">&#40;</span>vol<span style="color: #000080;">:</span>float<span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
    <span style="color: #06c; font-weight: bold;">let</span> exp <span style="color: #000080;">=</span> expiry<span style="color: #000080;">-</span>now
    <span style="color: #06c; font-weight: bold;">let</span> d1 <span style="color: #000080;">=</span> <span style="color: #000080;">&#40;</span>Math<span style="color: #000080;">.</span><span style="color: #505090;">Log</span><span style="color: #000080;">&#40;</span>spot<span style="color: #000080;">/</span>strike<span style="color: #000080;">&#41;</span> <span style="color: #000080;">+</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#40;</span>rate<span style="color: #000080;">+</span><span style="color: #000080;">&#40;</span>vol<span style="color: #000080;">*</span>vol<span style="color: #000080;">&#41;</span><span style="color: #000080;">/</span><span style="color: #c6c;">2.0</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">*</span>exp<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">/</span><span style="color: #000080;">&#40;</span>vol <span style="color: #000080;">*</span> Math<span style="color: #000080;">.</span><span style="color: #505090;">Sqrt</span><span style="color: #000080;">&#40;</span>exp<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
    <span style="color: #06c; font-weight: bold;">let</span> d2 <span style="color: #000080;">=</span> d1 <span style="color: #000080;">-</span> <span style="color: #000080;">&#40;</span>vol <span style="color: #000080;">*</span> <span style="color: #000080;">&#40;</span>Math<span style="color: #000080;">.</span><span style="color: #505090;">Sqrt</span><span style="color: #000080;">&#40;</span>exp<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
    <span style="color: #000080;">&#40;</span>spot <span style="color: #000080;">*</span> ncdf d1<span style="color: #000080;">&#41;</span> <span style="color: #000080;">-</span> <span style="color: #000080;">&#40;</span>strike <span style="color: #000080;">*</span> Math<span style="color: #000080;">.</span><span style="color: #505090;">Pow</span><span style="color: #000080;">&#40;</span>Math<span style="color: #000080;">.</span><span style="color: #505090;">E</span>, <span style="color: #000080;">-</span>rate<span style="color: #000080;">*</span>exp<span style="color: #000080;">&#41;</span><span style="color: #000080;">*</span><span style="color: #000080;">&#40;</span>ncdf d2<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>, ncdf d1</pre></div></div>

<p>Notice that the function returns a tuple of (value,delta). Give that the greeks are available analytically we may as well return them at the same time as the value.</p>
<p>We can poke this a bit to check that it&#8217;s doing the right thing. A call option that&#8217;s way in-the-money (i.e. spot > strike) near to expiry, has a lot of intrinsic value:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #000080;">&gt;</span> call <span style="color: #c6c;">10.0</span> <span style="color: #c6c;">100.0</span> <span style="color: #c6c;">0.0</span> <span style="color: #c6c;">0.0</span> <span style="color: #c6c;">0.1</span> <span style="color: #c6c;">0.5</span><span style="color: #000080;">;;</span>
<span style="color: #06c; font-weight: bold;">val</span> it <span style="color: #000080;">:</span> float <span style="color: #000080;">*</span> float <span style="color: #000080;">=</span> <span style="color: #000080;">&#40;</span><span style="color: #c6c;">90.0</span>, <span style="color: #c6c;">1.0</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>An at-the-money call option should have a delta close to 0.5 at expiry:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #000080;">&gt;</span> call <span style="color: #c6c;">10.0</span> <span style="color: #c6c;">10.0</span> <span style="color: #c6c;">0.0</span> <span style="color: #c6c;">0.0</span> <span style="color: #c6c;">0.1</span> <span style="color: #c6c;">0.5</span><span style="color: #000080;">;;</span>
<span style="color: #06c; font-weight: bold;">val</span> it <span style="color: #000080;">:</span> float <span style="color: #000080;">*</span> float <span style="color: #000080;">=</span> <span style="color: #000080;">&#40;</span><span style="color: #c6c;">0.6301280626</span>, <span style="color: #c6c;">0.5315064031</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>All seems fine.</p>
<p>So lets see what we can do about visualising these relationships.</p>
<h3>Using WPF with F#</h3>
<p>You&#8217;d be forgiven for thinking that the XAML markup language is the only way to construct user interfaces in WPF. Indeed, if you want to avoid writing code it&#8217;s the way to go. But unfortunately it&#8217;s not possible to use F# as the code-behind XAML files, so you&#8217;re forced to use C#. And it&#8217;s also not as dynamic or immediate as it could be; involving the usual write, compile, run iteration. We can do better in F# using scripts and F# interactive (FSI).</p>
<p>The key is to construct the WPF object model imperatively, rather than declaratively with XAML. Yeah, I know this is normally the opposite of what you&#8217;d want to do.</p>
<p>For instance, here&#8217;s some code to create a Canvas. Note the use of a construction expression to both create the object and set some of it&#8217;s properties. This is just syntactic sugar which helps to make the object </i>look</i> slightly less mutable than it actually is:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">    <span style="color: #06c; font-weight: bold;">let</span> c <span style="color: #000080;">=</span> <span style="color: #06c; font-weight: bold;">new</span> Canvas<span style="color: #000080;">&#40;</span>Name<span style="color: #000080;">=</span><span style="color: #008080;">&quot;Canvas&quot;</span>, Width<span style="color: #000080;">=</span><span style="color: #c6c;">250.0</span>, Height<span style="color: #000080;">=</span><span style="color: #c6c;">250.0</span><span style="color: #000080;">&#41;</span>
    c<span style="color: #000080;">.</span><span style="color: #505090;">Background</span> <span style="color: #000080;">&lt;-</span> SolidColorBrush<span style="color: #000080;">&#40;</span>Color<span style="color: #000080;">.</span><span style="color: #505090;">FromRgb</span><span style="color: #000080;">&#40;</span>228uy,228uy,228uy<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>We can use the WPF canvas panel to enable us to explicitly place points (or rather, Rectangles) on our plot, it uses absolute locations rather than the implied flow layout of the other containers (Grid, StackPanel etc). Putting this together, we can write a function which will take a parent Panel, and a list of (x,y) tuples and create a plot:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">let</span> plot <span style="color: #000080;">&#40;</span>panel<span style="color: #000080;">:</span>Panel<span style="color: #000080;">&#41;</span> <span style="color: #000080;">&#40;</span>pts<span style="color: #000080;">:</span><span style="color: #000080;">&#40;</span>double <span style="color: #000080;">*</span> double<span style="color: #000080;">&#41;</span> list<span style="color: #000080;">&#41;</span> <span style="color: #000080;">=</span>
    <span style="color: #06c; font-weight: bold;">let</span> bgc <span style="color: #000080;">=</span> <span style="color: #06c; font-weight: bold;">new</span> Canvas<span style="color: #000080;">&#40;</span>Name<span style="color: #000080;">=</span><span style="color: #008080;">&quot;Canvas&quot;</span>, Width<span style="color: #000080;">=</span><span style="color: #c6c;">300.0</span>, Height<span style="color: #000080;">=</span><span style="color: #c6c;">300.0</span><span style="color: #000080;">&#41;</span>
    <span style="color: #06c; font-weight: bold;">let</span> c <span style="color: #000080;">=</span> <span style="color: #06c; font-weight: bold;">new</span> Canvas<span style="color: #000080;">&#40;</span>Name<span style="color: #000080;">=</span><span style="color: #008080;">&quot;Canvas&quot;</span>, Width<span style="color: #000080;">=</span><span style="color: #c6c;">250.0</span>, Height<span style="color: #000080;">=</span><span style="color: #c6c;">250.0</span><span style="color: #000080;">&#41;</span>
    c<span style="color: #000080;">.</span><span style="color: #505090;">SetValue</span><span style="color: #000080;">&#40;</span>Canvas<span style="color: #000080;">.</span><span style="color: #505090;">LeftProperty</span>, <span style="color: #c6c;">25.0</span><span style="color: #000080;">&#41;</span>
    c<span style="color: #000080;">.</span><span style="color: #505090;">SetValue</span><span style="color: #000080;">&#40;</span>Canvas<span style="color: #000080;">.</span><span style="color: #505090;">TopProperty</span>, <span style="color: #c6c;">25.0</span><span style="color: #000080;">&#41;</span>
    c<span style="color: #000080;">.</span><span style="color: #505090;">Background</span> <span style="color: #000080;">&lt;-</span> SolidColorBrush<span style="color: #000080;">&#40;</span>Color<span style="color: #000080;">.</span><span style="color: #505090;">FromRgb</span><span style="color: #000080;">&#40;</span>228uy,228uy,228uy<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
    <span style="color: #06c; font-weight: bold;">let</span> x,y <span style="color: #000080;">=</span> pts <span style="color: #000080;">|&gt;</span> List<span style="color: #000080;">.</span><span style="color: #505090;">unzip</span>
    <span style="color: #06c; font-weight: bold;">let</span> xmin,xmax <span style="color: #000080;">=</span> x <span style="color: #000080;">|&gt;</span> List<span style="color: #000080;">.</span><span style="color: #505090;">min</span>, x <span style="color: #000080;">|&gt;</span> List<span style="color: #000080;">.</span><span style="color: #505090;">max</span>
    <span style="color: #06c; font-weight: bold;">let</span> ymin,ymax <span style="color: #000080;">=</span> y <span style="color: #000080;">|&gt;</span> List<span style="color: #000080;">.</span><span style="color: #505090;">min</span>, y <span style="color: #000080;">|&gt;</span> List<span style="color: #000080;">.</span><span style="color: #505090;">max</span>
    <span style="color: #06c; font-weight: bold;">let</span> xscale <span style="color: #000080;">=</span> c<span style="color: #000080;">.</span><span style="color: #505090;">Width</span> <span style="color: #000080;">/</span> <span style="color: #000080;">&#40;</span>xmax<span style="color: #000080;">-</span>xmin<span style="color: #000080;">&#41;</span>
    <span style="color: #06c; font-weight: bold;">let</span> yscale <span style="color: #000080;">=</span> c<span style="color: #000080;">.</span><span style="color: #505090;">Height</span> <span style="color: #000080;">/</span> <span style="color: #000080;">&#40;</span>ymax<span style="color: #000080;">-</span>ymin<span style="color: #000080;">&#41;</span>
    pts
    <span style="color: #000080;">|&gt;</span> List<span style="color: #000080;">.</span><span style="color: #505090;">map</span> <span style="color: #000080;">&#40;</span><span style="color: #06c; font-weight: bold;">fun</span> pt <span style="color: #000080;">-&gt;</span>
        <span style="color: #06c; font-weight: bold;">let</span> p <span style="color: #000080;">=</span> <span style="color: #06c; font-weight: bold;">new</span> Rectangle<span style="color: #000080;">&#40;</span>Width<span style="color: #000080;">=</span><span style="color: #c6c;">2.0</span>,Height<span style="color: #000080;">=</span><span style="color: #c6c;">2.0</span><span style="color: #000080;">&#41;</span>
        p<span style="color: #000080;">.</span><span style="color: #505090;">Stroke</span> <span style="color: #000080;">&lt;-</span> <span style="color: #06c; font-weight: bold;">new</span> SolidColorBrush<span style="color: #000080;">&#40;</span>Color<span style="color: #000080;">.</span><span style="color: #505090;">FromRgb</span><span style="color: #000080;">&#40;</span>0uy,0uy,0uy<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
        p<span style="color: #000080;">.</span><span style="color: #505090;">SetValue</span><span style="color: #000080;">&#40;</span> Canvas<span style="color: #000080;">.</span><span style="color: #505090;">LeftProperty</span>, <span style="color: #000080;">&#40;</span>fst pt <span style="color: #000080;">-</span> xmin<span style="color: #000080;">&#41;</span> <span style="color: #000080;">*</span> xscale<span style="color: #000080;">&#41;</span>
        p<span style="color: #000080;">.</span><span style="color: #505090;">SetValue</span><span style="color: #000080;">&#40;</span> Canvas<span style="color: #000080;">.</span><span style="color: #505090;">TopProperty</span>, c<span style="color: #000080;">.</span><span style="color: #505090;">Height</span> <span style="color: #000080;">-</span> <span style="color: #000080;">&#40;</span>snd pt <span style="color: #000080;">-</span> ymin<span style="color: #000080;">&#41;</span> <span style="color: #000080;">*</span> yscale<span style="color: #000080;">&#41;</span>
        p
        <span style="color: #000080;">&#41;</span>
    <span style="color: #000080;">|&gt;</span> List<span style="color: #000080;">.</span><span style="color: #505090;">iter</span> <span style="color: #000080;">&#40;</span><span style="color: #06c; font-weight: bold;">fun</span> rect <span style="color: #000080;">-&gt;</span>
        ignore <span style="color: #000080;">&lt;|</span> c<span style="color: #000080;">.</span><span style="color: #505090;">Children</span><span style="color: #000080;">.</span><span style="color: #505090;">Add</span> rect<span style="color: #000080;">&#41;</span>
    ignore <span style="color: #000080;">&lt;|</span> bgc<span style="color: #000080;">.</span><span style="color: #505090;">Children</span><span style="color: #000080;">.</span><span style="color: #505090;">Add</span> <span style="color: #000080;">&#40;</span>fst <span style="color: #000080;">&#40;</span>makeYScale ymin ymax<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
    ignore <span style="color: #000080;">&lt;|</span> bgc<span style="color: #000080;">.</span><span style="color: #505090;">Children</span><span style="color: #000080;">.</span><span style="color: #505090;">Add</span> <span style="color: #000080;">&#40;</span>fst <span style="color: #000080;">&#40;</span>makeXScale xmin xmax<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
    ignore <span style="color: #000080;">&lt;|</span> bgc<span style="color: #000080;">.</span><span style="color: #505090;">Children</span><span style="color: #000080;">.</span><span style="color: #505090;">Add</span> c
    ignore <span style="color: #000080;">&lt;|</span> panel<span style="color: #000080;">.</span><span style="color: #505090;">Children</span><span style="color: #000080;">.</span><span style="color: #505090;">Add</span> bgc
    <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>The function returns nothing (unit in F# parlance) and performs a side-effecting modify of the passed Panel. I&#8217;ve omitted the makeXScale and makeYScale functions, as they&#8217;re a bit gnarly, and don&#8217;t really serve to demonstrate anything in particular.</p>
<p>Now we need to create some data to plot. We can do this in many ways, but one thing I looked at was creating a set of call option values with varying time to expiry. I thought this could use a floating point sequence, but it generated a deprecation warning, so I decided to do it long hand instead. This function returns a list of (time,value) tuples, where time range from <code>rfrom</code> to <code>rto</code> in </code>num</code> steps and value is calculated using the passed function <code>f</code>.</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">let</span> varyExpiry f num rfrom rto <span style="color: #000080;">=</span>
    List<span style="color: #000080;">.</span><span style="color: #505090;">init</span> num <span style="color: #000080;">&#40;</span><span style="color: #06c; font-weight: bold;">fun</span> n <span style="color: #000080;">-&gt;</span>
        <span style="color: #06c; font-weight: bold;">let</span> s <span style="color: #000080;">=</span> rfrom <span style="color: #000080;">+</span> <span style="color: #000080;">&#40;</span><span style="color: #000080;">&#40;</span>float n<span style="color: #000080;">/</span>float num<span style="color: #000080;">&#41;</span> <span style="color: #000080;">*</span> <span style="color: #000080;">&#40;</span>rto<span style="color: #000080;">-</span>rfrom<span style="color: #000080;">&#41;</span><span style="color: #000080;">&#41;</span>
        float s, fst <span style="color: #000080;">&lt;|</span> f <span style="color: #c6c;">10.0</span> <span style="color: #c6c;">10.0</span> <span style="color: #c6c;">0.05</span> <span style="color: #c6c;">0.0</span> s <span style="color: #c6c;">0.5</span> <span style="color: #000080;">&#41;</span></pre></div></div>

<p>We can pass the resulting list directly to our plot function, but first we need to create a window to display it in:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;"><span style="color: #06c; font-weight: bold;">let</span> w <span style="color: #000080;">=</span> <span style="color: #06c; font-weight: bold;">new</span> Window<span style="color: #000080;">&#40;</span>Name<span style="color: #000080;">=</span><span style="color: #008080;">&quot;Plot&quot;</span>,Width<span style="color: #000080;">=</span><span style="color: #c6c;">500.0</span>,Height<span style="color: #000080;">=</span><span style="color: #c6c;">500.0</span><span style="color: #000080;">&#41;</span>
<span style="color: #06c; font-weight: bold;">let</span> wp <span style="color: #000080;">=</span> <span style="color: #06c; font-weight: bold;">new</span> WrapPanel<span style="color: #000080;">&#40;</span><span style="color: #000080;">&#41;</span>
w<span style="color: #000080;">.</span><span style="color: #505090;">Content</span> <span style="color: #000080;">&lt;-</span> wp
w<span style="color: #000080;">.</span><span style="color: #505090;">Visibility</span> <span style="color: #000080;">&lt;-</span> Visibility<span style="color: #000080;">.</span><span style="color: #505090;">Visible</span></pre></div></div>

<p>Executing this code in FSI will display a blank window (probably behind your active window if you're within Visual Studio). Then we can add the plot to the graph:</p>

<div class="wp_syntax"><div class="code"><pre class="fsharp" style="font-family:monospace;">plot wp <span style="color: #000080;">&#40;</span>varyExpiry call <span style="color: #c6c;">100</span> <span style="color: #c6c;">10.0</span> <span style="color: #c6c;">100.0</span><span style="color: #000080;">&#41;</span></pre></div></div>

<p>Voila! Obviously the plot is very, very basic, but it's an interesting experiment, and it does makes it extremely easy to plot functions interactively in almost the same way as you can with applications like Excel and MatLab. Pretty powerful.<br />
<div id="attachment_190" class="wp-caption alignnone" style="width: 160px"><a href="http://72.47.193.211/wp-content/uploads/2009/06/graph_call_expiry.png"><img src="http://www.voyce.com/wp-content/uploads/2009/06/graph_call_expiry-150x150.png" alt="Call option values for varying expiries" title="graph_call_expiry" width="150" height="150" class="size-thumbnail wp-image-190" /></a><p class="wp-caption-text">Call option values for varying expiries</p></div> <div id="attachment_191" class="wp-caption alignnone" style="width: 310px"><a href="http://72.47.193.211/wp-content/uploads/2009/06/graph_call_put_expiry.png"><img src="http://www.voyce.com/wp-content/uploads/2009/06/graph_call_put_expiry-300x170.png" alt="Call and put option values for varying expiries" title="graph_call_put_expiry" width="300" height="170" class="size-medium wp-image-191" /></a><p class="wp-caption-text">Call and put option values for varying expiries</p></div></p>
]]></content:encoded>
			<wfw:commentRss>http://www.voyce.com/index.php/2009/06/26/black-scholes-option-pricing-using-fsharp-and-wpf/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

