XamDataGrid は、列の配置を Row、Column、RowSpan、ColumnSpan の各プロパティで指定することができます。

 

注意が必要なのは、FieldGroup を 使用している場合です。

FieldGroupを使用している場合、その配下の Field も含めて 1 つの領域としてみなして Row、Column、RowSpan、ColumnSpan の値を設定する必要があります。

具体的なレイアウトを見ながら説明します。

 

レイアウト①

FieldA FieldB FieldGroup1
(FieldCがこの中に入る)

FieldA、FieldB、FieldGroup1 の各 RowSpan は 1 です。
FieldGroup1 とその配下にある FieldC を 1 つのまとまりとしてみると、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>

 

レイアウト②

FieldA FieldGroup1
FieldB (FieldCがこの中に入る)

FieldA、FieldB の 各 RowSpan は 1、FieldGroup1 の RowSpan は 2 です。
FieldGroup1 とその配下にある FieldC を 1 つのまとまりとしてみると、FieldA や FieldB と比較して 2 行分の領域を占めるからです。

<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>

 

レイアウト③

FieldA FieldB FieldC FieldE
FieldD FieldF FieldG

FieldA、FieldB の 各 RowSpan は 2 になります。FieldE の ColSpan は 2 になります。
FieldA、FieldB は、FieldC、FieldD 等と比較して、2 行分の領域を占めるからです。
また、FieldE は、その他の Field と比較して、2 列分の領域を占めるからです。

<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>

 

サンプル

 

リファレンス

 

Tagged:

製品について

Ultimate UI for WPF