성태의 닷넷 이야기
홈 주인
모아 놓은 자료
프로그래밍
질문/답변
사용자 관리
사용자
메뉴
아티클
외부 아티클
유용한 코드
온라인 기능
MathJax 입력기
최근 덧글
[정성태] 질문이 잘 이해가 안 됩니다. 우선, 해당 소스코드에서 ILis...
[양승조
] var대신 dinamic으로 선언해서 해결은 했습니다. 맞는 해...
[양승조
] 또 막혔습니다. ㅠㅠ var list = props[i].Ge...
[양승조
] 아. 감사합니다. 어제는 안됐던것 같은데....정신을 차려야겠네...
[정성태] "props[i].GetValue(props[i])" 코드에서 ...
[정성태] 저렇게 조각 코드 말고, 실제로 재현이 되는 예제 프로젝트를 압...
[정성태] Modules 창(Ctrl+Shift+U)을 띄워서, 해당 Op...
[정성태] 만드실 수 있습니다. 단지, Unity 엔진 내의 스크립트와 W...
[공진영] 안녕하세요 좋은글 감사합니다. 현재 제가 wpf로 관제 모...
[정성태] The Windows Registry Adventure #1: ...
글쓰기
제목
이름
암호
전자우편
HTML
홈페이지
유형
제니퍼 .NET
닷넷
COM 개체 관련
스크립트
VC++
VS.NET IDE
Windows
Team Foundation Server
디버깅 기술
오류 유형
개발 환경 구성
웹
기타
Linux
Java
DDK
Math
Phone
Graphics
사물인터넷
부모글 보이기/감추기
내용
<div style='display: inline'> <br /> <div style='font-family: 맑은 고딕, Consolas; font-size: 20pt; color: #006699; text-align: center; font-weight: bold'>WPF - Grid 컨트롤의 ShowGridLine 개선</div><br /> <br /> 지난번에는 HTML 테이블의 Cell Padding에 해당하는 기능을 구현해 보았는데요.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > WPF - CellPadding 속성을 구현하는 Grid Layout ; <a target='_tab' href='/2/0/734'>http://www.sysnet.pe.kr/2/0/734</a> </pre> <br /> 역시나, HTML Table 태그를 사용해보신 분들은 또 한 가지 아쉬운 기능이 있을 것입니다. 바로 Cell 간의 Border 속성이 그것인데요.<br /> <br /> 예를 들어, 다음과 같은 HTML Table의 경우,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > <table style="width: 300px; height: 300px;" border="1"> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td rowspan=2>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td> <td colspan=2>&nbsp;</td> </tr> </table> </pre> <br /> 아래와 같은 식으로 나오게 됩니다.<br /> <br /> [그림 1: Border가 지정된 HTML Table]<br /> <img alt='wpf_grid_show_grid_line_1.png' src='/SysWebRes/bbs/wpf_grid_show_grid_line_1.png' /><br /> <br /> 이제 WPF에서 제공되는 Grid Panel과 비교해 볼까요?<br /> 다행히, WPF Grid 역시 Border와 비슷한 기능을 제공합니다. "ShowGridLines" 의존 속성을 지원하는데, 이를 지정하면 다음과 같은 식으로 보이게 됩니다.<br /> <br /> [그림 2: ShowGridLines="True"가 지정된 Grid]<br /> <img alt='wpf_grid_show_grid_line_2.png' src='/SysWebRes/bbs/wpf_grid_show_grid_line_2.png' /><br /> <br /> 불행히도, 보시는 것처럼 ShowGridLines 속성이 왜 있을까 하는 의문이 들 정도입니다. 사실, Microsoft에서는 이 기능을 사용하지 말라고 권고하고 있습니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > .NET Framework Class Library - Grid.ShowGridLines Property ; <a target='_tab' href='https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.grid.showgridlines#System_Windows_Controls_Grid_ShowGridLines'>https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.grid.showgridlines#System_Windows_Controls_Grid_ShowGridLines</a> </pre> <br /> <span style='margin: 10px 0px 10px 10px; font-family: 맑은 고딕, Consolas, Verdana; font-style: italic; width: 800px; background-color: #ccffcc; color: #005555;'> Only dotted lines are available because this property is intended as a design tool to debug layout problems and is not intended for use in production quality code. If you want lines inside a Grid, style the elements within the Grid to have borders. <br /> </span><br /><br /> <br /> 스타일로 해결하라는데, ... 그건 디자인 잘 하시는 분들이 해결해 주시고. ^^ 저는 프로그래밍으로 접근해 보겠습니다.<br /> <br /> 일단, 검색을 해보죠.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > How can I change the color of the gridlines of a Grid in WPF? ; <a target='_tab' href='http://stackoverflow.com/questions/606220/how-can-i-change-the-color-of-the-gridlines-of-a-grid-in-wpf'>http://stackoverflow.com/questions/606220/how-can-i-change-the-color-of-the-gridlines-of-a-grid-in-wpf</a> </pre> <br /> 위의 글은 원인은 분석하였으나 답을 내주지 못했습니다. 그래서 좀 더 ^^ 찾아보면,<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > WPF Grid Question ; <a target='_tab' href='http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/74e36c60-b93a-47c7-8214-79669ec6b121/'>http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/74e36c60-b93a-47c7-8214-79669ec6b121/</a> </pre> <br /> 오... 그나마 괜찮은 대답입니다.<br /> <br /> 코드는 그저 Grid에 OnRender 부분만 다음과 같이 재정의해주면 됩니다.<br /> <br /> <pre style='margin: 10px 0px 10px 10px; padding: 10px 0px 10px 10px; width: 800px; background-color: #fbedbb; overflow-x: scroll; font-family: Consolas, Verdana;' > public class CustomGrid : Grid { Pen line = new Pen(Brushes.Black, 1); protected override void OnRender(System.Windows.Media.DrawingContext dc) { base.OnRender(dc); dc.DrawRectangle(null, line, new Rect(0,0,this.ActualWidth, this.ActualHeight)); double height = 0; foreach (var r in this.RowDefinitions) { height += r.ActualHeight; dc.DrawLine(line, new Point(0, height), new Point(this.ActualWidth,height)); } double width = 0; foreach (var c in this.ColumnDefinitions) { width += c.ActualWidth; dc.DrawLine(line, new Point(width, this.ActualHeight), new Point(width, 0)); } } } </pre> <br /> 와~~~ 간단하지요. ^^ 그런데, 정작 적용해 보면 다양한 상황을 고려하지 않았음을 알 수 있습니다. 예를 들어, 아래의 그림과 같이 나옵니다.<br /> <br /> [그림 3: RowSpan/ColumnSpan이 고려되지 않은 Cell Border]<br /> <img alt='wpf_grid_show_grid_line_3.png' src='/SysWebRes/bbs/wpf_grid_show_grid_line_3.png' /><br /> <br /> 그럼, 이 부분을 다듬으면 문제는 해결이 되는데요. 생각 자체는 그리 어렵지 않습니다. 예를 들어, 가로선을 그을 때(Row별로) 칼럼 단위만큼 그리며 진행하다가 다음번 그려야 될 곳이 RowSpan으로 되어 있으면 그 구획은 긋지 말고 건너뛰면 됩니다. 세로선도 마찬가지겠지요.<br /> <br /> 그렇게 생각한 데로 구현해서 보정하면, 최종적으로 아래와 같이 나옵니다. 이 정도면... 괜찮지 않나요! ^^<br /> <br /> [그림 4: RowSpan/ColumnSpan 영역을 고려한 Cell Border]<br /> <img alt='wpf_grid_show_grid_line_4.png' src='/SysWebRes/bbs/wpf_grid_show_grid_line_4.png' /><br /> <br /> <a target='_tab' href='http://www.sysnet.pe.kr/bbs/DownloadAttachment.aspx?fid=470&boardid=331301885'>보정된 소스 코드는 첨부된 솔루션 압축 파일</a>에 있습니다. (2023-04-20: 덧글의 Lyn 님의 소스코드가 반영됐습니다.)<br /> <br /> <br /><br /><hr /><span style='color: Maroon'>[이 토픽에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]</span> </div>
첨부파일
스팸 방지용 인증 번호
5556
(왼쪽의 숫자를 입력해야 합니다.)