Xamarin Forms Views Collectionview Button Complete Guide

 Last Update:2025-06-23T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    9 mins read      Difficulty-Level: beginner

Understanding the Core Concepts of Xamarin Forms Views CollectionView, Button

Xamarin.Forms Views: CollectionView and Button

Xamarin.Forms is a powerful framework for building cross-platform applications for iOS, Android, and Windows platforms using a single shared C# codebase. It provides a rich set of controls and APIs that allow developers to build visually appealing and responsive applications with ease. Two of the most commonly used controls in Xamarin.Forms are CollectionView and Button. In this guide, we'll explore these controls in detail, highlighting their features, properties, and usage scenarios.

CollectionView

What is CollectionView?

CollectionView is a highly flexible and efficient control introduced in Xamarin.Forms 4.0 for displaying a scrollable list of data. It is designed to replace the ListView control and offers a more powerful and feature-rich way to work with collections of data.

Key Features

  • Performance: CollectionView uses an optimized layout recycling mechanism, which significantly improves performance compared to ListView.
  • Data Templates: You can define custom views for each item in the collection using data templates. This allows for complex and highly customized list item layouts.
  • Selection: Supports item selection, including single or multiple selection modes.
  • Grouping: Can display grouped data with customizable headers and footers.
  • Sorting and Filtering: You can sort and filter the data in the collection easily.
  • Built-in animations: Supports animations for add, delete, and refresh operations.

Properties and Usage

<CollectionView ItemsSource="{Binding MyItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Label Text="{Binding Name}" />
            </ViewCell>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

In the example above, ItemsSource is bound to a collection in the view model. The DataTemplate specifies how each item in the collection should be displayed. Here, each item is represented by a Label displaying the Name property.

Button

What is a Button?

A Button is a fundamental UI control that the user can click or tap to perform an action. It's an integral part of most applications and is used for navigation, executing functions, or submitting data.

Key Features

  • Text Label: You can set the text that appears on the button.
  • Command Binding: Bind to commands in the ViewModel for MVVM-based applications.
  • Click Events: Handle click events directly in code-behind or using bindings.
  • Styling and Customization: Customize appearance using styles, colors, fonts, and images.
  • Icon Support: Supports embedding icons alongside or instead of text.
  • Accessibility: Built-in support for accessibility features.

Properties and Usage

<Button 
    Text="Click Me" 
    Command="{Binding MyCommand}" 
    Clicked="OnButtonClicked" 
    BackgroundColor="Blue" 
    TextColor="White" />

In this example, the Text property is set to "Click Me". The Command property is bound to a command named MyCommand, which is defined in the view model. The Clicked event is also wired up to a method called OnButtonClicked in the code-behind. The button's background and text colors are customized.

Button Click Event

private void OnButtonClicked(object sender, EventArgs e)
{
    // Handle button click
    Console.WriteLine("Button was clicked!");
}

Combining CollectionView and Button

You can combine CollectionView and Button to create interactive and dynamic user interfaces. For example, you might display a list of items, and each item could have a button to perform an action related to that item, such as editing or deleting.

<CollectionView ItemsSource="{Binding MyItems}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <StackLayout Orientation="Horizontal" Padding="10">
                <Label Text="{Binding Name}" />
                <Button 
                    Text="Delete" 
                    Command="{Binding DeleteCommand}" 
                    CommandParameter="{Binding .}" 
                    BackgroundColor="Red" 
                    TextColor="White" />
            </StackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

In this example, each item in the CollectionView has a "Delete" button. Clicking the button triggers the DeleteCommand in the view model, passing the current item as a parameter.

Conclusion

Xamarin.Forms' CollectionView and Button controls are versatile and powerful components that enable developers to build rich and interactive applications across multiple platforms. Understanding their features and usage patterns can significantly enhance your ability to design and implement engaging user interfaces efficiently.

Keywords for SEO

xamarin forms, collectionview, button, mvvm, data binding, performance optimization, ui controls, mobile development, xamarin, .net, cross-platform, xaml, csharp, user interface, app development, ios, android, windows, ui design, mobile apps, software development, programming, app programming, visual studio, data templates, selection modes, grouping, sorting, filtering, animations, command binding, click events, styling, accessibility, icons, navigation, editing, deleting, list items, stacklayout, label, event handling, code-behind, view model, c#, xaml, mobile app development, software engineering

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Xamarin Forms Views CollectionView, Button

Step 1: Create a New Xamarin.Forms Project

  1. Open Visual Studio and select Create a new project.

  2. Choose a project template:

    • In the search bar, type "Xamarin Forms".
    • Select the "Mobile App (Xamarin.Forms)" template.

  3. Configure your project:

    • Project Name: XamarinFormsCollectionViewExample
    • Solution Name: XamarinFormsCollectionViewExample (you can keep it the same as the Project Name)
    • Location: Choose a directory to save your project.

  4. Click Create.

  5. Select the project template:

    • Choose Blank under the Code-sharing strategy (Code Behind or Shared Project).
    • Ensure .NET MAUI is unchecked (as we are using Xamarin.Forms).

  6. Click Create to set up the project.

Step 2: Create a Model Class

Before setting up the interface, let's define a simple model class that we will display in the CollectionView.

  1. Right-click on the project (XamarinFormsCollectionViewExample) and select Add > New Folder.

    • Name the folder Models.

  2. Right-click the Models folder and select Add > Class.

    • Name the class Item.cs and click Add.

  3. Define the Item class:

    namespace XamarinFormsCollectionViewExample.Models
{
    public class Item
    {
        public string Name { get; set; }
        public string Description { get; set; }
    }
}

Step 3: Design the MainPage UI

Now, let's design the user interface using XAML, which includes a CollectionView to display a list of items and a Button to add new items to the collection.

  1. Open MainPage.xaml.

  2. Modify the XAML to include CollectionView and Button:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="XamarinFormsCollectionViewExample.MainPage"
             Title="CollectionView Example">

    <StackLayout Padding="10">

        <CollectionView x:Name="ItemsCollectionView" Margin="0,0,0,20">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" FontSize="Medium"/>
                        <Label Grid.Row="1" Grid.Column="1" Text="{Binding Description}" FontSize="Medium"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <Button Text="Add Item" Clicked="AddItemButton_Clicked" HorizontalOptions="Center"/>
    </StackLayout>
</ContentPage>

Step 4: Implement ViewModel Logic

To manage the data and handle button clicks, we will create a simple ViewModel. Alternatively, you can manage everything in the code-behind, but using a ViewModel is a common practice for better separation of concerns and testability.

  1. Right-click on the project and select Add > New Folder.

    • Name the folder ViewModels.

  2. Right-click the ViewModels folder and select Add > Class.

    • Name the class MainPageViewModel.cs and click Add.

  3. Implement the ViewModel:

    using System.Collections.ObjectModel;
using System.Windows.Input;
using Xamarin.Forms;

namespace XamarinFormsCollectionViewExample.ViewModels
{
    public class MainPageViewModel
    {
        public ObservableCollection<Models.Item> Items { get; set; }
        public ICommand AddItemCommand { get; set; }

        public MainPageViewModel()
        {
            Items = new ObservableCollection<Models.Item>
            {
                new Models.Item { Name = "Item 1", Description = "This is item number 1." },
                new Models.Item { Name = "Item 2", Description = "This is item number 2." },
                new Models.Item { Name = "Item 3", Description = "This is item number 3." },
            };

            AddItemCommand = new Command(AddItem);
        }

        private void AddItem(object obj)
        {
            var newItem = new Models.Item
            {
                Name = $"Item {Items.Count + 1}",
                Description = $"This is item number {Items.Count + 1}."
            };

            Items.Add(newItem);
        }
    }
}

Step 5: Bind the ViewModel to the MainPage

Now, we will set up bindings between the ViewModel and the UI in MainPage.xaml.

  1. Modify MainPage.xaml to include the xmlns for the ViewModel namespace and set the BindingContext:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:XamarinFormsCollectionViewExample.ViewModels"
             mc:Ignorable="d"
             x:Class="XamarinFormsCollectionViewExample.MainPage"
             Title="CollectionView Example">

    <ContentPage.BindingContext>
        <local:MainPageViewModel/>
    </ContentPage.BindingContext>

    <StackLayout Padding="10">

        <CollectionView x:Name="ItemsCollectionView" ItemsSource="{Binding Items}" Margin="0,0,0,20">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" FontSize="Medium"/>
                        <Label Grid.Row="1" Grid.Column="1" Text="{Binding Description}" FontSize="Medium"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <Button Text="Add Item" Command="{Binding AddItemCommand}" HorizontalOptions="Center"/>
    </StackLayout>
</ContentPage>

  2. Remove the code-behind event handler (if you chose to use the ViewModel). In MainPage.xaml.cs, remove the following method if it exists:

    private void AddItemButton_Clicked(object sender, EventArgs e)
{
    // Existing code...
}

Step 6: Run the Application

  1. Select the desired platform to run the app (e.g., Android, iOS).

    • You might need to install the necessary SDKs and emulators/simulators.

  2. Build and run the project by clicking the green play button or pressing F5.

Expected Outcome:

  • You should see a list of three items displayed in the CollectionView.
  • Beneath the list, there will be a "Add Item" button.
  • When you click the "Add Item" button, a new item should be added to the list dynamically.

Complete Code Summary

Models/Item.cs

namespace XamarinFormsCollectionViewExample.Models
{
    public class Item
    {
        public string Name { get; set; }
        public string Description { get; set; }
    }
}

ViewModels/MainPageViewModel.cs

using System.Collections.ObjectModel;
using System.Windows.Input;
using Xamarin.Forms;

namespace XamarinFormsCollectionViewExample.ViewModels
{
    public class MainPageViewModel
    {
        public ObservableCollection<Models.Item> Items { get; set; }
        public ICommand AddItemCommand { get; set; }

        public MainPageViewModel()
        {
            Items = new ObservableCollection<Models.Item>
            {
                new Models.Item { Name = "Item 1", Description = "This is item number 1." },
                new Models.Item { Name = "Item 2", Description = "This is item number 2." },
                new Models.Item { Name = "Item 3", Description = "This is item number 3." },
            };

            AddItemCommand = new Command(AddItem);
        }

        private void AddItem(object obj)
        {
            var newItem = new Models.Item
            {
                Name = $"Item {Items.Count + 1}",
                Description = $"This is item number {Items.Count + 1}."
            };

            Items.Add(newItem);
        }
    }
}

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:XamarinFormsCollectionViewExample.ViewModels"
             mc:Ignorable="d"
             x:Class="XamarinFormsCollectionViewExample.MainPage"
             Title="CollectionView Example">

    <ContentPage.BindingContext>
        <local:MainPageViewModel/>
    </ContentPage.BindingContext>

    <StackLayout Padding="10">

        <CollectionView x:Name="ItemsCollectionView" ItemsSource="{Binding Items}" Margin="0,0,0,20">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" FontAttributes="Bold" FontSize="Medium"/>
                        <Label Grid.Row="1" Grid.Column="1" Text="{Binding Description}" FontSize="Medium"/>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <Button Text="Add Item" Command="{Binding AddItemCommand}" HorizontalOptions="Center"/>
    </StackLayout>
</ContentPage>

MainPage.xaml.cs

using Xamarin.Forms;

namespace XamarinFormsCollectionViewExample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Additional Tips

  • Data Binding: This example uses data binding to connect the ViewModel with the UI. Understanding data binding is crucial for more complex applications.

  • MVVM Pattern: The example follows the Model-View-ViewModel (MVVM) pattern, which separates the UI logic from the business logic and makes the application easier to test and maintain.

  • Command Interface: The AddItemCommand in the ViewModel implements the ICommand interface, allowing you to execute actions from the UI.

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.