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

255 瀏覽人次

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>