How to use UVtools.AvaloniaControls

[howzew]

I only see one note:
In your app.axaml add:

<Application.Styles>
    <StyleInclude Source="avares://UVtools.AvaloniaControls/Controls.axaml"/>
</Application.Styles>

I saw the introduction of this control from Avalonia, and it seems to be exactly what I need, because I just want an image control that can zoom, click, and select range, but I don't know how to add this control to Axmal, and I don't know how to get data about clicks, selection areas, etc., can you provide a simple instruction for using it?

[sn4k3]

In fact, there are no detailed documentation, but after add the styles as you did, it works like any other control you may add to axaml, by default it will work like the Image Control with zoom.

UVtools heavy use the AdvancedImageBox, you can see how I add here

After add control in axaml and with Visual Studio you can Ctrl + Space inside it propreties line to bring all properties you can set under axaml.
About events and other manipulations you can search here for the keyword: LayerImageBox

Try to make it work out of the box, and then to your use, if you have any difficulty you can post here.

[howzew]

Thank you very much for your reply. Regarding the first point, I still don't understand:

1. Why is the image displayed in the smaller middle area after calling LayerImageBox.ZoomToFit();, and why is there a lot of blank space around it? I didn't set the width and height for AdvancedImageBox.After calling ZoomToFit(), it looks like picture 1, but I think it should look like picture 2, because I think it should fit the size of the Grid.

2. If I want the image to automatically adapt to the size of the Grid after loading and keep the zoom function, how should I do?Just like the Image control, it is as simple as using Uniform but it does not affect whether it can be Zoom in/out. I wonder if AdvancedImageBox has the same simple setting.

[sn4k3]

1. Where do you call LayerImageBox.ZoomToFit();? If in constructor it's normal that it won't work, everything in avalonia and related to bounds and auto sizes never work in constructor as layout is not yet created/rendered into UI, this way auto sizes can't be calculated in that stage. You need to override the OnLoaded of your own control and call there the center function. In future I can include a property to auto zoom to fit when loading a new image.

2. Looks like you new to avalonia? Every avalonia property can be subscribed for changes, as so you must subscribe Image property, and call the function. Or you can simply register the event PropertyChanged and look for Image, eg:

LayerImageBox.PropertyChanged += (sender, e) =>
{
    if (e.PropertyName == nameof(AdvancedImageBox.Image))
    {
        LayerImageBox.ZoomToFit();
    }
};

Keep in mind if you set image on xmal or constructor you need to call LayerImageBox.ZoomToFit(); on your OnLoaded override, because of 1.

[howzew]

You are right, I first called this method in the constructor.
Thank you very much for your help. I did not subscribe to the Image property, but directly called LayerImageBox.ZoomToFit(); in the override OnLoaded method to successfully achieve this effect.

  protected override void OnLoaded(RoutedEventArgs e)
  {
      LayerImageBox.ZoomToFit();
  }

In addition, thank you for your efforts in this control. This is really a very convenient and efficient control. It solved my big problem. Thank you again!

[sn4k3]

I have made some improvements and released an updated version:

- Pan with keys now only works when no modifier is pressed
- Change property name from `AllowZoom` to `ZoomWithMouseWheel`
- Fix `ZoomLevelToFit` to never return values lower than 0, it will return `100` in that case
- Fix `ConstrainZoomOutToFitLevel` to constrain when loading an image
- Fix ViewPort vertical scrollbar calculation and constrain to positive values
- Change `ConstrainZoomOutToFitLevel` default from `true` to `false`
- Improve ViewPort update when loading images in constructor
- Add `AutoZoomToFit` property
- Add `ZoomInKeyGestures` property
- Add `ZoomOutKeyGestures` property
- Add `ZoomTo100KeyGestures` property
- Add `ZoomToFitKeyGestures` property
- Add `AutoZoomToFit` property
- Add `AutoZoomToFit` property

new use example:

AutoZoomToFit="True"
ConstrainZoomOutToFitLevel="True"
ZoomInKeyGestures="Ctrl+OemPlus, Ctrl+Add"
ZoomOutKeyGestures="Ctrl+OemMinus, Ctrl+Subtract"
ZoomTo100KeyGestures="Ctrl+D0, Ctrl+NumPad0"
ZoomToFitKeyGestures="Ctrl+Alt+D0, Ctrl+Alt+NumPad0"

[howzew]

It's awesome and it's so much easier to use!