In the previous post we only looked into the problems we face in adopting F# as a language in our daily development work. The idea in this post is to show how adoption of F# is easy. We will look into creating complete WPF apps using F# without any UI separation code with C# or any other .NET language. There is no reason behind following this model, but it shows how to adopt F# with WPF / Silverlight UI platforms. We do use some workarounds in the way to achieve our goal, but then if you want to fully adopt then this certainly is one way to do it.
As we already had looked into the MVVM pattern, it gives a nice separation of code from the UI with the Model that drives the UI.
We will only check out the how-tos to create a WPF application and get it up and running with pure F# code.
Creating a WPF Application with F#
1. File –> New Project –> Visual F# –> F# Application
2. Add references to WPF related assemblies,
- System.Xaml.dll (.NET 4.0 FW)
3. Open Program.fs and add the below code,
open System open System.Windows [<STAThread>] [<EntryPoint>] let main(_) = 0
4. Next, we add an XML file with .xaml as the extension. This is a workaround may be in future version of F# we may have a XAML template to directly add it. Just name it “Window1.xaml” and add the below code,
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="640" Height="480"> </Window>
Note: Make sure that Window1.xaml is set to "Resource”. Click on the Window1.xaml file and view its properties to change the build action to “Resource”.
5. Lets design some markup just for the demo. It has a simple Grid panel with TextBox, Button and a TextBlock data-binded to the TextBox. We also listen to the click event and show a Message window with the TextBox.Text value. One more important thing is that we use Visual Studio to do the designing.
6. We now need to connect this code with the application and run it. We will also add up some utility functions that would help load this XAML file. Please check the full WpfUtils.fs in the sample attached in the end of this post.
7. Add a new F# file named “Window1.xaml.fs” and add the below code,
namespace iBlue.Demos open System open System.Windows open System.Windows.Controls open WpfUtils type Window1() = let window = WpfUtils.LoadXAML<Window>(new Uri("/MyFirstFApp;component/Window1.xaml", UriKind.Relative)) let btnClick : Button = window?btnClick do btnClick.Click.Add(fun _ -> MessageBox.Show("Clicked") |> ignore) member x.Instance with get() = window
Note: F# doesn’t have the notion of partial classes. We simply define the name as “Window1.xaml.fs” without any implementation of the actual window.
Some important points to note in the above code snippet,
This method uses Application.LoadComponent based on the Uri specified. Remember we already defined the Window1.xaml as an “Embedded Resource”, the Uri takes the parameters based on this convention and passes on to the Application.LoadComponent method.
This is a convention to find the element in the visual tree of the application. If we declare a UIElement with x:Name attribute, we can then use this notation to identify the element and use it to do some code-behind operations. In the above code it simply shows a message “Clicked”.
Note: Ideal way to deal with maintaining a Window instance is to do all XAML code in UserControl, and then use them to set the content of the Window through F# code.
8. The final step is to load up the window from the entry point (“Program.fs”) code.
open System open System.Windows open iBlue.Demos [<STAThread>] [<EntryPoint>] let main(_) = let window = new Window1() let app = new Application() app.Run(window.Instance)
9. Hit F5 to run the application.
That’s it, We now have a full fledged WPF application that completely runs on F# code. Although it required a bit of learning curve, it is still relatively easy to understand WPF and make it easily usable with F# code. Download the sample from here.
In the next post we will do a video tutorial on creating a small time Twitter application and walkthrough the details of the Application using MVVM pattern.