DataTemplate

[Craig Neblett]

How would you specify a custom DataTemplate in XAML?

[Pavel R. Pavlov]

Hi Craig,

The RadListView component is designed to use different cells in its ItemTemplate. In other words users should use one of the classes described in our Cells article. Here is a sample definition of the RadListView component:

<telerikDataControls:RadListView ItemsSource="{Binding FeaturedExamplesList}"
                                 ItemTapped="ExampleTapped"
                                 BackgroundColor="Transparent">
  <telerikDataControls:RadListView.ItemStyle>
    <listView:ListViewItemStyle BackgroundColor="Transparent" BorderWidth="0"/>
  </telerikDataControls:RadListView.ItemStyle>
  <telerikDataControls:RadListView.SelectedItemStyle>
    <listView:ListViewItemStyle BackgroundColor="#E5EDF3" BorderWidth="0"/>
  </telerikDataControls:RadListView.SelectedItemStyle>
  <telerikDataControls:RadListView.PressedItemStyle>
    <listView:ListViewItemStyle BackgroundColor="#E5EDF3" BorderWidth="0"/>
  </telerikDataControls:RadListView.PressedItemStyle>
  <telerikDataControls:RadListView.LayoutDefinition>
    <listView:ListViewLinearLayout Orientation="Horizontal" HorizontalItemSpacing="0"/>
  </telerikDataControls:RadListView.LayoutDefinition>
  <telerikDataControls:RadListView.ItemTemplate>
    <DataTemplate>
      <listView:ListViewTemplateCell>
        <listView:ListViewTemplateCell.View>
          <StackLayout Padding="16, 0, 0, 0" StackLayout.Spacing="8">
            <Image Source="{Binding ImageSourceUri}"
                   HorizontalOptions="Center"
                   Aspect="AspectFit"
                   VerticalOptions="Center">
            </Image>
            <Label Text="{Binding Title}"
                   HorizontalOptions="Start"
                   TextColor="#1E323F">
              <Label.FontSize>
                <OnPlatform x:TypeArguments="x:Double"
                            iOS="17"
                            Android="16"/>
              </Label.FontSize>
            </Label>
          </StackLayout>
        </listView:ListViewTemplateCell.View>
      </listView:ListViewTemplateCell>
    </DataTemplate>
  </telerikDataControls:RadListView.ItemTemplate>
</telerikDataControls:RadListView>

I hope this information is helpful. Please do not hesitate to contact us if you encounter any other issues.

Regards,
Pavel R. Pavlov
Telerik