안녕하세요 동동입니다.
제생에 첨으로 강좌를 쓰는데요 첫경험이니 모자르더라두 이해해주세요^^
DataGrid에 대해서 알아보겠습니다. 프로그래머라면 한번씩 써보았을 컨트롤인데요 특히 DB내용을 보여줄때 가장 많이 이용하는
콘트롤임에도 불구하고 국내에는 DataGrid Style 적용하는 방법을 찾기가 어려웠었습니다.
자 이제 DataGrid Control에 Style을 입혀봅시다. WPF 거의 모든 콘트롤 Style을 바꾸어 보았는데 DataGrid가 가장 어려웠던
기억이 납니다. (Selection Color와 Header Color,Header Padding, Scrollbar Color때문에)
그리고 무엇보다 기본 제공된 콘트롤이 아니여서 Template 버그등 에로 사항이 많았습니다.
수정이 어려웠던부분에서 막힐때는 상용을 살까라는 유혹도 있었지만 ^^
먼저 WPF에서 DataGrid Control이 기본적으로 들어있지 않기 때문에 상용 DataGrid Control 을 사서 설치 하거나
무료인 WPF ToolKit 을 설치하셔야 합니다. 저는 돈없는 학생이므로 ToolKit을 선택하였습니다.
다운로드는 이곳(링크) 에서 받으실수 있습니다.
설치하신후 처음에 DataGrid를 사용한 모습입니다.
정말 초라합니다.
이것을 나름 멋있게 Black 톤으로 색을 바꾸어보면
Header Color과 Header 사이에 Padding 값이 들어갔고 선색이랑 Background가 바뀌었습니다.
보이지는 않지만 Selection 색(선택했을때 RowColor), 스크롤 색도 바꾸었습니다.
여기서 DataGrid 기본적인 스타일을 바꾸어보도록하겠습니다.
기본적인 스타일은
DataGrid를 선택후 Properties 창에서 조절을 할수있습니다.
저의 경우는 언제든지 쓸수 있도록 App.xaml에 Style로 만들었습니다.(Style 만드는 방법은 아시죠?)
<Style x:Key="dataGridBlack" TargetType="{x:Type Custom:DataGrid}">
<Setter Property="RowBackground" Value="#171717" />
<Setter Property="Foreground" Value="#FF999999" />
<Setter Property="HorizontalGridLinesBrush" Value="#FF2F2F2F" />
<Setter Property="VerticalGridLinesBrush" Value="#FF2F2F2F" />
<Setter Property="RowHeight" Value="34" />
<Setter Property="ColumnHeaderHeight" Value="34"/>
<Setter Property="RowHeaderWidth" Value="0"/>
<Setter Property="BorderBrush" Value="#FF2F2F2F"/>
<Setter Property="MaxHeight" Value="400"/>
<Setter Property="Background" Value="#FF171717"/>
<Setter Property="CanUserAddRows" Value="false"/>
<Setter Property="CanUserDeleteRows" Value="false"/>
<Setter Property="IsReadOnly" Value="true"/>
<Setter Property="AutoGenerateColumns" Value="False"/>
</Style>
이중 많이쓰는이는것을 설명하자면
RowBackground = grid 내부 색상(row)
foreground = grid 내부 글자 색상
HorizontalGridLinesBrush= grid 가로 줄 색상
verticalGridLineBrush = grid 세로 줄 색상
입니다.
자 이제 헤더를 수정해 봅시다.
DataGrid를 Select 한후 Object-Edit-OtherStyles-EditCoulmnheaderStyle-Create Empty를 선택합니다.
Key를 입력합니다 저는 알아보기 쉽도록 HeaderStyle을 이름을 정하고 app.xaml에 정의를 하였습니다.
자이제 app.xaml에서 HeaderStyle을 더블클릭하면
<Style x:Key="HeaderStyle"/>
이 추가된것을 볼수 있습니다. 하지만 Blend에서 막상 수정하기 위해서 보면
이렇게만 나오고 아무것도 나오지 않습니다. 이것을 수정할수 있도록하기 위해서
이런식으로 바꾸어 줍니다.
<Style x:Key="HeaderStyle" TargetType="{x:Type Custom:DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="#FF2F2F2F"/>
<Setter Property="BorderBrush" Value="#FF444444" />
<Setter Property="BorderThickness" Value="0,1,1,1" />
<Setter Property="Foreground" Value="#FF7E7E7E"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="10,0,10,0"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontFamily" Value="./Fonts\#Verdana"/>
<Setter Property="FontSize" Value="13"/>
</Style>
자 이렇게 바꾸어주신후에야 비로소 Blend에서 app.xaml에서
Header를 수정할수있게 가능해졌습니다 위 Xaml에서 Property는 입력안하셔도 무방합니다 예를 보여주기 위해서 쓴것입니다.
자이제 스타일을 적용하는일만 남았습니다.
Object-Edit Other Style에서 - Edit Coulmn Header Style에서 아까 만든 HeaderStyle을 적용하시면 됩니다.
아니면 xaml에서 직접 정의 해주셔도 됩니다 저는 주로 이방법을 사용합니다.
<Custom:DataGrid x:Name="CameraDataGrid" Style="{DynamicResource dataGridBlack}" ColumnHeaderStyle="{DynamicResource HeaderStyle}" Template="{DynamicResource DataGridControlTemplateBlack}" CellStyle="{DynamicResource csDataGridCellStyle}" >
Style = 아까 정의한것처럼 기본적인 Style 정의
ColumnHeaderStyle = HeaderStyle 정의
Template = 좀있다가 배울 Scrollbar Style을 적용하기 위해서 사용할 Template입니다
CellStyle = dataGrid의 CellStyle정의입니다 선택했을때 Background ,Foreground를 설정하실수 있습니다.
이렇게 헤더까지 적용했는데 2장에는 DataGrid를 조금 더 깊이 파고들어서 Template 에서 스크롤바 Style을 바꾸고
Datagrid를 행을 선택했을때에 보이는 기본적인 파란색 행을 이쁘게 바꾸어보겠습니다. 그리고 DataGrid 에서 Template을
이용할시 버그가 있어서 더이상 Template 안쪽으로 들어가지 못한는 경우의 해결법도 알아보겠습니다.
혹시 DataGrid Header를 가운데 정렬하는법과 공간을 주는법을 알고 싶으신분은
블러그에 공개했으니 블러그를 참조하시면 됩니다.^^
