Xamarin Forms Creating Reusable Ui With Contentview And Datatemplates Complete Guide

Step-by-Step Guide

1. Create a New Xamarin.Forms Project

First, let's start by creating a new Xamarin.Forms project.

• Open Visual Studio.
• Select Create a new project.
• Choose Mobile App (Xamarin.Forms) with .NET MAUI or Xamarin.Forms (depending on your preference).
• Click Next.
• Configure your project name and location.
• Click Next again.
• Choose the project template (e.g., Blank).
• Click Create.

2. Define the Book Model

We'll define a simple Book model class that contains properties for a book.

// Models/Book.cs
public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
    public string CoverImageUrl { get; set; }
}

3. Create the ContentView

We'll create a ContentView that can be reused to display details of each Book. Let's call it BookView.

<!-- Views/BookView.xaml -->
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.Views.BookView">
    <ContentView.Content>
        <Grid Padding="10" ColumnDefinitions="*, auto" RowDefinitions="auto, auto">
            <Frame Grid.ColumnSpan="2" BackgroundColor="#f6f6f6" CornerRadius="5" Padding="10">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Image Grid.Row="0" Grid.Column="0" 
                           Source="{Binding CoverImageUrl}" 
                           Aspect="AspectFit" 
                           HorizontalOptions="Start" 
                           VerticalOptions="StartAndExpand"/>


                    <Label Grid.Row="0" Grid.Column="1"
                           Text="{Binding Title}"
                           FontSize="Medium"
                           FontAttributes="Bold"
                           HorizontalOptions="Start"
                           VerticalOptions="CenterAndExpand"
                           Margin="10, 0, 0, 0"/>

                    <Label Grid.Row="1" Grid.Column="1"
                           Text="{Binding Author}"
                           FontSize="Small"
                           HorizontalOptions="Start"
                           VerticalOptions="EndAndExpand"
                           Margin="10, 0, 0, 0"/>
                </Grid>
            </Frame>
        </Grid>
    </ContentView.Content>
</ContentView>

// Views/BookView.xaml.cs
namespace YourNamespace.Views;

public partial class BookView : ContentView
{
    public static readonly BindableProperty BookProperty =
        BindableProperty.Create(nameof(Book), typeof(Book), typeof(BookView), default(Book));

    public Book Book
    {
        get => (Book)GetValue(BookProperty);
        set => SetValue(BookProperty, value);
    }

    public BookView()
    {
        InitializeComponent();
        BindingContext = this;
    }
}

In the BookView.xaml.cs, we're defining BookProperty, which is a custom bindable property allowing us to pass a Book instance to the BookView.

4. Use BookView in a Page

Now, we are going to use our BookView in a page such as MainPage.

<!-- MainPage.xaml -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace.Views"
             x:Class="YourNamespace.MainPage">

    <ContentPage.Resources>
        <!-- Define a DataTemplate for Book objects and reuse the BookView -->
        <DataTemplate x:Key="BookTemplate">
            <local:BookView Book="{Binding}"></local:BookView>
        </DataTemplate>
    </ContentPage.Resources>

    <ListView ItemsSource="{Binding Books}" ItemTemplate="{StaticResource BookTemplate}">
        <ListView.ItemTemplate>
            <DataTemplateSelector>
            </DataTemplateSelector>
        </ListView.ItemTemplate>
        <!-- Set a margin from the root layout to make the list looks better -->
        <ListView.Margin>10</ListView.Margin>
    </ListView>
</ContentPage>

5. Initialize ViewModel

Create a ViewModel that holds a collection of Book instances.

// ViewModels/MainViewModel.cs
using System.Collections.ObjectModel;

public class MainViewModel
{
    public ObservableCollection<Book> Books { get; set; }
    
    public MainViewModel()
    {
        // Initialize the Books collection with some sample data.
        Books = new ObservableCollection<Book>
        {
            new Book { Title = "1984", Author = "George Orwell", CoverImageUrl = "https://via.placeholder.com/150" },
            new Book { Title = "To Kill a Mockingbird", Author = "Harper Lee", CoverImageUrl = "https://via.placeholder.com/150" },
            new Book { Title = "The Great Gatsby", Author = "F. Scott Fitzgerald", CoverImageUrl = "https://via.placeholder.com/150" },
            new Book { Title = "The Catcher in the Rye", Author = "J.D. Salinger", CoverImageUrl = "https://via.placeholder.com/150" },
            new Book { Title = "Pride and Prejudice", Author = "Jane Austen", CoverImageUrl = "https://via.placeholder.com/150" },
        };
    }
}

6. Bind ViewModel to View

Finally, instantiate the MainViewModel in MainPage.xaml.cs and set it as the BindingContext.

// MainPage.xaml.cs
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainViewModel();
    }
}

Explanation:

• Model (Book): Represents the data that we want to display.
• ContentView (BookView): Encapsulates the UI for displaying a single Book object. It uses bindable properties to receive instances of Book.
• DataTemplate: This template tells ListView how to display each item from the Books collection by using the BookView control.
• MainViewModel: Acts as the intermediary between the view and the model, containing an observable collection of books.
• MainPage: The main UI page which uses a ListView to display the collection of books. The ItemsSource of the ListView is bound to the Books collection in the view model, while the ItemTemplate is defined in the resources section of the XAML file and uses DataTemplate to apply BookView to each Book item.

This setup provides clean separation of concerns, makes the UI more modular, and promotes code reusability. You can further enhance this example by adding more sophisticated layouts, styles, triggers, and behaviors.

Result:

When you run the application, you should see a list of books displayed using the BookView control you created. Each Book entry consists of its title, author, and a placeholder image.