Drag and Drop Button

[matthewcrews]

I have a simple app here:
https://github.com/matthewcrews/AvaloniaDragAndDrop

It contains a window with a button that I'm trying to enable click and drag for using the Elmish style. The logic is the following:

module Counter =

    open Avalonia.FuncUI.DSL
    open Avalonia.Controls
    open Avalonia.Layout

    type State = {
        IsSelected: bool
        X : float
        Y : float
    }
    let init() = {
        IsSelected = false
        X = 10.0
        Y = 10.0
    }

    type Msg =
    | Selected
    | Deselected
    | Move of x: float * y: float

    let update (msg: Msg) (state: State) : State =
        match msg with
        | Selected ->
            { state with IsSelected = true }
        | Deselected ->
            { state with IsSelected = false }
        | Move (x, y) ->
            if state.IsSelected then
                { state with X = x; Y = y }
            else
                state

    let view (state: State) (dispatch) =
        Button.create [
            Button.top state.Y
            Button.left state.X
            Button.width 10.0
            Button.height 10.0
            Button.background "Blue"
            Button.onPointerPressed (fun _ ->
                Msg.Selected |> dispatch)
            Button.onPointerReleased (fun _ ->
                Msg.Deselected |> dispatch)
            Button.onPointerMoved (fun e ->
                let delta = e.GetPosition null
                Msg.Move (delta.X, delta.Y) |> dispatch)
        ]

I'm not getting any movement and the Select/Deselect logic doesn't appear to be working. I feel like I'm missing something simple and fundamental.

[JaggerJo]

Hey @matthewcrews 👋

Top, Left, Right, Top are attached properties of the canvas. You need to wrap the button control in a canvas for them to have any effect.

    let view (state: State) (dispatch) =
        Canvas.create [
            Canvas.children [
                Button.create [
                    Button.top state.Y
                    Button.left state.X
                    Button.width 10.0
                    Button.height 10.0
                    Button.background "Blue"
                    Button.onPointerPressed (fun _ ->
                        Msg.Selected |> dispatch)
                    Button.onPointerReleased (fun _ ->
                        Msg.Deselected |> dispatch)
                    Button.onPointerMoved (fun e ->
                        let delta = e.GetPosition null
                        Msg.Move (delta.X, delta.Y) |> dispatch)
                ]
            ]
        ]

[matthewcrews]

Thank you @JaggerJo , works beautifully!

If I have a follow-up question, is it best to ask here or start a new question?

I'm trying to get the position relative to the Canvas, but I can't figure out how to reference it for the GetPosition method. If this is not the place to ask, let me know and I'll move it 😊.

let view (state: State) (dispatch) =
    Canvas.create [
        Canvas.children [
            Button.create [
                Button.top state.Y
                Button.left state.X
                Button.width 100.0
                Button.height 50.0
                Button.background "Blue"
                Button.onPointerPressed (fun _ ->
                    Msg.Selected |> dispatch)
                Button.onPointerReleased (fun _ ->
                    Msg.Deselected |> dispatch)
                Button.onPointerMoved (fun e ->
                    let delta = e.GetPosition Parent // <-- I'm wanting the position relative to the Canvas which is the Parent
                    Msg.Move (delta.X, delta.Y) |> dispatch)
            ]
        ]
    ]

[JaggerJo]

https://funcui.avaloniaui.net/common-questions#2.-obtain-a-view-reference-via-an-outlet

But this approach requires you to use components (which I recommend).

Avalonia provides a few ways of finding controls by name (I think there is a .Find extension on every Control). In your case you could search for an ancestor of type Canvas. control.FindLogicalAncestorOfType<Canvas>(includeSelf = false)

[matthewcrews]

Thank you. I appreciate the information. I personally find the Elmish style easy to work with and the Component style very difficult. That's more of an observation about myself than anything else.

[Happypig375]

@matthewcrews
Add this to the outer canvas

Canvas.name "DragArea"

and then you can

let Parent = (e.Source :?> StyledElement).Find<Canvas> "DragArea"