Skip to main content

DXCollectionView.GroupHeaderTemplate Property

Gets or sets the template that defines the appearance of group headers.

Namespace: DevExpress.XamarinForms.CollectionView

Assembly: DevExpress.XamarinForms.CollectionView.dll

NuGet Package: DevExpress.XamarinForms.CollectionView

Declaration

public DataTemplate GroupHeaderTemplate { get; set; }

Property Value

Type Description
DataTemplate

A template for group headers.

Remarks

Use the GroupHeaderTemplate property to customize headers of data item groups. A GroupInfo object specifies the binding context for a group header template.

<dxcv:DXCollectionView ItemsSource="{Binding Contacts}">
    <!-- Define ItemTemplate here.-->

    <!--Group items.-->
    <dxcv:DXCollectionView.GroupDescription>
        <dxcv:GroupDescription FieldName="Name" GroupInterval="Alphabetical"/>
    </dxcv:DXCollectionView.GroupDescription>

    <!--Define the group header template.-->
    <dxcv:DXCollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <StackLayout Margin="2, 0, 18, 10">
                <Label FontFamily="Roboto-Medium"
                       Margin="0,20,0,1"
                       TextColor="#55575c"
                       Text="{Binding Value}"/>
                <BoxView BackgroundColor="#ebebeb" 
                         HeightRequest="1"/>
            </StackLayout>
        </DataTemplate>
    </dxcv:DXCollectionView.GroupHeaderTemplate>
</dxcv:DXCollectionView>

Default

Custom

Collection View - Default Group Header

Collection View - Custom Group Header

See Also