I recently released a component I commonly use in my Xamarin.Forms applications for binding data to a wrapping layout here: Xamarin.NuGet – DynamicWrapLayout Announcement! In the spirit of this type of control, I’ve also released a new NuGet package for a bindable DynamicStackLayout
. It’s a simple control that allows you to create a StackLayout
and bind an ItemsSource
collection and an ItemTemplate
. This is useful for smaller, but dynamic collections with the use of the orientation changing of a StackLayout
. This means you could have a horizontally scrolling list of cards, bind the orientation or change it to vertical, and play with positioning more easily than using a ListView
. I would still highly suggest using a ListView
over this control for a standard vertical stack of dynamic content since this control does NOT use any view recycling or virtualization which can cause performance issues with large collections or constantly changing collection.
Get it here
NuGet: https://www.nuget.org/packages/DynamicStackLayout
Github: https://github.com/SuavePirate/DynamicStackLayout
In the end, you get something like this!
Be sure to read the documentation below:
DynamicStackLayout
A Xamarin.Forms layout for creating dynamically wrapped views. Inspired by the WrapLayout
example: https://developer.xamarin.com/samples/xamarin-forms/UserInterface/CustomLayout/WrapLayout/
Installation
It’s on NuGet! https://www.nuget.org/packages/DynamicStackLayout/
Install-Package DynamicStackLayout
Be sure to install in all projects that use it.
Usage
There are two key properties that make this control useful – the ItemsSource
(like a ListView
) and the ItemTemplate
(although, you can also just add children to the view – it does both!)
Be sure to wrap it in a ScrollView
though
XAML
Add the xmlns
:
xmlns:suave="clr-namespace:SuaveControls.DynamicStackLayout;assembly=SuaveControls.DynamicStackLayout"
Use it in your View:
<ScrollView> <suave:DynamicStackLayout ItemsSource="{Binding Items}" HorizontalOptions="Fill"> <suave:DynamicStackLayout.ItemTemplate> <DataTemplate> <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180"> <Label Text="{Binding .}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </StackLayout> </DataTemplate> </suave:DynamicStackLayout.ItemTemplate> </suave:DynamicStackLayout> </ScrollView>
Don’t like data-binding and want to just use child views? You can do that too!
<ScrollView> <suave:DynamicStackLayout HorizontalOptions="Fill"> <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180"> <Label Text="0" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </StackLayout> <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180"> <Label Text="1" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </StackLayout> <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180"> <Label Text="2" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </StackLayout> <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180"> <Label Text="3" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </StackLayout> <StackLayout BackgroundColor="Gray" WidthRequest="120" HeightRequest="180"> <Label Text="4" TextColor="White" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" /> </StackLayout> </suave:DynamicStackLayout> </ScrollView>
Features
- Bindable child views
- Bindable to collections
- Handles layout changing well (try rotating the device)
- Doesn’t require custom renderers (All Xamarin.Forms baby!)
Notes
This does not use any native view virtualization, which means performance does not scale well with extremely large data sets.
Coming soon
ItemSelected
event andSelectedItem
bindable property (for now, you can add custom gestures and commands to yourDataTemplate
and handle the events yourself)- Better Collection Updating
If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!
Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.