AvaloniaUI/Avalonia.Samples

Responsive UI Sample(Desktop,Mobile)

Sarthak261995 opened this issue · 3 comments

Sarthak261995 commented

Topics to cover

Please add sample for Responsive UI for Desktop and Mobile size devices.
Like changing font, height, width of controls as per platform it is running on through Xaml.
Showing fixed side drawer on Desktop while having sliding drawer for Android and iOS.
Changing Grid row and column count as per Platform Desktop, Mobile etc.
Or Load different UserControl based on Platform through Xaml

Ideas for a sample

image

timunie commented

This request comes on the right time. Today 11.0 dropped, which will make this possible.

Do you whish to work on it? Otherwise I'll leave it open to when I find the time to pick this up.

Sarthak261995 commented

Sure, I would love to. But I am kind of new to the Avalonia UI and going through the documentation for now.
Though I have a good experience in MAUI/Xamarin and Flutter
In MAUI we usually use following to achieve responsive UI.
OnIdom
OnPlatform
OnSizeChangedEvent
Grid which I know is available in Avalonia as well.
AppThemBinding for theme changes
Create Different Styles and use OnIdom to apply those in Xaml
e.g

 <Label Style="{OnIdom Phone={StaticResource PhoneStyle} Tablet={StaticResouce TabletStyle}}"

Or we can do something below to load different control based on Platform or Idom

<ContentView.Content>
<OnPlatform x:TypeArguments="View">
<OnPlatform.iOS><control:iOSControl></OnPlatform.iOS>
<OnPlatform.Android><control:AndroidControl></OnPlatform.Android>
</OnPlatform>
</ContentView.Content>

Can you just give me the alternative property name of the above approaches in Avalonia I will figure out the rest. Still figuring out these things

Hopefully I would be able to do this in couple of weeks for sure.

I know I can achieve those through code behind for sure but that would not be for everyone.

Also, Congratulations for v11 Release you guys doing a great job.
v11 which moves Avalonia more towards Android and iOS to become true Cross platform brings me here honestly.

  • 👍1
timunie commented

I have not played around with it on my own yet as my apps are all on Desktop only. I guess your best bet is to explore the samples in the source here: https://github.com/AvaloniaUI/Avalonia/blob/master/samples/ControlCatalog/Pages/PlatformInfoPage.xaml

the RP that add this: AvaloniaUI/Avalonia#7812

  • 👍1