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 FlexGrid 기능 소개

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

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

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

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

WPF DataGrid의 자세한 비교

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

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

자세한 기능 비교

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

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

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

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

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

DataGrid와 FlexGrid의 기본 사항

패키지 비교

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

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

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

XAML 선언 및 데이터 바인딩

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

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

DataGrid와 FlexGrid 행 및 열 API

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

열 유형 비교

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

템플릿 열과 셀 템플릿

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

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

행 및 열 비교

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

DataGrid와 FlexGrid 기능 비교 

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

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

편집과 새 행 비교

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

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

열 필터링 비교

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

다중 값 필터링

조건부 필터링

전체 텍스트 필터링 비교

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

필터 행 비교

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

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

사용자 정의 필터링 비교

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

부울 및 문자열 값을 위한 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;
}

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

그룹화 및 요약 비교

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

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

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

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

열 요약

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와 동일한 선택 및 마우스를 위에 놓았을 때 효과를 지원합니다.

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

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

스크롤 및 페이징 비교

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

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

다음은 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에는 다음과 같은 차이점이 있습니다.

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

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

내보내기 및 인쇄 비교

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

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

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

스타일 지정 및 모양 비교

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

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

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에서 다르게 처리됩니다.

이벤트

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

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

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

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

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