Add these two files in this order above the files for the main window.
MyControl.xaml
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Height="50" Width="150">
<Canvas Background="LightGreen">
<Button Name="btnMyTest" Content="My Test" Canvas.Left="10" Canvas.Top="10" Height="28" Width="106"/>
</Canvas>
</UserControl>
MyControl.xaml.fs
namespace FirstDemo
type MyControlXaml = FsXaml.XAML<"MyControl.xaml">
type MyControl() =
inherit MyControlXaml()
The Build Action for MyControl.xaml must be set to Resource.
You will of course later need to add "as this" in the declaration of MyControl, just as done for the main window.
In file MainWindow.xaml.fs, in the class for MainWindow, add this line
let myControl = MyControl()
and add these two lines in the do-section of the main window class.
this.mainCanvas.Children.Add myControl |> ignore
myControl.btnMyTest.Content <- "We're in business!"
There can be more than one do-section in a class, and you are likely to need it when writing lots of code-behind code.
The control has been given a light green background color, so that you can easily see where it is.
Be aware that the control will block the button of the main window from view. It is beyond the scope of these examples to teach you WPF in general, so we won't fix that here.