Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Evolution of the F# Empty WPF Template

DZone's Guide to

Evolution of the F# Empty WPF Template

·
Free Resource

 Back in March 2012, I announced that the F# Empty WPF project template had been enhanced to include a type provider from the FSharpx type providers collection. Today, another evolution of the F# Empty WPF template has occurred. The FSharpx.TypeProviders.Xaml type provider has been replaced with Reed Copsey's FsXaml for WPF type provider.

Building a Simple Example:

It's very easy to get started with the latest version of the template as well as FsXaml. Here the steps to create an overly simple example with the new version of the template, FxXaml and FSharp.ViewModule.Core (which is also inclueded in the template):

1. Create a new project with the latest version of the F# Empty Windows App (WPF) template.

2. Build the project and Enable the type provider when requested to do so. You can now run the project, which at this point simply displays a blank screen.

3. Open the MainWindow.xaml.fs file and replace the contents with the following:

namespace ViewModels
 
open System
open System.Windows
open FSharp.ViewModule
open FSharp.ViewModule.Validation
open FsXaml
 
type MainView = XAML<"MainWindow.xaml", true>
 
type MainViewModel() as self =
inherit ViewModelBase()
let name = self.Factory.Backing(<@ self.Name @>, "")
let display = self.Factory.Backing(<@ self.Display @>, "")
 
let goCommand = self.Factory.CommandSyncParam(fun param -> self.Display <- sprintf "Your Name Is: %s" param)
 
member x.Name with get() = name.Value and set value = name.Value <- value
member x.Display with get() = displ

4. Open the MainWindow.xaml file add the following to the Grid element:
 <Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="5" Text="Enter Your Name:" FontSize="16" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBox Margin="5" Grid.Row="1" Grid.Column="0" FontSize="16" Text="{Binding Name}"/>
<Button Margin="3" Grid.Row="1" Grid.Column="1" FontSize="16" Content="Go"
Command="{Binding GoCommand}" CommandParameter="{Binding Name}"/>
<Label Foreground="Gray" Margin="5" Grid.ColumnSpan="2" Grid.Row="2"
FontSize="16" Content="{Binding Display, Mode=OneWay}"/> 

After this change, the MainWindow.xaml file will look something like the following with one small different depending on what you named your project:

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ViewModels;assembly=FsEmptyWindowsApp1"
xmlns:fsxaml="http://github.com/fsprojects/FsXaml"
Title="MVVM and XAML Type provider" Height="200" Width="400">
<Window.DataContext>
<local:MainViewModel/>
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="5" Text="Enter Your Name:" FontSize="16" Grid.Row="0" Grid.ColumnSpan="2" />
<TextBox Margin="5" Grid.Row="1" Grid.Column="0" FontSize="16" Text="{Binding Name}"/>
<Button Margin="3" Grid.Row="1" Grid.Column="1" FontSize="16" Content="Go" Command="{Binding GoCommand}" CommandParameter="{Binding Name}"/>
<Label Foreground="Gray" Margin="5" Grid.ColumnSpan="2" Grid.Row="2" FontSize="16" Content="{Binding Display, Mode=OneWay}"/>
</Grid>
</Window> 

For additional examples checkout the demos in the FsXaml GitHub repo.

Topics:

Published at DZone with permission of Daniel Mohl, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}