When you need to display a lot of data Xamarin.Forms has you covered with awesome controls such as ListView, CollectionView, or CarouselView. These controls are great as they have built in support for scrolling, advanced layouts, and pull-to-refresh. Sometimes, you don’t need the full power of these controls and just want to repeat a control bound to a list of data. A great example is repeating categories for a conference session, profile photos, or icons. This can easily be accomplished by utilizing Bindable Layouts in Xamarin.Forms.

Bindable Layouts Bindable layouts were introduced way back in Xamarin.Forms 3.5 and is a hidden gem that you need to know about. Bindable layouts takes any Xamarin.Forms layout and allows you to repeat content using

ItemsSource, ItemTemplate, and even ItemTemplateSelector. This will feel very familiar if you have used ListView or CollectionView before. The main difference is how you bind content and setup the template to display data. Let’s create the above image of a repeating pill with different content in them. As mentioned, every Xamarin.Forms layout is a bindable layout. However, it is preferre to use either StackLayout or FlexLayout as they are able to stack controls easily. Here, we will use a horizontal StackLayout that is bound to a list of strings.

Bindablelayout.ItemsSource The

ItemsSource can be set directly to an IEnumerable that is in your code behind or ViewModel using the following syntax: // In code behind public List Items { get; } = new List { “iOS”, “Android”, “UWP” };

// In XAML:
<StackLayout Orientation="Horizontal"
            VerticalOptions="Start"
            HorizontalOptions="Center"
            BindableLayout.ItemsSource="{Binding Items}">
</StackLayout>
 Notice that we use 

BindableLayout.ItemsSource, which is an extension of the layout. You can also set the ItemsSource directly in XAML: <BindableLayout.ItemsSource> iOS Android UWP </BindableLayout.ItemsSource>

Bindablelayout.ItemTemplate Now, we need to just setup the template of how we want our data to display:

<StackLayout Orientation="Horizontal"
            VerticalOptions="Start"
            HorizontalOptions="Center"
            BindableLayout.ItemsSource="{Binding Items}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Frame WidthRequest="75" 
                HeightRequest="25"
                CornerRadius="25"
                Padding="0"
                HasShadow="True">
                <Label Text="{Binding .}" 
                    VerticalOptions="Center"
                    HorizontalOptions="Center"/>
            </Frame>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>
 That's it! Now, we have the list of data displaying in nice pills horizontally. It is important to remember that this content will not scroll. If we need to scroll, than we can wrap the 

StackLayout in a ScrollView.

Learn More Hopefully this blog was helpful and showed you how easy it is to repeat content using Bindable Layout. You can read more about them in our

amazing documentation that shows of template selectors and other types of layouts.