【WPF】GridControl的使用

一、前言

       在WPF中我們常常使用DataGrid來顯示數據，在Dev中也有一個類似的控件—GridControl。

 

二、范例

 <dxg:GridControl  
      Grid.Row="1"
      ItemsSource="{Binding SelectedSummaryInfos}"
      Margin ="5" >
            <dxg:GridControl.View >
                <dxg:TableView Name="SummaryTable"  AutoWidth="True" AllowMoveColumnToDropArea="False"/>
            </dxg:GridControl.View>
            <dxg:GridControl.Columns>
                <dxg:GridColumn   Header="樓層" Binding="{Binding FloorName}" ReadOnly="True"/>
                <dxg:GridColumn   Header="類型" Binding="{Binding QuantificationType}" ReadOnly="True"/>
                <dxg:GridColumn   Header="級別" Binding="{Binding RType}">
                    <dxg:GridColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding RowData.Row.RType}" FontFamily="SJQY"></TextBlock>
                        </DataTemplate>
                    </dxg:GridColumn.CellTemplate>
                </dxg:GridColumn>
                <dxg:GridColumn   Header="直徑(mm)" Binding="{Binding Diameter}" ReadOnly="True" />
                <dxg:GridColumn   Header="總長(m)" Binding="{Binding Quantity,StringFormat={}{0:###.###}}" ReadOnly="True"/>
                <dxg:GridColumn   Header="總重(t)" Binding="{Binding Weight,StringFormat={}{0:###.###}}" ReadOnly="True" />
            </dxg:GridControl.Columns>
 </dxg:GridControl>

通過以上代碼范例，我們可以看到以下幾個特點：

1. 當GridContol顯示時默認有一個拖拽框用以將字段拖入其中進行分組排序，這是一個很強大的功能，如果你不需要這個功能，可以ShowGroupPanel=“false”。

2. AllowMoveColumnToDropArea="False"是不讓用戶隨意拖拽某一列至垃圾區。

3. GridControl通過設置TableView的AutoWidth=“Auto”來使Columns占滿整個Grid，如果不設置的話有時候你會發現展現出的Grid會多出一列！

4. GridControl通過TableView的Name來進行某些操作，如導出成Excel：

var projectName = "Project";
if (projectNameItem != null)
{
      projectName = projectNameItem.Value;
}

var dlg = QSContainer.Resolve<ISaveFileDialogService>(); //IOC
dlg.Filter = "Excel file(*.xls)|*.xls";           
dlg.DefaultFileName = $"{projectName}_{"Summary.xls"}";                      
if (!dlg.ShowDialog())
{
     return;
}

     var filePath = dlg.GetFullFileName();           
     SummaryTable.ExportToXls(filePath);  // Name !
try
{
     Process.Start(filePath);
}
finally { }

5. dxg:GridColumn不能直接包含FontFamily等在DataGridTextColumn中常見的屬性，需要重寫Template，重寫的時候有兩個地方需要綁定，Template綁定的是RowData.Row.XX:

<dxg:GridColumn   Header="級別" Binding="{Binding RType}">    //第一處綁定
     <dxg:GridColumn.CellTemplate>
           <DataTemplate>
                   <TextBlock Text="{Binding RowData.Row.RType}" FontFamily="MS"></TextBlock>   //第二處綁定,這里是RowData.Row.XX
           </DataTemplate>
     </dxg:GridColumn.CellTemplate>
</dxg:GridColumn>

 

6. 上面說到GridControl有一個的強大的功能，GroupPanel。你可以將列標題拖入這個GroupPanel從而達到排序顯示功能。如果我想把GroupPanel里的列恢復原樣該怎么辦？怎么通過代碼把列給拖回原來的列表位置？這里有個簡單的方法

foreach(var item in gc.Columns)
{
     item.GroupIndex = -1;
}

 

 7. 這個GroupPanel顯示的時候會有一行英文提示：gridcontrol Drag a column header here to group by that column；如果想要用其它文字或者語言表述的話，可以：

 <dxg:TableView Name="tableView1" ShowTotalSummary="True">
       <dxg:TableView.RuntimeLocalizationStrings>
             <dxg:GridRuntimeStringCollection>
                   <dxg:RuntimeStringIdInfo Id="GridGroupPanelText" Value="Your words"/>
             </dxg:GridRuntimeStringCollection>   
       </dxg:TableView.RuntimeLocalizationStrings>
</dxg:TableView>

 

三、小結

 本文大致介紹了Dev的GridControl的基本功能，其實GridControl還有很多有用的設置可以去探索一下，我這里就做個拋磚引玉吧。