Version

Changing the Default Column and Row Definitions

The xamDataPresenter™ Grid View allows you to change the layout beyond customizing the FieldLayouts. You can set a Row, Column, ColumnSpan, or RowSpan on each Field to further control the layout of the Record.

The following procedure assumes you have a data bound xamDataPresenter. For more information, see Adding xamDataPresenter to Your Application.

Follow these steps to specify a Row, Column, and ColumnSpan on Fields in the xamDataPresenter.

  1. The following XAML creates an instance of XamDataPresenter and names it.

    In XAML:

    <igDP:XamDataPresenter x:Name="XamDataPresenter1" ... >
        <igDP:XamDataPresenter.View>
            <igDP:GridView />
        </igDP:XamDataPresenter.View>
        ...
    </igDP:XamDataPresenter>
  1. Use the following XAML to specify the FieldLayoutSettings of the XamDataPresenter and set the AutoArrangeCells and AutoGenerateFields properties.

    In XAML:

    ...
        <igDP:XamDataPresenter.FieldLayoutSettings>
            <igDP:FieldLayoutSettings AutoArrangeCells="Never"
                AutoGenerateFields="False" />
        </igDP:XamDataPresenter.FieldLayoutSettings>
    ...
  1. With the FieldLayoutSettings specified, define the FieldLayouts for the control. The following XAML specifies the FieldLayouts and then defines the Fields from the data source, as well as an additional unbound field. Each field has a Row and Column set to assist xamDataGrid in positioning that particular Field. The first and second Field also have a ColumnSpan set to 2, this causes those Fields to span two columns instead of just one. You can think of it as ColumnSpan="2" specifies both Column="0" and Column="1" for those two columns.

    In XAML:

    ...
        <igDP:XamDataPresenter.FieldLayouts>
            <igDP:FieldLayout>
                <igDP:FieldLayout.Fields>
                    <igDP:Field Name="ProductName" Row="0" Column="0"
                        ColumnSpan="2" />
                    <igDP:Field Name="CostPerUnit" Row="1" Column="0" />
                    <igDP:Field Name="Quantity" Row="1" Column="1" />
                    <igDP:Field Name="Discount" Row="2" Column="1" />
                    <igDP:Field Name="ShipAndHandle" Row="2" Column="0" />
                    <igDP:Field Name="Total" Row="3" Column="0" BindingType="Unbound"
                        ColumnSpan="2" />
                </igDP:FieldLayout.Fields>
            </igDP:FieldLayout>
        </igDP:XamDataPresenter.FieldLayouts>
    ...
  1. Build and run the project. You should see xamDataPresenter with its first and last columns spaning the length of the four middle columns similar to the image below.

    changing row and column definitions in xamdatapresenter