Responsive app resources

[jordi-z80]

Hi!

I'm absolutely new to Avalonia, and I've been tasked with writing an app. I'm glad because I've wanted to test Avalonia for a long time.

The app has to be responsive and adapt to landscape sizes from 800x600 to 4K. Is there any tutorial, documentation or sample on how to tackle this? Any clues or hints would be welcomed too.

[thevortexcloud]

There are some built in mark up extensions. Although they are more to do with platform/device form factor than actual screen size and orientation.

https://docs.avaloniaui.net/docs/guides/platforms/platform-specific-code/xaml

You could probably write a custom markup extension to provide some more information if you need to change layouts around. Some of it is probably dependent on #15901 though. Generally though, Avalonia does a pretty good job of scaling things itself as long as you don't use fixed sizes for things.

https://docs.avaloniaui.net/docs/guides/graphics-and-animation/graphics-and-animations

[jordi-z80]

Thanks for the answer. At first the task seemed a bit daunting, but after some days tinkering with Avalonia I think I've gotten the hang of it. What I wanted to do is probably just a matter of binding variables to some parts, like pane sizes and font sizes.

[thevortexcloud]

If you are strictly following MVVM, and binding to a view model; you are not actually allowed to do that. As that means the view model has some level of knowledge about how the view is presenting things, as a result directly couples the view model to the view. EG size 20 in Avalonia might look completely different in WPF. The viewmodel should not know anything how the view is presenting anything (to the point it's actually inaccurate for the view model to even have references/comments about things like "Buttons"). It only knows about its own state and anything it depends on. The view is the only thing that should have any influence on actual presentation logic.

If you don't care about being strict with MVVM then you can do that. Although you should avoid it if you can.

What you could do is create a theme and use dynamic resources to bind the theme values to that get overridden based on what ever conditions you specify. Although there may be better ways, it's not something I have tried very often.

[jordi-z80]

Thanks for the insight, I'm very new to both Avalonia and MVVM and I hadn't realized that.
I don't have any rules about strict MVVM or not, but I'll try to adhere to them and try to get a more elegant solution for the moment, but at the end the one who decides that will be the deadline speed of approach ;)

However the more I work with Avalonia the less I think I'll need what I mentioned before.

[tobyfirth]

You might find this library useful, https://github.com/AvaloniaUI/Avalonia.Xaml.Behaviors.
Specifically this example, https://github.com/AvaloniaUI/Avalonia.Xaml.Behaviors/blob/master/samples/BehaviorsTestApplication/Views/Pages/AdaptiveBehaviorView.axaml which shows how you can change styles based on the size of controls.

You can get quite far with just using a scrollviewer and letting avalonia deal with all of the sizing.