Skip to content

Demonstrates changing a Xamarin Forms CollectionView from a vertical list to a horizontal list based on device orientation.

License

Notifications You must be signed in to change notification settings

irongut/RotateCollectionDemo

Repository files navigation

RotateCollectionDemo Rotate Collection Demo

Rotating a list in Xamarin.Forms using CollectionView

forthebadge   forthebadge

Demonstrates changing a Xamarin Forms CollectionView from a vertical list to a horizontal list based on device orientation. This code accompanies my blog post Rotating a list in Xamarin.Forms using CollectionView.

Notes

Xamarin.Essentials DeviceDisplay is unreliable, returning the previous orientation when using the MainDisplayInfoChanged event. See xamarin/Essentials#1355.

Using the page's OnSizeAllocated event is more reliable, override the OnSizeAllocated event to call a view-model method which updates the layout. This is usually done using a base page but since this app has only one page the event is overridden in the code behind.

Uses a binding on CollectionView.ItemTemplate to specify different data templates for portrait and landscape orientation.

Uses a binding on CollectionView.ItemLayout to specify different layouts / orientation for portrait and landscape. On tablets multiple column layouts could be used instead.

Screenshots

Portrait Landscape
Portrait Screenshot Landscape Screenshot

 

Icons made by Freepik from www.flaticon.com.

Text from Zombie Ipsum.

Colours by Nord.

About

Demonstrates changing a Xamarin Forms CollectionView from a vertical list to a horizontal list based on device orientation.

Topics

Resources

License

Stars

Watchers

Forks

Languages