How to display rectangles on an image, and drag-and-drop them?

[mkj-stonehill]

I am trying to port an old WinForms application to Avalonia; it displays an image (which is scaled to fit the window), and on which are some number of rectangles. The user needs to be able to move and resize the rectangles using both the mouse and the keyboard.

In Ye Olde Days, I would handle the "mouse down" event, capture the mouse, and then handle the "mouse moved" events to implement the drag and drop. The screen coordinates are converted to image coordinates by scaling them the same amount the image was scaled to fit the window.

I can easily display the image and scale it to fit the window; however, I am at a loss as to how to position the rectangles, and also how to implement drag-and-drop.

This is an MVVM application (since that is what the client already has some familiarity with). I've tried using the Canvas control to contain the image and the rectangles; however I can't seem to get the image scaled to fit the window in this case. Nor have I stumbled on how to drag-and-drop the rectangles.

Any pointers to get me started in the right direction would be warmly welcomed.

TIA,

--mkj

[LaurentInSeattle]

This Avalonia desktop app' of mine does Drag and Drop of controls:
https://github.com/LaurentInSeattle/Lyt.Quantics

Most "interesting" area:
https://github.com/LaurentInSeattle/Lyt.Quantics/tree/master/Lyt.Quantics.Studio/Behaviors/DragDrop

Hope this helps...

[mkj-stonehill]

This is helpful; thank you! It looks like Behaviors is the way to implement the drag-and-drop feature. I have so far successfully ignored Behaviors; time to learn something new...

[mkj-stonehill]

I'm still struggling to display an image scaled to the Window. If my Window.axaml contains this:

      <Canvas>
        <Image Source="{Binding Image}" Stretch="Uniform" />
        <Rectangle Name="Barcode" Stroke="Cyan" StrokeThickness="1" Focusable="True"
                    Width="{Binding BarcodeROI.Width}" Height="{Binding BarcodeROI.Height}"
                    Canvas.Left="{Binding BarcodeROI.Left}" Canvas.Top="{Binding BarcodeROI.Top}" />
      </Canvas>

Then the image is displayed, but not scaled to fit the window (it's just displayed as-is, and since it is larger than the screen, it runs off both the right and bottom edges). The rectangle is displayed correctly (on the unscaled image).

If I wrap that in a <Viewbox>, I see absolutely nothing at all. I've also tried wrapping the canvas in a <Grid RowDefinitions="*" ColumnDefinitions="*">, and the image (and rectangle) is displayed, but still not scaled to fit.

There's clearly some boat I am missing here...

[LaurentInSeattle]

Run the Avalonia DevTool (debug tool) to explore your visual tree by pressing F12.
The viewbox will probably be invisible because bounds==0 if not given "instructions" on how to size itself...

[mkj-stonehill]

The Bounds are indeed nonsensical: 768, 444.8, 0, 0. I just cannot understand why; here's my full window definition:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:OpticsModuleROI.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="OpticsModuleROI.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="OpticsModuleROI"
        WindowState="Maximized">

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

  <DockPanel LastChildFill="True">

    
    <!--Make the image fill the rest of the window-->
    <Viewbox>
      <Canvas Background="Yellow" Name="canvas">
        <Image Source="{Binding Image}" Stretch="Uniform" />
        <Rectangle Name="Barcode" Stroke="Cyan" StrokeThickness="1" Focusable="True"
                    Width="{Binding BarcodeROI.Width}" Height="{Binding BarcodeROI.Height}"
                    Canvas.Left="{Binding BarcodeROI.Left}" Canvas.Top="{Binding BarcodeROI.Top}" />
      </Canvas>
    </Viewbox>

  </DockPanel>
</Window>

If I change the Viewbox to something else (I've tried <Panel> and <Grid>, then the Bounds are as expected (the full client area of the Window: 0, 0, 1536, 888.8). Also with just the <Canvas>. What is the magic to make the <Viewbox> get the correct bounds?

[LaurentInSeattle]

The viewbox is not "told" how to size... Give it width and length, or tell it to stretch, then it should show some stuff

[mkj-stonehill]

When I added a Width and a Height, I still got nothing. After much trial and error, I finally figured out what was going on: The Viewbox was, indeed, being told how big to be (because it was the last child in a <DockPanel LastChildFill="True">; the problem was that <Canvas> will not take its size from the parent <Viewbox>--rather, the <Viewbox> needs to know how big the <Canvas> is, so it can stretch it to fit.

Since I want the canvas to represent image pixels, all I had to do was bind the size of the canvas to the size of the image: <Canvas Width="{Binding Image.Size.Width}" Height="{Binding Image.Size.Height}">. That made everything work how I wanted--the image is scaled to fit the window, and the rectangles (which are relative to the image) are displayed in the right location with the correct size.

Thanks for all your help; I doubt I would have gotten there on my own. Now I need to learn about Behaviors, so I can implement the drag-and-drop functionality.