Using Bindable Layouts with Xamarin.Forms Controls | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (164)Angular  (100)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (195)BoldSign  (11)DocIO  (24)Essential JS 2  (104)Essential Studio  (195)File Formats  (59)Flutter  (127)JavaScript  (215)Microsoft  (118)PDF  (79)Python  (1)React  (95)Streamlit  (1)Succinctly series  (130)Syncfusion  (810)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (48)Windows Forms  (59)WinUI  (65)WPF  (151)Xamarin  (160)XlsIO  (32)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (142)Chart  (107)Cloud  (14)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (61)Development  (573)Doc  (7)DockingManager  (1)eBook  (98)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (33)Extensions  (22)File Manager  (6)Gantt  (17)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (447)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (37)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (11)Scheduler  (50)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (29)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (320)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (28)Visual Studio Code  (17)Web  (532)What's new  (287)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)

Using Bindable Layouts with Xamarin.Forms Controls


In most mobile application development, we have to repeat a particular UI with different content or data, e.g., e-commerce apps. Though using a ListView for this scenario is easy and familiar,  you will have very limited flexibility in the UI.

If you are a Xamarin.Forms developer, you should already know about or have worked with StackLayout, Grid, FlexLayout, AbsoulteLayout, and RelativeLayout. These layouts provide an enormous amount of flexibility in achieving all kinds of UIs in mobile applications. However, we do not have the flexibility to provide real-time data to these UIs. This is because we have to create each child for these layouts and then bind its respective data. This process is very tedious since we may need to tweak the UI for every change in the data source.

To overcome this, Xamarin.Forms 3.5 introduced a new approach called Bindable Layouts, which works with all the previously mentioned layouts. By simply setting the ItemTemplate and ItemsSource, bindable layouts will create a UI (for the given ItemTemplate) for every data in the ItemsSource and add it as a child.

How to implement BindableLayout

BindableLayout has a set of attached properties for layouts derived from Layout<T>. Layouts like StackLayout, Grid, FlexLayout, AbsoulteLayout, and RelativeLayout are derived from Layout<T> and therefore can be used with BindableLayout. The properties are:

  • ItemsSource – Data for the layout.
  • ItemTemplate – UI for displaying the data in ItemsSource.
  • ItemTemplateSelector – Run time template selector which can be switched based on the data.

In the following code, I have a simple label as an ItemTemplate for the StackLayout. When we set ItemsSource for the StackLayout, BindableLayout will create the number of labels based on the number of data and add them as children of the StackLayout.


    public class ViewModel
        public ViewModel()
            Data = new ObservableCollection()<Model> { 
                new Model { Text = "Pink", Color = Color.DeepPink }, 
                new Model { Text = "Crimson", Color = Color.Crimson }, 
                new Model { Text = "Aqua", Color = Color.Aqua }, 
                new Model { Text = "Blue", Color = Color.DeepSkyBlue }, 
                new Model { Text = "BurlyWood", Color = Color.BurlyWood }, };

        public ObservableCollection<Model> Data { get; set; }

    public class Model
        public Color Color { get; set; }
        public string Text { get; set; }


    <StackLayout BindableLayout.ItemsSource="{Binding Data}">
                <Label BackgroundColor="{Binding Color}" 
                       Text="{Binding Text}" 
                       Margin="25" />


Stack layout as bindable layout

Bindable layouts in Syncfusion controls

Similar to the framework controls derived from Layout<T>, the following Syncfusion components support bindable layouts:


The Accordion control allows content to be organized in a vertically stacked list of items that are collapsible. You can expand each item to reveal the content associated with that item. Moreover, it allows you to keep one item or multiple items in an expanded state at the same time.

In the following example, I am populating the Accordion by setting the ItemsSource and ItemTemplate of type AccordionItem, which has a header and content.


        <accordion:SfAccordion x:Name="accordion" BindableLayout.ItemsSource="{Binding AccordionData}" HeaderIconPosition="Start">
                            <Grid Padding="10">
                                <Label HeightRequest="50"
                                       Text="{Binding Header}"
                                       VerticalTextAlignment="Center" />
                            <Grid Padding="10" BackgroundColor="#FFFFFF">
                                <Label HeightRequest="50"
                                       Text="{Binding Content}"
                                       VerticalTextAlignment="Center" />


Accordion as bindable layout


Our Card layout is a layout control that accepts cards as children and arranges them in a stack where one card is visible at a time until you swipe to see the next card.

In the following example, I am populating the Card layout with multiple cards by simply setting the ItemsSource and ItemTemplate of type SfCardView.


    <cards:SfCardLayout WidthRequest="300"
                        BindableLayout.ItemsSource="{Binding Data}"
                <cards:SfCardView BackgroundColor="{Binding}">
                    <StackLayout Orientation="Vertical">
                        <Image Source="{Binding Image}" ..... />
                        <Label Text="{Binding Text}"
                               HorizontalOptions="CenterAndExpand" ..... />


Card layout as bindable layout

Radio Button Group

Radio Button Group is a selection control that allows you to select one option from a list of predefined choices.

In the following example, I am populating the Radio Button group by setting the ItemsSource and ItemTemplate of type SfRadioButton.


        <syncfusion:SfRadioGroup x:Name="radioGroup"
                                 BindableLayout.ItemsSource="{Binding RadioGroupData}"
                    <syncfusion:SfRadioButton x:Name="male"
                                              Text="{Binding Text}" />


Radio group as bindable layout

Currently, we provide bindable layout support for the previously mentioned components. We will extend this support for upcoming components that would benefit from bindable layout support.


In this blog post, we walked through working with bindable layouts and their support in Syncfusion components such as AccordionCards, and Radio Button. We invite you to check out our ever-growing collection of Xamarin.Forms components. Please find the complete documentation for all the features here.

You can always download our free evaluation to see all these components in action. Also, explore our samples available in this GitHub repository. Ready to evaluate samples are available on Google Play and Microsoft Store.

If you have any questions or require clarification, please let us know in the comments section below. You can also contact us through our support forum, Direct-Trac, or our Feedback Portal. As always, we are happy to assist you!


Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top