The goal here is to build a simple application in F# using the Windows
Presentation Foundation (WPF) with traditional menus and dialog boxes. It stems
from my frustration in trying to wade through hundreds of sections of
documentation, articles and posts dealing with F# and WPF. In order to do
anything with WPF, you seem to have to know everything about it. My purpose here
is to provide a possible way in, a simple desktop project that can serve as a
template for your apps.
Add the "Business Logic"
Presumably, your program will do something. Add your working code to the project
in place of Program.fs. In this case, our task is to draw spirograph curves on a
Window Canvas. This is accomplished using Spirograph.fs, below.
Spirograph.fs is the first F# file in the compilation order, so it contains the
definitions of the types we will need. Its job is to draw a spirograph on the
main window Canvas based on parameters entered in a dialog box. Since there are
lots of references on how to draw a spirograph, we won't go into that here.
Add the App.xaml and App.xaml.fs to tie everything together
Here's the code behind:
App.xaml is all boilerplate here, mainly to show where application resources, such
as icons, graphics, or external files - can be declared. The companion App.xaml.fs
pulls together the Model and the MainWindow, sizes the MainWindow to two-thirds of
the available screen size, and runs it.
When you build this, remember to make sure that the Build property for each xaml
file is set to Resource. Then you can either run through the debugger or compile
to an exe file. Note that you cannot run this using the F# interpreter: The
FsXaml package and the interpreter are incompatible.
There you have it. I hope you can use this as a starting point for your own
applications, and in doing so you can extend your knowlege beyond what is shown
here. Any comments and suggestions will be appreciated.
Add the code behind for MainWindow.xaml
There's not a lot going on here: We open the Parameters dialog box when required
and we have the option of redrawing the spirograph with whatever the current
Create the dialog box in XAML and F#
The XAML file for the spirograph parameters is below. It includes three text
boxes for the spirograph parameters and a group of three radio buttons for color.
When we give radio buttons the same group name - as we have here - WPF handles
the on/off switching when one is selected.
Now we add the code behind for the Dialog.Box. By convention, the code used to
handle the interface of the dialog box with the rest of the program is named
XXX.xaml.fs, where the associated XAML file is named XXX.xaml.
Much of the code here is devoted to ensuring that the spirograph parameters in
Spirograph.fs match those shown in this dialog box. Note that there is no error
checking: If you enter a floating point for the integers expected in the top two
parameter fields, the program will crash. So, please add error checking in your
Note also that the parameter input fields are disabled with Random color is picked
in the radio buttons. It's here just to show how it can be done.
In order to move data back and forth between the dialog box and the program I use
the System.Windows.Element.FindName() to find the appropriate control, cast it to
the control it should be, and then get the relevant settings from the Control.
Most other example programs use data binding. I did not for two reasons: First, I
couldn't figure out how to make it work, and second, when it didn't work I got no
error message of any kind. Maybe someone who visits this on StackOverflow can tell
me how to use data binding without including a whole new set of NuGet packages.
Create the main window in XAML
You have to create a XAML file that defines the main window that contains our
menu and drawing space. Here's the XAML code in MainWindow.xaml:
Comments are usually not included in XAML files, which I think is a mistake. I've
added some comments to all the XAML files in this project. I don't assert they are
the best comments ever written, but they at least show how a comment should be
formatted. Note that nested comments are not allowed in XAML.
Set up the Project
We'll assume you're doing this in Visual Studio 2015 (VS 2015 Community, in my
case). Create an empty Console project in VS. In Project | Properties change the
Output Type to Windows Application.
Next, use NuGet to add FsXaml.Wpf to the project; this package was created by
the estimable Reed Copsey, Jr., and it greatly simplifies using WPF from F#. On
installation, it will add a number of other WPF assemblies, so you will not have
to. There are other similar packages to FsXaml, but one of my goals was to keep
the number of tools as small as possible in order to make the overall project as
simple and maintaiable as possible.
In addition, add UIAutomationTypes as a reference; it comes as part of .NET.
This modified text is an extract of the original Stack Overflow Documentation created by following contributors and released under CC BY-SA 3.0