Avalonia.FuncUI

Avalonia FuncUI

Develop cross-platform GUI Applications using F# and AvaloniaUI!

About

FuncUI is a thin layer built on top of AvaloniaUI. It contains abstractions for writing UI applications in different programming styles. It also contains a component & state management system.

FuncUI mostly consists of:

• Virtual DOM
• View DSL
• Component model

Breaking changes in version 2.0

Version 2.0 of FuncUI is built on Avalonia 12.0. Avalonia 12 has a number of breaking API changes which have necessitated matching breaking changes in FuncUI, such as the removal of previously obsoleted public functions and properties. Refer to the official Breaking changes in Avalonia 12 documentation for full details.

In addition, the DataGrid bindings which were previously built into the core FuncUI library have now been moved to the separate AvaloniaCommunity.FuncUI.Bindings.DataGrid package. This means that if you depend on the DataGrid bindings then you will need to reference the new package from your project, but projects which don’t use DataGrid will no longer have an unused dependency on it.

Resources

• 💨 Getting started

• 📚 Documentation

• 📖 Control Catalog (Samples of available controls)

• 📓 Examples

Contributing

Please contribute to this library through issue reports, pull requests, code reviews, documentation, and discussion.

Examples

Example using components

A simple counter made with the component library:

type Components =
    static member Counter () =
        Component (fun ctx ->
            let state = ctx.useState 0
    
            DockPanel.create [
                DockPanel.children [
                    Button.create [
                        Button.onClick (fun _ -> state.Set(state.Current - 1))
                        Button.content "click to decrement"
                    ]
                    Button.create [
                        Button.onClick (fun _ -> state.Set(state.Current + 1))
                        Button.content "click to increment"
                    ]
                    TextBlock.create [
                        TextBlock.dock Dock.Top
                        TextBlock.text (string state.Current)
                    ]
                ]
            ]
        )

Find more examples using components in the Components Examples folder.

Example using Elmish

The same counter as above but using the Avalonia.FuncUI.Elmish package:

module Counter =
    type CounterState = { count : int }
    let init = { count = 0 }
    type Msg = Increment | Decrement

    let update (msg: Msg) (state: CounterState) : CounterState =
        match msg with
        | Increment -> { state with count =  state.count + 1 }
        | Decrement -> { state with count =  state.count - 1 }
    
    let view (state: CounterState) (dispatch): IView =
        DockPanel.create [
            DockPanel.children [
                Button.create [
                    Button.onClick (fun _ -> dispatch Increment)
                    Button.content "click to increment"
                ]
                Button.create [
                    Button.onClick (fun _ -> dispatch Decrement)
                    Button.content "click to decrement" 
                ]
                TextBlock.create [
                    TextBlock.dock Dock.Top
                    TextBlock.text (sprintf "the count is %i" state.count)
                ]
            ]
        ]    

Find more examples using Elmish in the Elmish Examples folder

Maintainer(s)

The current co-maintainers of Avalonia.FuncUI are

• @Numpsy
• @JordanMarr
• @sleepyfran
• @JaggerJo (project originator)

The default maintainer account for projects under “fsprojects” is @fsprojectsgit - F# Community Project Incubation Space (repo management)

Commercial Support

Provided by Voynoic Systems GmbH

Please reach out to [email protected] if you need a commercial support contract or are interested in contract work.

Star History