search

AvaloniaUI / Avalonia.Samples

Avalonia.Samples aims to provide some minimal samples focusing on a particular issue at a time. This should help getting new users started.
https://www.avaloniaui.net
606 stars 103 forks source link

Responsive UI Sample(Desktop,Mobile) #53

Open Sarthak261995 opened 1 year ago

Sarthak261995 commented 1 year ago

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 1 year ago

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 1 year ago

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.

timunie commented 1 year ago

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: https://github.com/AvaloniaUI/Avalonia/pull/7812/