Controlling Event Routing

[matthewcrews]

I'm running into a problem where elements beneath others are responding to events what I don't want them to. Based on the AvaloniaUI docs I believe what I want is direct routing (https://docs.avaloniaui.net/docs/input/routed-events#routing-strategies).

I am working in the following repo:
https://github.com/matthewcrews/AvaloniaDragAndDrop

I have a Button on a Canvas. When I right-click on the bottom the Canvas is also responding to the event even though the Canvas is below the Button. It appears that the event Tunnels down from the Parent element (the Canvas) to the Button and then Bubbles back up. What I want is to only have the Button respond to the right-click and prevent the Canvas from responding as well.

You can recreate this by cloning the repo, running the app, and then right clicking on one of the buttons. I cannot find a good example of being able to prevent this Tunneling/Bubbling routing behavior.

[JaggerJo]

You can prevent events from bubbling up by marking them as handled.

Control.onX (fun args ->
    args.Handled <- true
)

[matthewcrews]

I tried that, but it appears that Canvas is responding before the Button. The Button is a child element of the Canvas. I'll try it again but it didn't work last time.

[matthewcrews]

I can confirm that the Canvas is responding to the right-click release before the Button and the Canvas is triggering its handler before the handler of the button. This is in alignment with the docs of AvaloniaUI which says that events Tunnel then bubble. My desire is that the button is the only item responding to the right-click release when the pointer is over the button.

[JaggerJo]

Ahh, sure. You can do it like this https://reference.avaloniaui.net/api/Avalonia.Interactivity/Interactive/CA5C2E9F

Control.init (fun control ->
control.AddHandler ..
)

(I'm on my phone, can't verify)

[matthewcrews]

I ended up solving it by checking the name of the Source.

Canvas.onPointerReleased (fun e ->
    let source : Control = e.Source :?> Control
    if source.Name = canvasName then
        if e.InitialPressMouseButton = MouseButton.Right then
            let newPointerLocation = e.GetPosition null
            Msg.RequestAddItem newPointerLocation |> dispatch
        elif e.InitialPressMouseButton = MouseButton.Left then
            Msg.Escape |> dispatch
        else
            ()
    )

This idea came from the docs:
https://docs.avaloniaui.net/docs/input/routed-events

Where they have the following example code:

private void CommonClickHandler(object sender, RoutedEventArgs e)
{
  var source = e.Source as Control;
  switch (source.Name)
  {
    case "YesButton":
      // do something here ...
      break;
    case "NoButton":
      // do something ...
      break;
    case "CancelButton":
      // do something ...
      break;
  }
  e.Handled=true;
}

I don't like having to do the unsafe cast in F#. It feels wrong, but the Source field on the event is an obj, so you have to in order to use the value.