Infragistics｜Ultimate UI WPF｜XamDataGrid 的 row、column、RowSpan、ColumnSpan 概念

尚無瀏覽量

#WPF

2023-02-20 更新

XamDataGrid 允許您使用 Row、Column、RowSpan 和 ColumnSpan
屬性指定列對齊方式。

使用 FieldGroup 時要注意。

使用 FieldGroup 時，需要將 Row、Column、RowSpan、ColumnSpan
的值設置為一個區域，包括其下的 Field。

一邊看具體 Layout 一邊說明。

1. Layout

FieldA、FieldB 和 FieldGroup1 的每個 RowSpan 都是 1。

這是因為當FieldGroup1和它的下屬FieldC作為一個組來看時，它們佔據的行數與FieldA和FieldB相同。


<igDP:XamDataGrid.FieldLayouts>

    <igDP:FieldLayout>

        <igDP:Field

            Name="FieldA" Label="FieldA"

            Row="0" RowSpan="1" Column="0" ColumnSpan="1"/>

        <igDP:Field

            Name="FieldB" Label="FieldB"

            Row="0" RowSpan="1" Column="1" ColumnSpan="1"/>

        <igDP:FieldGroup

            Name="FieldGroup1" Label="FieldGroup1"

            Row="0" RowSpan="1" Column="2" ColumnSpan="1">

            <igDP:Field

                Name="FieldC" Label="FieldC"

                Row="0" RowSpan="1" Column="0" ColumnSpan="1" />

        </igDP:FieldGroup>

    </igDP:FieldLayout>

</igDP:XamDataGrid.FieldLayouts>

2. Layout

FieldA、FieldB 的 RowSpan 均為 1，FieldGroup1 的 RowSpan 為 2。

這是因為當FieldGroup1及其下屬的FieldC作為一個組來看時，與FieldA和FieldB相比，它們佔據了兩行空間。


<igDP:XamDataGrid.FieldLayouts>

    <igDP:FieldLayout>

        <igDP:Field

            Name="FieldA" Label="FieldA"

            Row="0" RowSpan="1" Column="0" ColumnSpan="1"/>

        <igDP:Field

            Name="FieldB" Label="FieldB"

            Row="1" RowSpan="1" Column="0" ColumnSpan="1"/>

        <igDP:FieldGroup

            Name="FieldGroup1" Label="FieldGroup1"

            Row="0" RowSpan="2" Column="1" ColumnSpan="1">

            <igDP:Field

                Name="FieldC" Label="FieldC"

                Row="0" RowSpan="1" Column="0" ColumnSpan="1" />

        </igDP:FieldGroup>

    </igDP:FieldLayout>

</igDP:XamDataGrid.FieldLayouts>

3. Layout

FieldA、FieldB 的每個 RowSpan 都將為 2。

FieldE 的 ColSpan 將為 2。
這是因為FieldA、FieldB比FieldC、FieldD等佔用兩行空間。

此外，與其他 Fields 相比，FieldE 佔據兩列空間。


<igDP:XamDataGrid.FieldLayouts>

    <igDP:FieldLayout>

        <igDP:Field

            Name="FieldA" Label="FieldA"

            Row="0" RowSpan="2" Column="0" ColumnSpan="1"/>

        <igDP:Field

            Name="FieldB" Label="FieldB"

            Row="0" RowSpan="2" Column="1" ColumnSpan="1"/>

        <igDP:Field

            Name="FieldC" Label="FieldC"

            Row="0" RowSpan="1" Column="2" ColumnSpan="1" />

        <igDP:Field

            Name="FieldD" Label="FieldD"

            Row="1" RowSpan="1" Column="2" ColumnSpan="1" />

        <igDP:Field

            Name="FieldE" Label="FieldE"

            Row="0" RowSpan="1" Column="3" ColumnSpan="2" />

        <igDP:Field

            Name="FieldF" Label="FieldF"

            Row="1" RowSpan="1" Column="3" ColumnSpan="1" />

        <igDP:Field

            Name="FieldG" Label="FieldG"

            Row="1" RowSpan="1" Column="4" ColumnSpan="1" />

    </igDP:FieldLayout>

</igDP:XamDataGrid.FieldLayouts>