How to use external DataTemplate in Xamarin.Forms using CollectionView? - xamarin

Question

It try to move DataTemplate on my CollectionView to a separate xaml file, for reuse it but not work.
the collectionView on my MainPage:
<CollectionView ItemsSource="{Binding Spesa.Articoli}" >
<CollectionView.ItemTemplate>
<control:ArticoloSpesaControl />
</CollectionView.ItemTemplate>
</CollectionView>
and this is the separate ArticoloSpesaControl.xaml file "ArticoloSpesaControl"
<DataTemplate xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Prestospesa.View.Control.ArticoloSpesaControl"
xmlns:plugin="clr-namespace:Plugin.Badge.Abstractions;assembly=Plugin.Badge.Abstractions"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
>
<StackLayout Orientation="Horizontal" Padding="10,0,10,0">
<StackLayout Orientation="Horizontal" HorizontalOptions="Start" Spacing="0">
<plugin:Badge BadgeText="{Binding Articolo.quantita}" Style="{StaticResource Badge}"
BackgroundColor="{StaticResource BadgeColor}"
WidthRequest="35" Margin="0,9,2,0" />
<ffimageloading:CachedImage
Source="loading.gif"
WidthRequest="40"
HorizontalOptions="Start"
VerticalOptions="Center"
IsVisible="{Binding RequestPending}"
/>
<Label Text="{Binding DescrizioneArticolo}" Style="{StaticResource LabelProduct}"
WidthRequest="200"
HeightRequest="40"
HorizontalOptions="FillAndExpand"
/>
<Label Text="{Binding Articolo.prezzoNetto, StringFormat='{0:F}€'}" WidthRequest="90"
TextColor="Red"
HeightRequest="50"
VerticalTextAlignment="Center"
HorizontalOptions="End" HorizontalTextAlignment="End" VerticalOptions="Center" Style="{StaticResource LabelMedium}" />
</StackLayout>
</StackLayout>
Any help is welcome !

Answer 1

You can create a ContentView as the DataTemplate of the CollectionView
<CollectionView ItemsSource="{Binding xxx}">
<CollectionView.ItemTemplate>
<DataTemplate>
<control:ArticoloSpesaControl />
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
In ArticoloSpesaControl
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="App3.View1">
<ContentView.Content>
//...
</ContentView.Content>
</ContentView>