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:
|
