XamDataGrid – Row / Column / RowSpan / ColumnSpan によるセル配置で列幅が意図せず 0 につぶれてしまう場合の対処方法

【事象】

XamDataGrid で FieldLayoutSettings.AutoArrangeCells=”Never” を設定し、Field の Row / Column / RowSpan / ColumnSpan を使って 1 レコードを複数行にまたがる独自レイアウトで表示しようとした場合、特定の列の幅が意図せず 0 につぶれ、その列に配置されているはずの Field が正しい位置・幅で表示されないことがあります。

特に、複数の Field が上下の行でスパン幅の異なる千鳥配置になっている場合、いずれの Field からも単独で占有されない列が発生することがあります。この列は幅計算の対象となるコンテンツを持たないため、幅が 0 につぶれます。

例えば、次のようなレイアウトでセルを配置したいとします。

実現イメージ

　

この場合、3 列目はどの Field からも単独占有されないため幅が 0 になります。結果として、内部的には指定通りに配置されているにもかかわらず、以下のように見えます。

• 名（本来は 3 ～ 4 列目）→ 3 列目の位置のみに表示され、電話番号の真上に重なって見える
• メールアドレス（本来は 2 ～ 3 列目）→ 2 列目の幅のみとなり、姓と同じ幅に見える

実際の見た目

　

【対処方法】

FieldLayoutSettings.DataRecordCellAreaGridTemplate で、セル領域に使用される Grid の列定義を明示的に指定します。これにより、各列の幅が自動計算に依存しなくなり、意図したレイアウトになります。

<igDP:FieldLayoutSettings.DataRecordCellAreaGridTemplate>
    <ItemsPanelTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"  /> <!-- 1列目 -->
                <ColumnDefinition Width="100" /> <!-- 2列目 -->
                <ColumnDefinition Width="100" /> <!-- 3列目 -->
                <ColumnDefinition Width="100" /> <!-- 4列目 -->
            </Grid.ColumnDefinitions>
        </Grid>
    </ItemsPanelTemplate>
</igDP:FieldLayoutSettings.DataRecordCellAreaGridTemplate>

全列を一律の幅で問題ない場合は、より簡潔に DefaultColumnDefinition でも対応できます。

<igDP:FieldLayoutSettings.DefaultColumnDefinition>
    <ColumnDefinition Width="100"/>
</igDP:FieldLayoutSettings.DefaultColumnDefinition>

対処コード適用結果

実現イメージ通り、特に「名」と「メールアドレス」が想定通りに配置されているのが確認できます。