ComponentOne .NET 6 컨트롤 릴리스와 함께 그리드의 셀 스타일 지정은 많은 사용자들이 질문을 가진 일반적인 도움말 주제입니다. 적용하려는 스타일링에 따라 FlexGrid API에 사용할 수 있는 기본 제공 기술이 많이 있습니다.

또한 FlexGrid는 코드를 한 줄도 작성하지 않아도 그리드, 열 또는 캡션의 모양을 사용자 정의할 수 있는 스타일 편집기도 제공합니다. 디자인 타임 편집기는 컨트롤의 .NET Framework 릴리스에서 사용할 수 있으며 FlexGrid의 .NET 6 릴리스 버전 기능에 현재 추가되고 있습니다.

이 포스팅에서는 FlexGrid CellStyle 클래스의 개념적 지식과 이들이 적용되는 우선 순위를 소개하는 것을 목표로 합니다. 또한 기본 스타일 우선 순위를 재정의하는 사용 사례도 처리합니다. 이것들을 하나씩 살펴보겠습니다.

기본 사항 

재사용 가능한 스타일 만들기

FlexGrid 컨트롤은 CellStyle 클래스를 사용하여 셀 모양을 사용자 정의합니다. CellStyle 객체를 수정할 때 해당 CellStyle을 사용 중인 모든 셀이 자동으로 다시 칠해져 변경 사항을 반영합니다. 이 이유로 표시하려는 각각의 새로운 CellStyle 객체를 만들고 있는지를 확인해야 합니다. 그렇지 않으면 적용된 가장 최근의 스타일만 표시됩니다. 새로운 CellStyle 객체를 만들어 재사용 가능한 스타일도 만들고 있습니다. 이는 아래 줄에 표시된 대로 새로운 CellStyle 객체를 만들어 추가 메서드를 사용해서 스타일 컬렉션에 추가하여 완료할 수 있습니다.

C1.Win.FlexGrid.CellStyle CustomStyle = c1FlexGrid1.Styles.Add("CustomStyle");

이 새로운 사용자 정의 스타일을 만들면 아래에 표시된 대로 행, 열 또는 셀 집합에 적용하기 전에 원하는 대로 설정하도록 다양한 속성을 수정할 수 있습니다.

CustomStyle.BackColor = Color.Red;
c1FlexGrid1.Cols[1].Style = CustomStyle;

필요에 따라 스타일 만들기 

스타일을 할당하는 또 다른 방식은 StyleNew 속성을 활용하는 것이며 이는 Row, Column, CellRange 등과 같은 FlexGrid 요소 내에 포함됩니다. StyleNew 속성은 객체의 스타일이 이미 있는 경우 이를 검색하거나 새로운 스타일을 만들어 객체에 할당합니다. 이 속성은 재사용하기 위한 것이 아닌 방식으로 형식을 적용하도록 빠른 방식을 제공합니다. 예를 들어 그리드 첫 두 열의 범위를 연한 분홍색으로 하고 싶다면 다음 코드 줄을 추가할 수 있습니다.

C1.Win.FlexGrid.CellRange rg = c1FlexGrid1.GetCellRange(1, 1, 6, 2);
rg.StyleNew.BackColor = Color.LightPink;

위의 CellRange 변수 "rg"는 응용 프로그램에서 FlexGrid 부분을 할당받으며 StyleNew.BackColor 속성이 설정되면(StyleNew는 CellRange 클래스에 속하는 속성) 할당된 셀이 적절히 반응합니다. 

스타일 제거

FlexGrid의 셀에 적용된 스타일 형식을 지우거나 제거하려면 FlexGrid의 Clear 메서드를 사용하고 "Style"을 매개 변수로 전달하여 셀에 할당된 사용자 정의 스타일을 지울 수 있습니다. “Style” 매개 변수로 Clear 메서드를 적용하면 그리드의 내용 또는 UserData가 아닌 스타일 형식만 지워집니다. 이는 아래에 표시되어 있습니다.

this.c1FlexGrid1.Clear(C1.Win.FlexGrid.ClearFlags.Style);

샘플 응용 프로그램에서 클릭하면 button_click 이벤트 내에 있는 위의 코드 줄을 발생하여 양식과 연결된 FlexGrid의 셀에 적용된 스타일 형식을 지우는 버튼을 만들었습니다. 

그리드 객체 스타일 지정

개별 셀, 열 또는 행 스타일 지정 외에도 대체 행 색상을 설정하거나 그리드 배경에 이미지를 추가하여 전체 FlexGrid 객체 자체를 스타일 지정할 수도 있습니다. 대체 행 색상을 적용하려면 CellStyleCollection 클래스의 CellStyle 항목 "Alternate"를 활용하고 아래 표시된 것처럼 대체 스타일 설정을 위해 다양한 속성을 설정해야 합니다.

// Set forecolor for the alternate row
c1FlexGrid1.Styles["Alternate"].ForeColor = Color.White; 
// Set backcolor for the alternate row
c1FlexGrid1.Styles["Alternate"].BackColor = Color.CadetBlue;

배경 이미지를 설정하려면 FlexGrid 객체의 BackgroundImage 속성을 참조하고 BackgroundImageLayout 속성을 활용하여 아래에 표시된 대로 이미지가 표시하는 방식을 제어할 수 있습니다.

// Set the background image in grid
c1FlexGrid1.BackgroundImage = Image.FromFile("C:\\IMG-20190524-WA0037.png");
c1FlexGrid1.BackgroundImageLayout = ImageLayout.Stretch;    

또한 C1.Win.FlexGrid.Util.BaseControls 네임스페이스에서 제공하는 BorderStyleEnum에서 값을 수락하는 BorderStyle 속성을 활용하여 그리드의 테두리를 사용자 정의할 수 있습니다. 다음은 예제입니다.

// Change the grid border to a three dimensional border
c1FlexGrid1.BorderStyle = C1.Win.C1FlexGrid.Util.BaseControls.BorderStyleEnum.Fixed3D; 

행, 열 및 셀 테두리 사용자 정의

특정 행 또는 열의 테두리 스타일을 사용자 정의하려면 StyleNew 속성을 사용하고 테두리 스타일, 방향 및 색상과 같은 속성을 설정하여 CellStyle 클래스의 “Border” 항목에 액세스해야 합니다. 그리드 컨트롤은 BorderStyleEnum 및 BorderDirEnum을 제공하여 테두리 스타일 및 방향을 각각 설정합니다. 아래 코드는 예제를 표시합니다.

// Set the border style for first column
c1FlexGrid1.Cols[1].StyleNew.Border.Style = BorderStyleEnum.Groove;
c1FlexGrid1.Cols[1].StyleNew.Border.Color = Color.Red;
c1FlexGrid1.Cols[1].StyleNew.Border.Direction = BorderDirEnum.Vertical; 
//Set the border style for first row
c1FlexGrid1.Rows[1].StyleNew.Border.Style = BorderStyleEnum.Raised
;c1FlexGrid1.Rows[1].StyleNew.Border.Color = Color.Blue; 

그리드에서 모든 셀의 테두리를 사용자 정의하려면 기본 제공 스타일인 "Normal"에 액세스하고 테두리 속성을 설정할 수 있습니다. 이와 유사하게 Styles 컬렉션에서 해당 스타일에 액세스하여 고정 등 셀의 특정 유형의 스타일을 변경할 수 있습니다.

// Set the border style for all grid cells
c1FlexGrid1.Styles.Normal.Border.Style = BorderStyleEnum.Double;

사용자 정의된 텍스트 스타일 지정 

색상 이외에도 FlexGrid의 CellStyle 클래스에는 글꼴, 여백, 방향, 맞춤, 효과 등을 변경할 수 있는 기능과 함께 셀 내에 텍스트 스타일을 조작할 수 있는 속성도 포함됩니다. 특정 행 또는 열 객체 내에서 글꼴을 변경하려면 아래 코드에 표시된 대로 CellStyle의 글꼴 속성을 설정할 수 있습니다.

//Apply the custom style to a particular row
c1FlexGrid1.Rows[1].StyleNew.Font = new Font("verdana", 10, FontStyle.Underline);
c1FlexGrid1.Rows[0].StyleNew.Font = new Font("verdana", 10, FontStyle.Bold);

FlexGrid 객체의 글꼴 속성을 설정하여 전체 그리드의 글꼴을 변경할 수도 있습니다.

// Change the font of whole grid content
c1FlexGrid1.Font = new Font("verdana", 10, FontStyle.Italic);

코드 예제와 함께 다양한 다른 유형의 글꼴에 대해 자세히 알아보려면 여기에서 문서를 확인하시기 바랍니다. 

• 텍스트 사용자 정의 | WinForms용 FlexGrid | ComponentOne(grapecity.com)

사용자 정의된 글리프 스타일 지정 

마지막으로 FlexGrid를 통해 열 필터링 및 정렬과 같은 다양한 작업을 표시하도록 그리드에 사용된 기본 글리프 이미지를 사용자 정의할 수 있습니다. 이 동작은 정렬 순서, 필터링된 상태 등과 같이 다양한 동작을 나타내도록 그리드에서 사용하는 이미지 컬렉션인 GridGlyphs 클래스를 사용하여 변경할 수 있습니다. 이러한 이미지는 GlyphEnum 열거에서 값을 수락하는 FlexGrid 클래스의 Glyphs 속성을 통해 액세스할 수 있습니다.

Glyphs 속성을 null로 설정하면 그리드와 연결된 기본 글리프가 복원됩니다. 글리프를 숨기려면 Glyph 속성을 빈 이미지로 설정할 수 있습니다. 아래 코드는 그리드의 필터 아이콘에 대한 글리프를 조작할 수 있는 방법을 보여줍니다.

//Create C1BitmapIcon object
C1.Framework.C1BitmapIcon icon1 = new C1.Framework.C1BitmapIcon();
//Create Bitmap object set to the custom image you want for the glyph
Bitmap bitmap = new Bitmap("icon.png");
//Set the source for the C1BitmapIcon object to the Bitmap object
icon1.Source = bitmap;
//Set the FilterEditor glyph to the C1BitmapIcon
c1FlexGrid1.Glyphs[GlyphEnum.FilterEditor] = icon1;
// Customize the glyph for filter icon in column
//Create C1BitmapIcon object
C1.Framework.C1BitmapIcon icon1 = new C1.Framework.C1BitmapIcon();
//Create Bitmap object set to the custom image you want for the glyph
Bitmap bitmap = new Bitmap("icon.png");
//Set the source for the C1BitmapIcon object to the Bitmap object
icon1.Source = bitmap;
//Set the FilterColumn glyph to the C1BitmapIcon
c1FlexGrid1.Glyphs[GlyphEnum.FilteredColumn] = icon1;

다음은 FilterColumn 글리프 아이콘을 분홍색 위험 폐기 기호로 변경한 예제입니다. 

그리드의 요소 및 우선순위 스타일 지정

위의 섹션 전반에 걸쳐 설명한 대로 셀의 모양(맞춤, 글꼴, 색상, 테두리 등)은 연결된 CellStyle 객체에서 모두 처리합니다. 그리드 자체에는 그리드의 형식을 지정하는 데 사용하는 스타일 컬렉션을 보유한 Styles 속성도 있습니다.

스타일 컬렉션에는 Focus, Highlight, Fixed 등의 기본 제공 스타일이 포함됩니다. 이전에는 자체 사용자 정의 스타일을 만들고 Rows[], Cols[], Cells 및 CellRanges와 같은 다양한 그리드 요소에 할당할 수 있는 방법에 대해 설명했습니다.

기본 우선순위 제한

Focus 및 Highlight 등 기본 제공 스타일 일부는 셀에 적용되는 경우 사용자 정의 스타일을 제한합니다. 셀에 적용된 사용자 정의 스타일을 계속 원하면 이러한 다른 기본 제공 스타일이 유효한 경우 기본 스타일 우선순위를 제한해야 합니다.

이렇게 하려면 “OwnerDrawCell” 이벤트에서 원하는 셀에 사용자 정의 스타일을 다시 할당해야 합니다. OwnerDrawCell 이벤트 및 DrawMode 속성을 통해 셀의 모든 시각적 측면을 재정의할 수 있습니다.

OwnerDrawCell 이벤트에 사용된 매개 변수는 셀의 스타일과 함께 표시되고 셀에서 원하는 것이 무엇이든 그릴 수 있는 데이터를 변경할 수 있습니다. 위의 시나리오에 따라 e.Style 속성을 사용하여 원하는 사용자 정의 스타일을 셀에 설정해야 합니다.