HowTo : Common headers in the XamDataGrid

 

1. Set the AutoGenerateFields and AutoArrangeCells properties of the FieldLayoutSettings to respectively False and Never:

            <igDP:XamDataGrid.FieldLayoutSettings>
                <igDP:FieldLayoutSettings AutoGenerateFields="False" AutoArrangeCells="Never" />
            </igDP:XamDataGrid.FieldLayoutSettings>

2. Define the FieldLayout and explicitly position each field, by setting the Row, RowSpan, Column, ColumnSpan properties :

            <igDP:XamDataGrid.FieldLayouts>
                <igDP:FieldLayout>
                    <igDP:UnboundField Name="Header" Label="Person" Row="0" Column="0" ColumnSpan="6">
                        <igDP:UnboundField.Settings>
                            <igDP:FieldSettings LabelTextAlignment="Center" CellContentAlignment="LabelOnly"/>
                        </igDP:UnboundField.Settings>
                    </igDP:UnboundField>
                    <igDP:Field Name="FirstName" Label="First Name" Row="1" Column="0"/>
                    <igDP:Field Name="LastName" Label="Last Name" Row="1" Column="1" />
                    <igDP:Field Name="Email" Row="1" Column="2" />
                    <igDP:Field Name="Age" Row="1" Column="3" />
                    <igDP:Field Name="BirthDay" Row="1" Column="4" />
                    <igDP:Field Name="Gender" Row="1" Column="5" />
                    <igDP:Field Name="Interests" />
                </igDP:FieldLayout>
            </igDP:XamDataGrid.FieldLayouts>

3. Set the CellContentAlignment to LabelOnly as this Field has only header representation purposes.

The goal:

The result:

The working sample :