KeyUp event not being triggered for Canvas

[matthewcrews]

I am using a Canvas element and want to handle it when the Esc key is pressed. I can handle onPointerReleased events but for some reason I am not triggering when the Esc key is pressed. The following code reproduces the problem.

Code:

open Avalonia
open Avalonia.Themes.Fluent
open Elmish
open Avalonia.FuncUI.Hosts
open Avalonia.FuncUI
open Avalonia.FuncUI.Elmish
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.Controls
open Avalonia.FuncUI.DSL

type Msg =
    | Increment

type State = {
    Value: int
}

module State =

    let init () =
        {
            Value = 0
        }

    let update (msg: Msg) (state: State) =
        match msg with
        | Increment ->
            {
                Value = state.Value + 1
            }

module View =

    let view (state: State) dispatch =
        Canvas.create [
            Canvas.background "DarkSlateGray"
            Canvas.onKeyDown (fun e -> // Does not trigger
                printfn "KeyDown")
            Canvas.onPointerReleased (fun e ->
                printfn "Pointer Release")
        ]

type MainWindow() as this =
    inherit HostWindow()
    do
        base.Title <- "Counter Example"
        base.Height <- 400.0
        base.Width <- 400.0

        Elmish.Program.mkSimple State.init State.update View.view
        |> Program.withHost this
        |> Program.withConsoleTrace
        |> Program.run

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 ->
            let mainWindow = MainWindow()
            desktopLifetime.MainWindow <- mainWindow
        | _ -> ()

module Program =

    [<EntryPoint>]
    let main(args: string[]) =
        AppBuilder
            .Configure<App>()
            .UsePlatformDetect()
            .UseSkia()
            .StartWithClassicDesktopLifetime(args)

[maxkatz6]

Key down is handled from the focused control up the tree to the root. Meaning, you need to have at least some focusable control inside of the Canvas or make itself Focusable=true (and Focus it as well).
Otherwise, key down will be initialized and ended on the Window class as single focusable control in the tree.

[matthewcrews]

Is there a way to register a global handler for the KeyDown event then to be sure that I can capture the event and handle it?

Or, how do you "focus" on the Canvas element?

[maxkatz6]

Is there a way to register a global handler for the KeyDown event then to be sure that I can capture the event and handle it?

Subscribe on TopLevel/Window. Or you can use InputElement.KeyDownEvent.AddClassHandler.

Or, how do you "focus" on the Canvas element?

canvas.Focusable=true; canvas.Focus();

[matthewcrews]

How would I subscribe on TopLevel/Window? Thank you for the help, and my apologies for my ignorance. This is very new territory for me.

[danielmayost]

var topLevel = TopLevel.GetTopLevel(this)!;
topLevel.KeyDown += OnKeyDown;

[matthewcrews]

Do I put that in the MainWindow class?

[danielmayost]

yes

[maxkatz6]

MainWindow is a TopLevel, so you can subscribe directly on it