Xamarin Guide 10: Move ItemTemplate to Resources

Scope

This Xamarin Workshop Guide was created for the The Portuguese National Meeting of IT Students (ENEI) by Sara Silva and the original content is available here. To extend it to the global community, it was published in a new project called Xam Community Workshop and the main goal is for any developer, or user group to customize it for their events.

Before reading this article you must read:

• Xamarin Guide 1: Create a Xamarin Forms Project
• Xamarin Guide 2: Create the Model and the Data Source
• Xamarin Guide 3: Create the SessionsView
• Xamarin Guide 4: Create the SessionDetailsView
• Xamarin Guide 5: Add ShareService
• Xamarin Guide 6: Add Splash Screen, Name and Version
• Xamarin Guide 7: Add Support For WinRT Apps
• Xamarin Guide 8: Change the App.cs to App.xaml
• Xamarin Guide 9: Use MVVM Pattern

Guide 10. Move ItemTemplate to Resources

In the last two steps you learned how to create an App class using an XAML approach and how to use the MVVM pattern, to separate the UI from the logic. In this step you learn how extract the DataTemplate from the listview’s Itemtemplate to Resources.

In the App.xaml prepare the code to add the DataTemplate, for that you need to define the Application’s Resources as in the following:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ENEI.SessionsApp.App">
  <Application.Resources>
    <ResourceDictionary>

    </ResourceDictionary>
  </Application.Resources>
</Application>

And then copy the DataTemplate defined inside the ListView’s ItemTemplate as in the following:

<ListView x:Name="SessionsList"
               Grid.Row="1"
               RowHeight="{Binding Converter={StaticResource RowHeightConverter}}"
               ItemSelected="SessionsList_OnItemSelected"
               ItemsSource="{Binding Sessions}"
               SeparatorColor="#0094FF">
  <ListView.ItemTemplate>
    <DataTemplate>
        <!—this DataTemplate-->
    </DataTemplate>
</ListView.ItemTemplate>

To inside the ResourceDictionary as in the following:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ENEI.SessionsApp.App">
  <Application.Resources>
    <ResourceDictionary>
      <DataTemplate>
        <ViewCell>
          <ViewCell.View>
            <Grid BackgroundColor="Transparent" Padding="20,0,20,0">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>
              <Grid.RowDefinitions>
                <RowDefinition Height="5" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="48" />
                <RowDefinition Height="5" />
              </Grid.RowDefinitions>
              <Image Grid.Row="1" HorizontalOptions="StartAndExpand"
                     Source="{Binding Speaker.ImageUrl}"
                     VerticalOptions="Start">
                <Image.WidthRequest>
                  <OnPlatform Android="50"
                              WinPhone="100"
                              iOS="50"
                              x:TypeArguments="x:Double" />
                </Image.WidthRequest>
                <Image.HeightRequest>
                  <OnPlatform Android="50"
                              WinPhone="100"
                              iOS="50"
                              x:TypeArguments="x:Double" />
                </Image.HeightRequest>
              </Image>
              <StackLayout Grid.Row="1"
                           Grid.Column="1"
                           HorizontalOptions="FillAndExpand"
                           Padding="10,0,0,0">

                <Label Font="Medium"
                       FontAttributes="Bold"
                       Text="{Binding Name}"
                       TextColor="Black" />

                <Label Font="Medium"
                       LineBreakMode="TailTruncation"
                       Text="{Binding Speaker.Name}"
                       TextColor="Black" />
                <Label Font="Small"
                       LineBreakMode="TailTruncation"
                       TextColor="Black" Text="{Binding Details}"/>
              </StackLayout>
….

      </DataTemplate>
    </ResourceDictionary>
  </Application.Resources>
</Application>

Then, define the x:key value to identify the DataTemplate as in the following:

<Application.Resources>
    <ResourceDictionary>
      <DataTemplate x:Key="SessionTemplate">

If you run the application you will get some errors because it is required to move the converters and the SessionViewModel to App.xaml as in the following:

<Application.Resources>
    <ResourceDictionary>
      <viewModels:SessionViewModel x:Key="SessionViewModel"/>
      <converters:FavoriteImageConverter x:Key="FavoriteImageConverter"/>
      <converters:ImageSizeConverter x:Key="ImageSizeConverter"/>
      <converters:ImageUrlConverter x:Key="ImageUrlConverter"/>
      <DataTemplate x:Key="SessionTemplate">
        <ViewCell>

Now you can use the DataTemplate defined in Resources, using the key defined “SessionTemplate” as in the following:

!-- ListView will be defined here -->
    <ListView x:Name="SessionsList"
                   Grid.Row="1"
                   RowHeight="{Binding Converter={StaticResource RowHeightConverter}}"
                   ItemSelected="SessionsList_OnItemSelected"
                   ItemsSource="{Binding Sessions}"
                   SeparatorColor="#0094FF" ItemTemplate="{StaticResource SessionTemplate}">

This way, the SessionsView.xaml looks cleaner, it is easier to understand the code and is possible to reuse the DataTemplate if needed.