WPF DataGrid에서 FlexGrid로 마이그레이션 가이드 > 블로그 & Tips

본문 바로가기

ComponentOne

블로그 & Tips

WPF DataGrid에서 FlexGrid로 마이그레이션 가이드

페이지 정보

작성자 GrapeCity 작성일 21-12-02 11:09 조회 2,098회 댓글 0건

본문

ComponentOne WPF Edition에는 매우 유사한 두 가지 DataGrid 컨트롤인 C1DataGrid와 C1FlexGrid가 포함되어 있습니다.  

그 배경은 다음과 같습니다. C1DataGrid가 처음에 Silverlight의 포트로 제공되었습니다. WPF와 Silverlight 플랫폼이 많은 코드를 공유하여 두 플랫폼을 위한 UI 컨트롤을 제공하는 것이 효율적이었습니다. FlexGrid는 이전에도 그랬고 지금도 가장 널리 사용되는 WinForms 컨트롤입니다.

 2011년경 개발자가 WinForms에서 WPF로 마이그레이션하는 데 도움이 되도록 WPF용 버전을 제공하기로 결정했습니다. 10년 후 새로운 사용자에게 혼동을 줄 수 있음에도 불구하고 여전히 두 개의 데이터 그리드를 모두 제공하고 있습니다. 

그러나 이제 FlexGrid가 GrapeCity ComponentOne 제품 라인을 위한 .NET 데이터 그리드의 미래라고 결정했습니다. .NET 5 로드맵 초반에 C1DataGrid가 더 이상 제공되지 않는다고 발표했습니다. 이제 WinUI, Blazor, Xamarin, MAUI(곧 출시 예정)를 비롯한 모든 .NET 플랫폼에서 FlexGrid를 지원합니다. 하나의 데이터 그리드에서 개발하고 투자하는 데 집중하는 것이 합리적이기 때문입니다. 

.NET 5 이상으로 마이그레이션할 계획이 있으면 FlexGrid로 전환하는 것이 좋습니다. 이 문서의 목적은 WPF용 C1DataGrid 컨트롤에서 .NET 5.0 이상을 위한 C1FlexGrid로 마이그레이션하기 위한 지침을 제공하는 것입니다.

 

 

WPF DataGrid에서 FlexGrid로 마이그레이션 가이드WPF FlexGrid 기능 소개

 


이 마이그레이션 가이드의 사용 방법


이 가이드에서는 높은 수준의 몇 가지 차이점을 집중적으로 다룬 다음 각각의 주요 기능을 더 자세히 살펴보고 마이그레이션을 보다 원활하게 수행하는 데 도움이 되도록 API 또는 마크업의 몇 가지 차이점을 설명합니다.


주요 기능별로 살펴보거나 특정 C1DataGrid 속성, 이벤트 또는 메서드를 기준으로 가이드를 검색해(Ctrl+F) 관련 FlexGrid API를 찾아볼 수 있습니다. 간단히 설명하기 위해 두 그리드에서 정확하게 동일한 기능 및 API는 생략했습니다. 따라서 원하는 내용을 찾을 수 없으면 마이그레이션하는 것이 가장 간단할 수 있습니다.


샘플로 배우는 것을 선호하는 경우 모든 기능의 전체 코드 예제가 나와 있는 WPF용 FlexGridExplorer 샘플을 살펴보는 것이 좋습니다. 이 샘플은 제품과 함께 다운로드할 수 있으며 GitHub에서 찾을 수 있습니다.


 

WPF DataGrid의 자세한 비교


아래 표에는 제공되는 .NET 버전과 두 WPF DataGrid 컨트롤에 대한 지원 여부가 나와 있습니다.

 C1DataGridC1FlexGrid참고
.NET Framework 3.0지원지원이 버전은 더 이상 지원되지 않거나 배포되지 않습니다. 지원 채널을 통해서만 얻을 수 있습니다.
.NET Framework 4.0지원지원이 버전은 유지 관리 모드이므로, 새로운 기능 없이 버그 수정만 제공됩니다.
.NET Framework 4.5.2지원지원이 버전은 최대 .NET 4.8까지 응용 프로그램을 지원합니다.
.NET 5.0 이상지원 안 함지원이 버전(FlexGrid만)은 .NET 6 이상에 맞춰 계속 업데이트됩니다.

 

.NET Framework 4.0~4.8에 대한 ComponentOne DataGrid 컨트롤이 계속 제공되지만 그 이상의 .NET 버전에 대해 지원할 계획은 없습니다. .NET 5 이상에서 C1DataGrid의 .NET Framework 버전을 계속 사용할 수 있지만 다음과 같은 제한 사항이 있습니다. (1) 응용 프로그램은 .NET Framework에 따라 달라지며, (2) 디자이너 제한 사항과 오류가 발생할 수 있습니다.

  


자세한 기능 비교


마이그레이션 전에 FlexGrid가 필요한 주요 기능을 지원하는지 확인할 수 있습니다.

다음 표에는 이 문서를 게시할 당시 .NET 5.0 이상에 적합한 FlexGrid의 최신 버전이 나와 있습니다. (*)가 표시된 기능은 향후 업데이트를 위한 로드맵에 포함됩니다.

 C1DataGridC1FlexGrid
새 행 추가(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
셀 병합(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
CheckList 선택(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
열 및 행 고정(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
열 푸터(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
열 다시 정렬(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
조건부 필터링(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
조건부 서식 지정/사용자 정의 셀(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
사용자 정의 열/템플릿(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
사용자 정의 필터(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
지연된 스크롤(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
빈 그리드 보기(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
Excel로 내보내기, CSV(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
필터 행(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
전체 텍스트 필터링(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
그룹화/요약(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
그룹화 패널(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
계층 그리드/행 세부 정보(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
하이퍼링크(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
마우스를 위에 놓았을 때(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
다중 값 필터링(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
페이징(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
인쇄(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
행 제거(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
행 다시 정렬/끌어서 놓기(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
선택(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
배율 크기 조정/응답형 열 크기 조정(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
첫 행 및 끝 행 템플릿(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
유효성 검사(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)
가상화/요청 시 로드(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)(WPF DataGrid에서 FlexGrid로 마이그레이션 가이드)

 


FlexGrid는 대부분의 기능을 지원하지만 컨트롤 간에 몇 가지 작은 차이가 있습니다. 현재 FlexGrid에서 지원 계획이 없는 주요 기능은 지연된 스크롤, 그룹화 패널 UI, 첫 행/끝 행 템플릿입니다. 그룹화 패널 UI는 더 이상 널리 사용되지 않는 것으로 간주되며, 최종 사용자는 메뉴("이 열 기준 그룹화")를 사용하여 열별로 그룹화할 수 있습니다.


C1DataGrid에서 첫 행/끝 행 템플릿을 사용하는 새 행 추가 기능은 FlexGrid에서 지원됩니다. 다음 섹션에서는 FlexGrid에서 지원되는 각 주요 기능의 차이점에 대해 자세히 살펴봅니다.


 

DataGrid와 FlexGrid의 기본 사항


패키지 비교


마이그레이션할 준비가 되면 첫 번째 단계는 응용 프로그램에 필수 참조를 추가하는 것입니다.


C1DataGrid 또는 C1FlexGrid .NET Framework 라이브러리 중 어떤 라이브러리를 참조 중인지 식별하고 아래 표에서 해당하는 .NET 5 패키지를 추가하여 동일한 기능을 사용할 수 있습니다. 참조를 위해 아래 내용에서는 FlexGrid .NET Framework 라이브러리도 제공합니다.


 C1DataGrid .NET FrameworkC1FlexGrid .NET FrameworkC1FlexGrid .NET 5.0 이상
기본 컨트롤 라이브러리C1.WPFC1.WPF.DataGridC1.WPFC1.WPF.FlexGridC1.WPF.CoreC1.WPF.Grid
필터링 기능C1.WPF.DataGrid.FiltersC1.WPF.FlexGridFilterC1.WPF.DataFilter
그룹화 기능C1.WPF.DataGrid.SummariesC1.WPF.FlexGrid.GroupPanelC1.DataCollection
Excel 내보내기/가져오기C1.WPF.DataGrid.ExcelC1.WPF.C1ExcelC1.WPF.Grid.Excel
날짜 및 시간 셀 편집C1.WPF.DateTimeEditorsC1.WPF.DateTimeEditorsC1.WPF.DateTimeEditors


*.NET Core+의 경우 데이터 변환은 C1DataCollection 컴포넌트가 처리합니다. 이 .NET Standard 컴포넌트는 .NET Framework의 C1CollectionView와 유사합니다.



XAML 선언 및 데이터 바인딩


다음 단계로, FlexGrid에서 데이터 바인딩과 열 생성을 복제합니다. C1DataGrid와 FlexGrid는 모두 ItemsSource 속성을 사용하여 바인딩됩니다.


열은 자동으로 생성되거나 열의 Binding 속성을 사용하여 XAML에서 선언 및 바인딩할 수 있습니다.

C1DataGridC1FlexGrid
<c1:C1DataGrid x:Name="grid" ItemsSource="{Binding}" AutoGenerateColumns="False"> <c1:C1DataGrid. Columns> <c1:DataGridTextColumn Binding="{Binding ProductName}" /> <c1:DataGridNumericColumn Binding="{Binding Price}" /> <c1:DataGridDateTimeColumn Binding="{Binding ReadyForDelivery}"/> /c1:C1DataGrid.Columns/c1:C1DataGrid<c1:FlexGrid x:Name="grid" ItemsSource="{Binding}" AutoGenerateColumns="False"> <c1:FlexGrid. Columns> <c1:GridColumn Binding="FirstName" MinWidth="150" Width="*"/> <c1:GridDateTimeColumn Binding="LastOrderDate" Mode="Date" MinWidth="110" <c1:GridColumn Binding="OrderTotal" Format="C" /> /c1:FlexGrid.Columns/c1:FlexGrid



DataGrid와 FlexGrid 행 및 열 API


다음 단계에서는 코드를 복사합니다. 일반적인 열 및 행 클래스를 위한 API에는 몇 가지 차이가 있습니다. 두 DataGrid가 행 및 열 색인(grid[row,col])으로 셀 액세스를 지원하므로 클래스 유형만 변경하면 됩니다.



열 유형 비교


두 그리드가 동일한 유형의 열 및 셀 콘텐츠를 지원하지만 C1DataGrid와 FlexGrid의 열 유형 클래스 이름은 다릅니다. 아래에는 열 유형과 FlexGrid에서 사용하는 열 유형이 나와 있습니다. 일반 GridColumn은 대부분의 경우 사용됩니다.

C1DataGridC1FlexGrid
DataGridBoundColumnGridColumn
DataGridCheckBoxColumnGridColumn
DataGridComboBoxColumnGridColumn
DataGridDateTimeColumnGridDateTimeColumn
DataGridHyperlinkColumnGridHyperlinkColumn
DataGridImageColumnGridImageColumn
DataGridNumericColumnGridNumericColumn
DataGridRowHeaderColumnGridRowHeaderColumn
DataGridTemplateColumnGridColumn(템플릿 열과 셀 템플릿 참조)
DataGridTextColumnGridColumn



템플릿 열과 셀 템플릿


템플릿 또는 사용자 정의 셀은 C1DataGrid에서 특수 DataGridTemplateColumn 유형을 사용하여 생성된 다음 CellTemplate 및 CellEditingTemplate 속성을 사용하여 템플릿을 제공합니다.


FlexGrid에서 이러한 속성은 기본 열 유형에 존재하므로 템플릿을 사용하여 모든 열의 셀 콘텐츠를 사용자 정의할 수 있습니다.

C1DataGridC1FlexGrid
<c1: DataGridTemplateColumn> <c1:DataGridTemplateColumn. CellTemplate> <!—template content--> /c1:DataGridTemplateColumn.CellTemplate <c1:DataGridTemplateColumn. CellEditingTemplate> <!—template --> /c1:DataGridTemplateColumn.CellEditingTemplate/c1:DataGridTemplateColumn<c1: GridColumn> <c1:GridColumn. CellTemplate> <!—template content--> </c1:GridColumn. CellTemplate>/c1:GridColumn<c1: GridColumn> <c1: GridColumn.CellEditingTemplate> <!—template content--> /c1:GridColumn.CellEditingTemplate/c1:GridColumn



행 및 열 비교


아래에는 행 및 열 API의 차이점이 나와 있습니다. 행 다시 정렬과 같은 일부 기능은 AllowDragging 속성을 설정하여 FlexGrid에서 더 쉽게 만들었습니다.

C1DataGridC1FlexGrid
BottomRows구현되지 않음
CanUserRemoveRows구현되지 않음
CanUserReorderColumnsAllowDragging
CanUserResizeColumnsAllowResizing = 열 또는 둘 다
CanUserResizeRowsAllowResizing = 행 또는 둘 다
ColumnHeaderClickAction구현되지 않음
ColumnHeaderHeightDefaultColumnHeaderRowHeight
ColumnWidthDefaultColumnWidth
(Column)DefaultAutoWidth(FlexGrid)DefaultColumnWidth
FilterState구현되지 않음
(Column)GroupHeader구현되지 않음. 그룹화 참조
(Column)IsEditable(Column)IsReadonly
RowDetailsTemplate행 세부 정보 비교 참조
RowHeaderWidthDefaultRowHeaderColumnWidth
RowHeightDefaultRowHeight
(Row)Visibility(Row)IsVisible
ShowValidationIndicators(아직) 구현되지 않음
TopRows구현되지 않음. 셀 고정 참조



DataGrid와 FlexGrid 기능 비교 


계층 그리드와 행 세부 정보 비교


C1DataGrid와 FlexGrid는 행 세부 정보 기능을 사용하여 계층 그리드를 만들 수 있도록 중첩되는 DataGrid를 지원합니다. FlexGrid는 동작을 사용하여 더 나은 성능을 위한 기능을 지원합니다.

C1DataGridC1FlexGrid
CanUserToggleDetails구현되지 않음
<c1: C1DataGrid> <c1:C1DataGrid. RowDetailsTemplate> /c1:C1DataGrid.RowDetailsTemplate/c1:C1DataGrid<c1: FlexGrid> i:Interaction.Behaviors xmlns:i=http://schemas.microsoft.com/xaml/behaviors%3E <c1: FlexGridDetailProvider> /c1:FlexGridDetailProvider /i:Interaction.Behaviors/c1:FlexGrid


편집과 새 행 비교


C1DataGrid와 FlexGrid는 모두 DataGrid에 새 행을 추가하는 기능을 제공합니다. 편집은 열에 대해 활성화되고(열 유형 비교 참조) 그리드 수준에서 비활성화됩니다. 바인딩 모드를 TwoWay로 설정하여 두 DataGrid에서 데이터 바인딩 편집을 활성화할 수 있습니다.


C1DataGridC1FlexGrid
CanUserAddRowsAllowAddNew
CanUserEditRowsIsReadOnly
NewRowStyleNewRowStyleNewRowBackgroundNewRowForegroundNewRowPlaceholder
NewRowHeaderStyleNewRowIconTemplate
NewRowVisibilityNewRowPosition

새 행 추가와 관련된 이벤트의 경우 이벤트 주제를 참조하세요.



열 필터링 비교


FlexGrid와 C1DataGrid에서 지원되는 여러 가지 유형의 필터링이 있습니다. 각 그리드는 열 헤더에서 유사한 필터링 기능을 기본 제공합니다. C1DataGrid는 조건을 기본 제공하며 일부 코드를 사용하면 다중 값 필터링을 활성화할 수 있습니다. FlexGrid는 추가 코드가 필요 없는 다중 값 필터링과 조건부 필터링을 제공하지만 UI는 다릅니다(더 나음).


 

WPF DataGrid에서 FlexGrid로 마이그레이션 가이드다중 값 필터링

 

 

WPF DataGrid에서 FlexGrid로 마이그레이션 가이드조건부 필터링

 

C1DataGridC1FlexGrid
CanUserFilterAllowFiltering
FilterBy (메서드)구현되지 않음. DataCollection을 사용하여 컬렉션 보기를 직접 필터링합니다.
FilteredColumns구현되지 않음. DataCollection을 사용하여 열의 필터 상태를 얻습니다.
FiltersCombination구현되지 않음. DataCollection을 사용하여 필터 조합을 직접 지정합니다.
IsFilteringRowsAllowed구현되지 않음. DataCollection을 사용하여 컬렉션 보기를 직접 필터링합니다.



전체 텍스트 필터링 비교


전체 텍스트 필터링은 한 번에 모든 열에 대해 필터링하는 검색 상자처럼 작동합니다. C1DataGrid와 FlexGrid는 모두 동일한 옵션 MatchWholeWord, MatchCase, MatchNumbers, TreatSpacesAsAndOperator를 사용하는 전체 텍스트 필터링을 지원합니다. FlexGrid에서는 FilterEntry 속성을 설정하여 텍스트 상자 컨트롤에 동작을 더 쉽게 바인딩할 수 있습니다.

C1DataGridC1FlexGrid
<c1: C1DataGrid><c1: C1FullTextSearchBehavior.FullTextSearchBehavior> <c1:C1FullTextSearchBehavior />/c1:C1FullTextSearchBehavior.FullTextSearchBehavior/c1:C1DataGrid<c1: FlexGrid> <i:Interaction.Behaviors xmlns:i=http://schemas.microsoft.com/xaml/behaviors%3E <c1:FullTextFilterBehavior FilterEntry="{Binding Source={x:Reference _textBox}}"/> /i:Interaction.Behaviors/c1:FlexGrid



필터 행 비교


C1DataGrid는 C1DataGridFilterRow라는 특수한 유형의 첫 행/끝 행을 지원했습니다.


C1FlexGrid로 마이그레이션할 때 C1FlexGrid에서는 첫 행 및 끝 행 개념이 지원되지 않습니다. 새 C1GridFilterRow 클래스를 사용하여 필터 행을 정의 및 구성하고 스크롤하는 동안 행을 제자리에 유지하기 위해 고정합니다.

C1DataGrid 필터 행의 예C1FlexGrid 필터 행의 예
<c1:C1DataGrid x:Name="grid" FrozenTopRowsCount="1"> <c1:C1DataGrid. TopRows> <c1:DataGridFilterRow /> /c1:C1DataGrid.TopRows/c1:C1DataGrid<c1:FlexGrid FrozenRows="1"> <c1:FlexGrid. Rows> <c1:GridFilterRow AutoComplete="True" MatchCase="True"/> /c1:FlexGrid.Rows/c1:FlexGrid



사용자 정의 필터링 비교


FlexGrid에서 C1DataGrid와 같은 사용자 정의 필터를 지원하면서 여러 데이터 유형에 특수화된 필터를 제공하므로 사용자 정의 필터에 대한 필요가 줄어듭니다.

 

WPF DataGrid에서 FlexGrid로 마이그레이션 가이드부울 및 문자열 값을 위한 FlexGrid 메뉴

 

FlexGrid는 C1DataGrid가 일부 추가 코드, 클래스, 변환기를 사용하는 것과 동일하게 사용자 정의 필터링을 지원합니다.

 다음은 FilterLoading 이벤트를 사용하여 FlexGrid GridColumn에 대한 사용자 정의 색 필터를 보여 주는 예입니다.

<c1:GridColumn Binding="Color" FilterLoading="OnColorFilterLoading" />


FilterLoading 이벤트를 사용하면 필터를 사용자 정의할 수 있을 뿐만 아니라 적용 및 지우기 버튼을 표시할 수 있습니다.

private void OnColorFilterLoading(object sender, C1.WPF.Grid.GridColumnFilterLoadingEventArgs e)
{
   e.DataFilter.Filters.Clear();
   var colorFilter = new ColorFilter() { PropertyName = "Color" };
   colorFilter.SetColors(DataProvider.Colors.Select(x => (Color)ColorConverter.ConvertFromString(x)).ToList());
   e.DataFilter.Filters.Add(colorFilter);
   e.ShowClearButton = true;
}


WPF DataGrid에서 FlexGrid로 마이그레이션 가이드


전체 샘플 코드는 제품과 함께 설치되는 FlexGridExplorer 샘플이나 GitHub에서 찾아볼 수 있습니다.



그룹화 및 요약 비교


FlexGrid에서는 집계된 요약을 더 쉽게 그룹화하고 표시할 수 있습니다.


이전 그룹화 패널 대신 이제 최종 사용자는 메뉴를 통해 열을 그룹화할 수 있습니다. 새로운 ShowOutlineBar 속성을 설정하여 아웃 라인 버튼을 표시할 수 있습니다.

 

WPF DataGrid에서 FlexGrid로 마이그레이션 가이드



FlexGrid 그룹화 기능에는 아웃 라인 막대, 요약 및 런타임 열 기준 그룹화 메뉴가 포함됩니다.

 

기본적으로 그룹화는 FlexGrid에서 비활성화되어 있으며 열 자체에 대해 활성화해야 합니다. 그룹화 API에 대한 차이점은 다음과 같습니다.

C1DataGridC1FlexGrid
CanUserGroupAllowGrouping(개별 열에 대해 설정)
Column.GroupHeaderGroupHeaderConverter/GroupHeaderFormat
GroupRowHeightDefaultGroupRowHeight
ShowGroupingPanel구현되지 않음. 최종 사용자가 열 메뉴를 통해 그룹화할 수 있습니다.



열 요약


C1DataGrid에서는 그룹화된 행에 표시되는 요약(집계)을 지원했습니다.


이 기능은 동작을 사용하고 열의 DataGridAggregate를 설정하여 활성화했습니다. C1FlexGrid에서는 열에 대해 Aggregate 속성을 설정하기만 하면 되므로 더욱 쉽게 사용할 수 있습니다.


<c1:FlexGrid x:Name="grid" AutoGenerateColumns="False" ShowOutlineBar="True">
    <c1:FlexGrid.Columns>
        <c1:GridColumn Binding="Active" Width="Auto"/>
        <c1:GridColumn Binding="Name" Width="*"/>
        <c1:GridColumn Binding="OrderTotal" Width="Auto" Format="C" Aggregate="Sum" HorizontalAlignment="Right"/>
    </c1:FlexGrid.Columns>
</c1:FlexGrid>



선택 및 마우스를 위에 놓았을 때 비교


몇 개의 API 이름이 바뀌고 간소화된 부분이 있지만 FlexGrid에서는 C1DataGrid와 동일한 선택 및 마우스를 위에 놓았을 때 효과를 지원합니다.


C1DataGridC1FlexGrid
SelectedIndexSelection.Row
Selection.<> SelectedCells SelectedColumns SelectedRanges SelectedRowsSelection.<> Cells Column Column2 Row Row2
SelectionMode SingleCell MultiRange SingleColumn MultiColumn None SingleRow MultiRow SingleRangeSelectionMode Cell CellRange Column ColumnRange None Row RowRange * CellRange
ShowFluidMouseOverMouseOverBrush


선택 API는 셀 범위에 액세스하는 방법이 주로 다릅니다. FlexGrid에서 선택 멤버는 선택한 범위에 대한 행 및 열 색인을 제공합니다. 이러한 색인 값을 사용하여 그리드에서 값을 얻을 수 있습니다(flexGrid[row,col] 표기법 사용).


FlexGrid의 MouseOverBrush는 Brush가 행 및 선택 Brush와 결합되어 복합 효과를 생성하는 DataGrid의 FluidMouseOver 동작처럼 작동합니다.



스크롤 및 페이징 비교


C1DataGrid에서는 실시간 및 지연의 두 가지 스크롤 모드를 지원했습니다. FlexGrid에서는 기본적으로 실시간 스크롤을 지원합니다. FlexGrid의 대체 스크롤 방법은 가상화를 사용하여 사용자가 스크롤할 때 행을 로드하는 방법입니다.


페이징은 FlexGrid에서 C1PagedDataCollection 컴포넌트(C1DataCollection의 일부)와 C1DataPager UI 컨트롤을 사용하여 지원됩니다. WPF Edition 또는 Studio Enterprise용 라이선스가 있으면 C1DataCollection이 포함됩니다.


C1DataGridC1FlexGrid
ScrollMode.RealTime기본 동작
ScrollMode.Deferred구현되지 않음. 데이터 가상화에 C1DataCollection을 사용합니다.
ScrollPreviewRowTemplate구현되지 않음
VerticalScrollStep구현되지 않음



다음은 FlexGrid에서 페이징에 대한 코드 스니펫입니다.

VirtualModeDataCollection의 전체 코드 구현은 FlexGridExplorer에서 요구 시 및 페이징에 대한 샘플을 확인하세요.

// xaml
<c1:FlexGrid x:Name="grid" />
<c1:C1DataPager x:Name="pager" Padding="4" Background="White"/>

// code
var pagedCollection = new C1PagedDataCollection<object>(new VirtualModeDataCollection() { PageSize = 10 });
grid.ItemsSource = pagedCollection;
pager.Source = pagedCollection;



셀 고정 및 병합


셀 고정을 위한 API에는 다음과 같은 차이점이 있습니다.

C1DataGridC1FlexGrid
CanUserFreezeColumnsAllowFreezing
FrozenBottomRowsCount구현되지 않음
FrozenColumnCountFrozenColumns
FrozenTopRowsCountFrozenRows
ShowVerticalFreezingSeparatorFrozenLinesBrush
VerticalFreezingSeparatorStyleFrozenLinesBrush
VerticalFreezingSeparatorWidth구현되지 않음


셀 병합은 그리드에 대한 병합 규칙을 지정하도록 허용하는 FlexGrid의 새로운 기능입니다. AllowMerging 속성을 설정하면 인접 셀이 동일할 경우 셀, 행 헤더 또는 열 헤더를 강제로 병합할 수 있습니다.


또한 고유한 병합 관리자를 정의하여 열 및 행 방향으로 셀 병합을 관리할 수도 있습니다. FlexGridExplorer에서 사용자 정의 병합 샘플을 참조하세요.



내보내기 및 인쇄 비교


두 그리드에 대한 인쇄는 Print 메서드에서 동일한 매개 변수(문서 이름, 배율 모드, 페이지 여백, 최대 페이지 수)를 사용하여 처리합니다. 지원되는 배율 모드 역시 동일합니다(실제 크기, 페이지 너비, 단일 페이지).


또한 FlexGrid에서는 새 창을 시작하는 PrintPreview 메서드를 호출하여 인쇄 미리 보기를 지원합니다. 두 그리드는 사용자 정의 인쇄 시나리오에 사용할 수 있는 GetPageImages 메서드를 지원합니다.


FlexGrid는 Html, Csv, 텍스트, Pdf 및 Excel 형식(XLSX 및 XLSM)으로 저장을 지원합니다.



스타일 지정 및 모양 비교


FlexGrid에서는 이제 다양한 속성을 사용하여 눈금선 스타일을 지정할 수 있습니다. GridLinesVisibility 속성은 동일하게 남아 있습니다.

C1DataGridC1FlexGrid
HorizontalGridLinesBrushVerticalGridLinesBrushGridLinesBrushColumnHeaderGridLinesBrushRowHeaderGridLinesBrushTopLeftHeaderGridLinesBrush


다음 표에는 어떤 스타일 및 모양 관련 API가 다르고 FlexGrid에서 구현되지 않았는지 보여 줍니다.

C1DataGridC1FlexGrid
GroupingPanelBackground구현되지 않음. 그룹화 참조
GroupingPanelForeground구현되지 않음. 그룹화 참조
HeaderBackgroundColumnHeaderBackgroundRowHeaderBackground
HeaderForegroundColumnHeaderForegroundRowHeaderForeground
PressedBrush구현되지 않음
SelectedBackgroundSelectionBackground
ValidationBackground(아직) 구현되지 않음
ValidationForeground(아직) 구현되지 않음


FlexGrid에서는 열 및 행 헤더에 대한 추가 Brush를 사용하여 더 정밀한 스타일 지정을 지원합니다. 또한 FlexGrid에서는 CellStyles도 지원합니다.


즉, AlternatingRowStyle, ColumnHeaderStyle, CellStyle, GroupRowStyle, NewRowStyle, ColumnHeaderSelectedStyle, SelectionStyle 등과 같은 다양한 스타일을 사용하여 DataGrid의 테마를 보다 쉽게 지정할 수 있습니다. CellStyles는 모든 스타일 요소를 캡슐화합니다. 다음은 셀 스타일의 예입니다.


<UserControl.Resources>
    <Style x:Key="altStyle" TargetType="Control">
        <Setter Property="Background" Value="Red" />
        <Setter Property="Foreground" Value="White"/>
    </Style>
</UserControl.Resources>

<c1:FlexGrid AlternatingRowStyle="{StaticResource altStyle}">



조건부 서식 비교


C1DataGrid에 대한 조건부 서식은 LoadedCellPresenter 이벤트에서 처리되었습니다. 이 서식은 모든 셀에 대해 실행되고, 특정 열에 대해 확인한 다음 제공된 콘텐츠를 수정할 수 있습니다.


FlexGrid는 유사한 방식으로 처리하지만 CellFactory라는 별도 클래스를 사용합니다. CellFactory에는 셀 배경(컨테이너)과 전경(바운드 값)에 대한 논리가 분리되어 있습니다. 자체 CellFactory 클래스를 정의하고 PrepareCell 또는 BindCellContent 이벤트를 재정의한 다음 이 클래스의 인스턴스를 FlexGrid의 CellFactory 속성으로 설정하면 작동합니다.


아래는 코드 조각입니다. 샘플 전체를 보려면 FlexGridExplorer를 참조하세요.


flexGrid.CellFactory = new MyCellFactory();

public class MyCellFactory : GridCellFactory
{
    public override void PrepareCell(GridCellType cellType, GridCellRange range, GridCellView cell, Thickness internalBorders)
    {
        base.PrepareCell(cellType, range, cell, internalBorders);
        var orderCountColumn = Grid.Columns["OrderCount"];
        if (cellType == GridCellType.Cell && range.Column == orderCountColumn.Index)
        {
            var cellValue = Grid[range.Row, range.Column] as int?;
            if (cellValue.HasValue)
            {
                cell.Background = new SolidColorBrush(cellValue < 50.0 ? Colors.Red : Colors.Green);
            }
        }
    }
}



누락된 동작 해결


C1DataGrid에서는 XAML 마크업과 더 적은 C# 코드를 통해 고급 기능을 활성화하는 방법인 여러 가지 동작을 제공합니다.

일부 동작(예: FullTextFilter 동작)은 FlexGrid에서 수행되지만 아래 동작은 FlexGrid에서 다르게 처리됩니다.


C1DataGrid 4.5.2C1FlexGrid 4.5.2, 5
C1AdvancedFiltersBehavior열 필터링 참조
C1FullTextFilterBehaviorFullTextFilterBehavior
C1GroupingWithSummariesBehaviorGrouping 및 Aggregate 속성 참조
C1RowIndexHeaderBehavior구현되지 않음. CellFactory 및 조건부 서식 참조
C1ValidationBehavior(아직) 구현되지 않음



이벤트


다음 이벤트는 FlexGrid에서 다르거나 존재하지 않습니다.


C1DataGridC1FlexGrid
AutoGeneratedColumns구현되지 않음. AutoGeneratingColumn을 사용합니다.
BeginningNewRow구현되지 않음. BeginningRowEdit를 사용합니다.
CancelingNewRow구현되지 않음. RowEditEnding을 사용합니다.
CommittingNewRow구현되지 않음. RowEditEnded를 사용합니다.
CurrentCellChanged구현되지 않음. CursorChanged를 사용합니다.
DeletingRows구현되지 않음. 모든 종류의 행 변경에 Rows.CollectionChanged를 사용하거나 사용자 정의 데이터 컬렉션을 생성하여 RemoveAsync를 재정의하고 원격 소스 업데이트 등과 같은 작업을 수행할 수 있습니다.
FilterLoading구현되지 않음. ColumnOptionsLoading 또는 (Column).FilterLoading을 사용합니다.
FilterOpened구현되지 않음. ColumnOptionsLoading 또는 (Column).FilterLoading을 사용합니다.
LoadingRow구현되지 않음
LoadedRowHeaderPresenter구현되지 않음. CellFactory 및 조건부 서식 참조
LoadedRowPresenter구현되지 않음. CellFactory 및 조건부 서식 참조
LoadedCellPresenter구현되지 않음. CellFactory 및 조건부 서식 참조
RowsAdded구현되지 않음. 모든 종류의 행 변경에 대해 Rows.CollectionChanged 사용
RowsDeleted구현되지 않음. 모든 종류의 행 변경에 대해 Rows.CollectionChanged 사용



결론 - FlexGrid로 마이그레이션해야 하는 이유


NET 5.0 이상에서 제공하는 성능 이점 외에도 FlexGrid를 사용하여 다음과 같은 전반적인 개선 사항을 누려 보세요.


  • .NET 5.0 이상으로 마이그레이션할 계획이면 .NET 5 벤치마크에 나와 있는 플랫폼의 주요 성능 개선 사항을 누려 보세요.
  • .NET을 마이그레이션할 계획이 없더라도 거의 모든 영역에서 .NET Framework용 FlexGrid는 C1DataGrid보다 빠릅니다.
  • 열 메뉴 및 필터링이 전반적으로 개선되었습니다. 이제 사용자는 단순히 필터링하는 대신 열 메뉴에서 정렬, 그룹화하고 다양한 유형의 필터를 적용할 수 있습니다.
  • 스타일 및 모양 관련 사용자 정의가 전반적으로 개선되었습니다. FlexGrid는 보다 현대적인 Fluent/Material 스타일을 제공합니다.
  • 바인딩 해제 시나리오와 행 단위, 셀 단위 데이터 관리에 더 뛰어납니다.
  • 사용자 정의 셀 템플릿으로 유연성이 개선되었습니다. 모든 특수화된 열 유형에 맞춰 셀 템플릿을 제공하거나 템플릿을 편집할 수 있습니다.
  • 아래로 셀 병합 및 양방향으로 사용자 정의 셀 병합, 검사 목록 선택, 행 애니메이션, 빈 그리드 보기(행이 없는 경우 표시됨) 및 아웃 라인 그룹화 버튼과 같은 여러 가지 기능


궁금한 점이 있거나 더 자세히 알아보고 싶은 주제가 있으면 코멘트 섹션에 적어 주세요.




지금 바로 ComponentOne을 다운로드하여 직접 테스트해보세요!

c1.png

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.