Custom Gridline in WPF Grid Control

Introduction

WPF에서 제공되는 Grid컨트롤에는 ShowGridLine속성을 통해 현재 Grid에 정의된 Column과 Row를 확인 할 수 있습니다. 하지만, ShowGridLine을 사용 했을 경우 아래 그림과 같이 점선으로 표현되고, ColumnSapn 또는 RowSpan이 적용되지 않는것을 확인 하실 수 있습니다. 이번 강좌에서는 Grid에 정의된 Column과 Row에 해당하는 Gridline을 그리는 방법과, ColumnSpan, RowSpan이 적용된 Gridline을 그리는 방법에 대해 소개합니다.

Basic Grid Line

먼저 Grid에 정의된 ColumnDefinition과 RowDefinitions에 맞게 Grid Line을 그리기 위해 Grid를 상속받는 CustomGrid객체를 생성합니다. 그리고 Grid의 OnRender메서드를 아래와 같이 재정의 하면 간단하게 아래와 같은 모양의 결과를 얻을 수 있습니다.

protected override void OnRender(DrawingContext DC) { Pen LinePen = new Pen(Brushes.Black, 1); // 각 Column의 시작점에서부터 Grid의 세로크기 만큼 선을 그립니다. foreach (ColumnDefinition Column in ColumnDefinitions) { DC.DrawLine(LinePen, new Point(Column.Offset, 0), new Point(Column.Offset, ActualHeight)); } // 각 Row의 시작점에서부터 Grid의 가로크기 만큼 선을 그립니다. foreach (RowDefinition Row in RowDefinitions) { DC.DrawLine(LinePen, new Point(0, Row.Offset), new Point(ActualWidth, Row.Offset)); } // 오른쪽과 아래쪽 의 테두리를 그립니다. DC.DrawLine(LinePen, new Point(ActualWidth, 0), new Point(ActualWidth, ActualHeight)); DC.DrawLine(LinePen, new Point(0, ActualHeight), new Point(ActualWidth, ActualHeight)); base.OnRender(DC); }

Basic Grid Line Result

결과를 확인해보면, ColumDefinitions와 RowDefinitions에 정의된 값에만 의존하여 Line을 그렸기때문에 ColumnSpan과 RowSpan이 고려되지 않고 모든 Cell에 Line이 적용된것을 확인 하실 수 있습니다. ColumnSpan과 RowSpan은 Grid에 포함된 자식 컨트롤에서 결정되기 때문에 만약 ColumnSpan과 RowSpan을 반영하여 Gridline을 적용하고자 한다면 아래와 같이 자식 컨트롤로부터 Span 정보를 불러와 이에 맞게 처리 해줄 수 있는 코드가 필요합니다.

Extension Grid Line

protected override void OnRender(DrawingContext DC) { Pen LinePen = new Pen(Brushes.Black, 1); // 자식 컨트롤의 Span정보를 저장할 공간 bool[,] ColumnSpanMap = new bool[ColumnDefinitions.Count, RowDefinitions.Count]; bool[,] RowSpanMap = new bool[ColumnDefinitions.Count, RowDefinitions.Count]; foreach (FrameworkElement Item in Children) { int Col = (int)Item.GetValue(Grid.ColumnProperty); int Row = (int)Item.GetValue(Grid.RowProperty); int ColSpan = (int)Item.GetValue(Grid.ColumnSpanProperty); int RowSpan = (int)Item.GetValue(Grid.RowSpanProperty); for (int x = Col; x < Col + ColSpan; x++) { for (int y = Row; y < Row + RowSpan; y++) { RowSpanMap[x, y] = ColumnSpanMap[x, y] = true; } } for (int y = Row; y < Row + RowSpan; y++) ColumnSpanMap[Col + ColSpan - 1, y] = false; for (int x = Col; x < Col + ColSpan; x++) RowSpanMap[x, Row + RowSpan - 1] = false; } // 각 Column의 시작점에서부터 Grid의 세로크기 만큼 선을 그립니다. for (int x = 0; x < ColumnDefinitions.Count; x++) { ColumnDefinition Column = ColumnDefinitions[x]; // 각 Row의 시작점에서부터 Grid의 가로크기 만큼 선을 그립니다. for (int y = 0; y < RowDefinitions.Count; y++) { RowDefinition Row = RowDefinitions[y]; Point EndPoint = new Point(Column.Offset + Column.ActualWidth, Row.Offset + Row.ActualHeight); if (ColumnSpanMap[x, y] == false) DC.DrawLine(LinePen, new Point(Column.Offset + Column.ActualWidth, Row.Offset), EndPoint); if (RowSpanMap[x, y] == false) DC.DrawLine(LinePen, new Point(Column.Offset, Row.Offset + Row.ActualHeight), EndPoint); } } // 왼쪽과 위쪽 의 테두리를 그립니다. DC.DrawLine(LinePen, new Point(0, 0), new Point(0, ActualHeight)); DC.DrawLine(LinePen, new Point(0, 0), new Point(ActualWidth, 0)); base.OnRender(DC); }

Extension Grid Line Result

 

Development TIP

만약 달력 컨트롤과 같이 많은 Column과 Row를 포함하는 컨트롤을 개발할 때 GridLine을 적용하면 보다 편리하게 구현 하실수 있습니다. 이번 강좌에서 설명한 GridLine에 대한 예제(달력 컨트롤)는 Sample 페이지에서 확인 하실 수 있습니다.