Every Xamarin.Forms Layout is a Repeater Control

Avatar

James

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< Xamarin.Forms Visible Options repeating for ios android uwp

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<string> Items { get; } = new List<string> { "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:

<StackLayout Orientation="Horizontal"
            VerticalOptions="Start"
            HorizontalOptions="Center">
    <BindableLayout.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>iOS</x:String>
            <x:String>Android</x:String>
            <x:String>UWP</x:String>
        </x:Array>
    </BindableLayout.ItemsSource>
</StackLayout>

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.

1 comment

Comments are closed.