Links

Getting Started

Screenshot of the example app. (Simple counter app with a text block and two buttons)

Step 1: Empty Console App

Create a new F# console application targeting .net 6 or higher.

Step 2: Packages

Reference the following packages Avalonia.Desktop, Avalonia.Themes.Fluent and Avalonia.FuncUI.
dotnet CLI
edit Project file
Run the following commands in your project directory:
dotnet add package Avalonia.Desktop --version 11.0.0-preview5
dotnet add package Avalonia.Themes.Fluent --version 11.0.0-preview5
dotnet add package Avalonia.FuncUI --version 0.6.0-preview7
Paste the following package references to your fsproject file:
<PackageReference Include="Avalonia.Desktop" Version="11.0.0-preview5" />
<PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0-preview5" />
<PackageReference Include="Avalonia.FuncUI" Version="0.6.0-preview7" />

Step 3: Add code to Program.fs

namespace CounterApp
open Avalonia
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.Themes.Fluent
open Avalonia.FuncUI.Hosts
open Avalonia.Controls
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open Avalonia.Layout
module Main =
let view () =
Component(fun ctx ->
let state = ctx.useState 0
DockPanel.create [
DockPanel.children [
Button.create [
Button.dock Dock.Bottom
Button.onClick (fun _ -> state.Set(state.Current - 1))
Button.content "-"
Button.horizontalAlignment HorizontalAlignment.Stretch
Button.horizontalContentAlignment HorizontalAlignment.Center
]
Button.create [
Button.dock Dock.Bottom
Button.onClick (fun _ -> state.Set(state.Current + 1))
Button.content "+"
Button.horizontalAlignment HorizontalAlignment.Stretch
Button.horizontalContentAlignment HorizontalAlignment.Center
]
TextBlock.create [
TextBlock.dock Dock.Top
TextBlock.fontSize 48.0
TextBlock.verticalAlignment VerticalAlignment.Center
TextBlock.horizontalAlignment HorizontalAlignment.Center
TextBlock.text (string state.Current)
]
]
]
)
type MainWindow() =
inherit HostWindow()
do
base.Title <- "Counter Example"
base.Content <- Main.view ()
type App() =
inherit Application()
override this.Initialize() =
this.Styles.Add (FluentTheme())
this.RequestedThemeVariant <- Styling.ThemeVariant.Dark
override this.OnFrameworkInitializationCompleted() =
match this.ApplicationLifetime with
| :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
desktopLifetime.MainWindow <- MainWindow()
| _ -> ()
module Program =
[<EntryPoint>]
let main(args: string[]) =
AppBuilder
.Configure<App>()
.UsePlatformDetect()
.UseSkia()
.StartWithClassicDesktopLifetime(args)

Step 4: build and run 🎉

dotnet run
Last modified 1mo ago