How to implement zoom in/out in avalonia page? just like web application

[wenyaoshao]

Here is a zoom in/out example.

You can find that font size and margin changed according to scaling parameter and the layout keep adaptive (similar behavior as Grid).

Is it possible in avalonia? Only setting on sacling parameters for avalonia UI and the layout keep adaptive according to grid settings. In that way, the developer don't need to caluate the fontsize and margin after scaling.

[thevortexcloud]

I think you can sort of do it with a ViewBox? I don't have much experience using it though.

https://docs.avaloniaui.net/docs/reference/controls/viewbox

But true responsive layouts are not easy to do right now. There are several ideas and experiments floating around to fix that.

[wenyaoshao]

If I understand correctly, viewbox can zoom in/out of the displayed content based on changes in width and height. Generally, the larger the size, the larger the content display.
But in the example, the length and width of chatting dialog area have actually become smaller, but the font size has become larger.

If any idea on how to implement adaptive UI, I would appreciate it if you could share it with me. I'm happy to be part of the discussion.

[thevortexcloud]

I'm happy to be part of the discussion.

The latest design proposal is this: #16949 (and also the related #16962)

There is also https://github.com/AvaloniaUI/Avalonia/tree/feature/media-queries which adds CSS like media queries, but it's no longer being worked as far as I know.

For now, you can follow the suggestions in one of these:
#15991
#16852

On a side note, there is a third party zoom control. But it's probably not what you want.

https://github.com/wieslawsoltes/PanAndZoom

[wenyaoshao]

What I was looking for is LayoutTransformControl