DataGrid UI 변경(1부- 적용법)

C# 공부중·2024년 10월 15일

WPF

목록 보기
14/18

DataGrid UI 변경

기본 DataGrid xaml 파일 안에 직접 작성하는법

아래의 코드 처럼 DataGrid.RowStyle 해서 원하는 style 별로 custom 가능

   <DataGrid x:Name="xDataGridDailyDate"
                                      Grid.Row="1"
                                      Grid.RowSpan="1"
                                      Grid.Column="0"
                                      AutoGenerateColumns="False"
                                      Grid.ColumnSpan="2"
                                      CanUserAddRows="False"
                                      KeyDown="Grid_KeyDown"
                                      GotFocus="Grid_GotFocus"
                                      CellEditEnding="xDataGridDailyDate_CellEditEnding">
                                <DataGrid.RowStyle>
                                    <Style TargetType="{x:Type DataGridRow}">
                                        <Style.Triggers>
                                            <!-- Completed가 true일 때 배경색 변경 -->
                                            <DataTrigger Binding="{Binding m_bIsCompleted}"
                                                         Value="True">
                                                <Setter Property="Background"
                                                        Value="Gray" />
                                                <Setter Property="Foreground"
                                                        Value="Black" />
                                            </DataTrigger>

                                        </Style.Triggers>
                                    </Style>
                                </DataGrid.RowStyle>
                                <DataGrid.Columns>
                                    <DataGridCheckBoxColumn Header="Completed"
                                                            Binding="{Binding m_bIsCompleted}" />
                                    <DataGridTextColumn Header="DailyDate"
                                                        Binding="{Binding m_dtStartDate,StringFormat=\{0:yyyy-MM-dd\}}" />
                                    <DataGridTextColumn Header="DailyDose"
                                                        Binding="{Binding m_fDailyDose}" />
                                    <DataGridTextColumn Header="Fraction"
                                                        Binding="{Binding m_intFraction}" />

                                </DataGrid.Columns>

                            </DataGrid>

Styles 폴더 만들어서 적용

Resource.Dictionary 만들어서 적용하기

원하는 DataGrid 우클릭 -> 템플릿 편집 -> 복사본 편집 -> App.xaml으로 복사된 code 잘라내기 -> StyleFolder 에 있는 작성한 파일에 붙여넣기. 모든 항목 , 응용 프로그램 으로 지정하기

위의 동작을 수행후에 app.xaml 이 열리면 그걸 닫아주고 다시 시행해야한다. (2017 visualstudio version)

아래의 code 처럼 진행하면 가능

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:SCHScheduler.Styles"
                    xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2">
    <Style TargetType="{x:Type DataGrid}">
        <Setter Property="Background"
                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
        <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="BorderBrush"
                Value="#FF688CAF" />
        <Setter Property="BorderThickness"
   // 이하 생략 app.xaml 에서 가져오는부분
    </Style>
</ResourceDictionary>

App.xaml 에 등록하는 방법 확인해보기

스타일 모음집을 참고해보자
https://velog.io/@tmdgk10/WPFStyle%EB%AA%A8%EC%9D%8C%EC%A7%91

0개의 댓글