Articles in this section
Category / Section

How to create a collection of Xamarin CheckBox?

1 min read

This article describes how to create the collection of  Xamarin.Forms CheckBox using MVVM pattern.

Let’s take an example to display the number of Xamarin.Forms CheckBox for addressing the available novels.

 

NovelName property hold the Text value of CheckBox. Novel class takes Model class role here.

 

public class Novel
{
    public string NovelName { get; set; }
 
}

 

AvailableNovels property describes the collection of Novel which has been going to populated with

StackLayout’s ItemsSource.  Here Novels class takes view model role here.

public class Novels : INotifyPropertyChanged
{
 
    private ObservableCollection<Novel> availableNovels;
 
    public ObservableCollection<Novel> AvailableNovels
    {
        get { return availableNovels; }
        set { availableNovels = value; }
    }
 
    public Novels()
    {
        AvailableNovels = new ObservableCollection<Novel>();
        AvailableNovels.Add(new Novel() { NovelName = "In Search of Lost Time by Marcel Proust" });
        AvailableNovels.Add(new Novel() { NovelName = "Don Quixote by Miguel de Cervantes" });
        AvailableNovels.Add(new Novel() { NovelName = "Ulysses by James Joyce" });
        AvailableNovels.Add(new Novel() { NovelName = "The Great Gatsby by F. Scott Fitzgerald" });
        AvailableNovels.Add(new Novel() { NovelName = "Moby Dick by Herman Melville" });
        AvailableNovels.Add(new Novel() { NovelName = "Hamlet by William Shakespeare" });
    }
    …………………………
}
 

 

Here specified ItemTemplate view of StackLayout from BindableLayout is Xamarin CheckBox. Each model property of NovelName has been bound with Text property of Xamarin.Forms CheckBox as in below

 

  …………………..
             xmlns:checkBox ="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
  ……………………
ContentPage.BindingContext>
    <local:Novels/>
</ContentPage.BindingContext>
<StackLayout>
    ......................
    
    <StackLayout 
        BindableLayout.ItemsSource="{Binding AvailableNovels}">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <checkBox:SfCheckBox Text="{Binding NovelName}" />
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</StackLayout>

 

With the above steps leads to the output be like in below

 

Output:

Xamarin CheckBox with MVVM Pattern

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied