Lesson 2: Define Item Template

• Sep 30, 2020

Use the DXCollectionView.ItemTemplate property to specify the appearance of each item in a list. Bind the template’s elements to properties of data objects contained in the ItemsSource collection.

Open the solution created in Lesson 1 that includes the DXCollectionView instance bound to the collection of Contact objects with the Name, Photo and Phone properties. Define the following template to display contact information:

XAML

<dxcv:DXCollectionView ItemsSource="{Binding Data}">
    <!--Define the item template.-->
    <dxcv:DXCollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="10, 8, 18, 7">             
                <Grid.ColumnDefinitions>  
                    <ColumnDefinition Width="50"/>   
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Frame Grid.Column="0"
                       HasShadow="False"
                       BackgroundColor="LightGray"
                       VerticalOptions="Center"
                       HorizontalOptions="Center"
                       CornerRadius="25"
                       WidthRequest="50"
                       HeightRequest="50"
                       Padding="1">
                    <Frame BackgroundColor="White"
                           Padding="0"
                           HeightRequest="48"
                           WidthRequest="48"
                           VerticalOptions="Center"
                           HorizontalOptions="Center"
                           HasShadow="False"
                           IsClippedToBounds="True"
                           CornerRadius="24">          
                        <Image Source="{Binding Photo}">            
                            <Image.VerticalOptions>               
                                <OnPlatform x:TypeArguments="LayoutOptions"
                                            Android="FillAndExpand"
                                            iOS="EndAndExpand"/>            
                            </Image.VerticalOptions>
                        </Image>         
                    </Frame>   
                </Frame>
                <StackLayout Grid.Column="1"
                             Padding="18,1,18,7"
                             Orientation="Vertical">              
                    <Label Text="{Binding Name}"
                           Margin="0,2"
                           TextColor="#55575c"/>
                        <Label Text="{Binding Phone}"
                               TextColor="#959aa0"/>
                </StackLayout>
            </Grid>
        </DataTemplate>
    </dxcv:DXCollectionView.ItemTemplate>

    <!--Specify margins.-->
    <dxcv:DXCollectionView.Margin>
        <OnIdiom x:TypeArguments="Thickness" Phone="16,0,0,0" Tablet="71,0,0,0"/>
    </dxcv:DXCollectionView.Margin>
</dxcv:DXCollectionView>

The list now displays a photo, name, and phone number for each contact:

Before	After

The order of items in the list is the same as records in the data source. The next lesson explains how to sort data in a DXCollectionView.