All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
1.1
The page you are viewing does not exist in version 1.1. This link will take you to the root page.

Lesson 2: Define Item Template

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:

<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

CollectionView

Collection View - Item Template

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.