FuncUI
GitHub Repository
  • Getting Started
  • View Basics
    • Creating views
    • Lifetime
    • Attributes
    • How to create bindings
  • Components
    • Component basics
    • Component lifetime
    • Hooks
  • Common Questions
  • Controls
    • Button
    • Border
    • Calendar
    • CalendarDatePicker
    • CheckBox
    • DatePicker
    • DockPanel
    • Expander
    • ListBox
    • Menu
    • NativeMenu
    • NumericUpDown
    • ProgressBar
    • RadioButton
    • RepeatButton
    • Slider
    • StackPanel
    • Tabs
    • TextBlock
    • TextBox
    • TimePicker
    • ToggleButton
    • ToggleSwitch
Powered by GitBook
On this page
  • Step 1: Empty Console App
  • Step 2: Packages
  • Step 3: Add code to Program.fs
  • Step 4: build and run 🎉

Getting Started

Last updated 18 days ago

Step 1: Empty Console App

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

Step 2: Packages

Run the following commands in your project directory:

dotnet add package Avalonia.Desktop --version 11.1.0
dotnet add package Avalonia.Themes.Fluent --version 11.1.0
dotnet add package Avalonia.FuncUI --version 1.5.1

Paste the following package references to your fsproject file:

<PackageReference Include="Avalonia.Desktop" Version="11.1.0" />
<PackageReference Include="Avalonia.Themes.Fluent" Version="11.1.0" />
<PackageReference Include="Avalonia.FuncUI" Version="1.5.1" />

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

Reference the following packages , and .

Avalonia.Desktop
Avalonia.Themes.Fluent
Avalonia.FuncUI
Screenshot of the example app. (Simple counter app with a text block and two buttons)