Every Xamarin.Forms Layout is a Repeater Control

This post has been republished via RSS; it originally appeared at: Microsoft Developer Blogs - Feed.

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:

Notice that we use BindableLayout.ItemsSource, which is an extension of the layout. You can also set the ItemsSource directly in XAML:

    
        
            iOS
            Android
            UWP
        
    

Bindablelayout.ItemTemplate

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

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.