DataGrid TargetType 별 사용법
Setting 은 1부가서 보고 거기서 부터 필요한거 붙여서 사용해보자
1.DataGrid
DataGrid 전체에 영향을 끼칠수있는 범위의 타겟이라 이해하자.
기본적으로 Style 설정이나 TargetType에 대한 설정은 비슷하다. 그냥 좀 다른 Property가 있을뿐
<Style TargetType="{x:Type DataGrid}">
<!-- 예시로 아래 AlternatingRowBackground는 교차행에대한 bacground 색을 정해준다. -->
<Setter Property="AlternatingRowBackground"
Value="Black" />
</Style>
2. DataGridColumnHeader
DataGrid ColumnHeader 부분을 맡아준다.
이런식으로 ColumnHeader 등을 선택해서 직접 설정해줄수있다.
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background"
Value="#4485E3" />
<Setter Property="Foreground"
Value="White" />
<Setter Property="FontWeight"
Value="SemiBold" />
<Setter Property="Height"
Value="32" />
<Setter Property="Padding"
Value="5,0" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
</Style>3. AutoGenerateColumns
itemsSource 에 바인딩 된 data를 column 을 새로 만들어서 추가해주는기능?
binding을 하고있다면 column의 설계의 방해가 될수있음
<Setter Property="AutoGenerateColumns"
Value="False" />위의 코드 처럼 False로 놓고 진행하면 좋음
4. 가운데 정렬
표를 작성할때 ColumnHeader 나 순수 글자는 보기 좋게 가운데 정렬해주는게 좋다.
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />5. 숫자표기하는 cell은 오른쪽정렬
가독성 이 좋으려면 숫자를 오른쪽 정렬해서 보게하는편이 좋다고합니다.
TextBlock 타입으로 해서<Style x:Key="xDataGridCustomCellRightAilgnment" TargetType="TextBlock"> <Setter Property="TextBlock.TextAlignment" Value="Right"></Setter> </Style> <!-- 원하는 부분의 column header에 ElementStyle을 지정해준다.--> <DataGridTextColumn Header="Fraction" Binding="{Binding m_strFraction}" Width="*"> <DataGridTextColumn.ElementStyle> <StaticResource ResourceKey="xDataGridCustomCellRightAilgnment" /> </DataGridTextColumn.ElementStyle> </DataGridTextColumn>
## 6. bool 값을 통한 Row 의 변환 (애니메이션)
> CheckBoxColumn을 통한 check 값에 따라서 변화주기 좋다.
``` C#
<!--ResourceDictionary -->
<Style x:Key="xDataGridCustomRowBackground"
TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding m_bIsCompleted}"
Value="True">
<Setter Property="Background"
Value="LightGray" />
</DataTrigger>
</Style.Triggers>
</Style>
<!-- xaml -->
<DataGrid x:Name="xDataGridDailyDate"
Grid.Row="1"
Grid.RowSpan="1"
Grid.Column="0"
Grid.ColumnSpan="2"
CanUserAddRows="False"
KeyDown="Grid_KeyDown"
GotFocus="Grid_GotFocus"
CellEditEnding="xDataGridDailyDate_CellEditEnding"
Style="{StaticResource xDataGridCustom}"
ColumnHeaderStyle="{StaticResource xDataGridCustomColumnHeader}"
<!--RowStyle 전체로묶어주었다. -->
RowStyle="{StaticResource xDataGridCustomRowBackground}">7. Row의 cell 선 조정
세로선이 너무많으면 오히려 보기 어려울때가 있다. 가로선은 테두리선보다 덜 진하게 해주면 좀더 눈이 편할수있다.
vetical은 transparent 로 안보이게해주고
Horizeontal은 LightGray로 조금 약하게 해준다.
<Setter Property="VerticalGridLinesBrush"
Value="Transparent" />
<Setter Property="HorizontalGridLinesBrush"
Value="LightGray" />
8. 특정 행의 BorderBrush 변경
ColumnHeader와 Row 의 구분을 주기위해 진행
LoadingRow event를 사용하면 간단하게 row의 index값을 items.Count 로 확인해서 마지막 행과 첫번째 행을 콕 찝어서 진행해줄수있다.
private void xDataGridLoadingRow(object sender, DataGridRowEventArgs e)
{
var dataGrid = sender as DataGrid;
int rowCount = dataGrid.Items.Count;
if (e.Row.GetIndex() == rowCount - 1)
{
e.Row.BorderBrush = Brushes.Black;
e.Row.BorderThickness = new Thickness(0, 0, 0, 1);
}
if (e.Row.GetIndex() == 0)
{
e.Row.BorderBrush = Brushes.Black;
e.Row.BorderThickness = new Thickness(0, 1, 0, 0);
}
}9. RowHeader 없애기
이거뭔지 찾는대 30분이나 걸렸다.. 무능..
DataGridStyle 에서 이거 Value 를 0 으로 해주면 안보인다. 속이 시원하내
<Setter Property="RowHeaderWidth"
Value="0">
</Setter>10. ColumnHeader style
주의 : Themes:DataGridHeaderBorder 이걸 사용하면 편리하긴한대 Background 등 값을 변경할경우 템플릿이 작동하지않는다.
직접 보드를 작성하고 필요한 기능은 구현해야한다 .
<Style x:Key="xDataGridCustomColumnHeader"
TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="FontWeight"
Value="SemiBold" />
<Setter Property="VerticalContentAlignment"
Value="Center" />
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="Background"
Value="#69B6F3" />
<Setter Property="Padding"
Value="5" />
<Setter Property="SeparatorBrush"
Value="#4A9FE3" />
<Setter Property="SeparatorVisibility"
Value="Visible" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="HeaderBorder"
Grid.Column="0"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<ContentPresenter.Content>
<TextBlock Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"
TextAlignment="Center"
TextWrapping="Wrap" />
</ContentPresenter.Content>
</ContentPresenter>
</Border>
<Rectangle x:Name="SeparatorRectangle"
Grid.Column="1"
Width="1"
Fill="{TemplateBinding SeparatorBrush}"
Visibility="{TemplateBinding SeparatorVisibility}" />
<Thumb x:Name="PART_LeftHeaderGripper"
HorizontalAlignment="Left"
Style="{StaticResource ColumnHeaderGripperStyle}" />
<Thumb x:Name="PART_RightHeaderGripper"
HorizontalAlignment="Right"
Style="{StaticResource ColumnHeaderGripperStyle}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter TargetName="HeaderBorder"
Property="Background"
Value="#4A9FE3" />
<Setter Property="Foreground"
Value="#F0F0F0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>3부에 계속
....