[C#/WPF] ControlTemplate 엘리먼트 : DataGrid 엘리먼트 정의하기

■ ControlTemplate 엘리먼트를 사용해 DataGrid 엘리먼트를 정의하는 방법을 보여준다.

TestProject.zip

0.01MB

▶ Person.cs

using System.ComponentModel;

namespace TestProject
{
    /// <summary>
    /// 사람
    /// </summary>
    public class Person : INotifyPropertyChanged
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Event
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 속성 변경시 이벤트 - PropertyChanged

        /// <summary>
        /// 속성 변경시 이벤트
        /// </summary>
        public event PropertyChangedEventHandler PropertyChanged;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 회사명
        /// <summary>
        private string companyName;

        /// <summary>
        /// 이름
        /// <summary>
        private string firstName;

        /// <summary>
        /// 성
        /// <summary>
        private string lastName;

        /// <summary>
        /// 이메일 주소
        /// <summary>
        private string emailAddress;

        /// <summary>
        /// 전화
        /// <summary>
        private string phone;

        /// <summary>
        /// 영업 담당
        /// <summary>
        private string salesPerson;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 회사명 - CompanyName

        /// <summary>
        /// 회사명
        /// </summary>
        public string CompanyName
        {
            get
            {
                return this.companyName;
            }
            set
            {
                if(this.companyName == value)
                {
                    return;
                }

                this.companyName = value;

                FirePropertyChangedEvent(nameof(CompanyName));
            }
        }

        #endregion
        #region 이름 - FirstName

        /// <summary>
        /// 이름
        /// </summary>
        public string FirstName
        {
            get
            {
                return this.firstName;
            }
            set
            {
                if(this.firstName == value)
                {
                    return;
                }

                this.firstName = value;

                FirePropertyChangedEvent(nameof(FirstName));
            }
        }

        #endregion
        #region 성 - LastName

        /// <summary>
        /// 성
        /// </summary>
        public string LastName
        {
            get
            {
                return this.lastName;
            }
            set
            {
                if(this.lastName == value)
                {
                    return;
                }

                this.lastName = value;

                FirePropertyChangedEvent(nameof(LastName));
            }
        }

        #endregion
        #region 이메일 주소 - EmailAddress

        /// <summary>
        /// 이메일 주소
        /// </summary>
        public string EmailAddress
        {
            get
            {
                return this.emailAddress;
            }
            set
            {
                if(this.emailAddress == value)
                {
                    return;
                }

                this.emailAddress = value;

                FirePropertyChangedEvent(nameof(EmailAddress));
            }
        }

        #endregion
        #region 전화 - Phone

        /// <summary>
        /// 전화
        /// </summary>
        public string Phone
        {
            get
            {
                return this.phone;
            }
            set
            {
                if(this.phone == value)
                {
                    return;
                }

                this.phone = value;

                FirePropertyChangedEvent(nameof(Phone));
            }
        }

        #endregion
        #region 영업 담당 - SalesPerson

        /// <summary>
        /// 영업 담당
        /// </summary>
        public string SalesPerson
        {
            get
            {
                return this.salesPerson;
            }
            set
            {
                if(this.salesPerson == value)
                {
                    return;
                }

                this.salesPerson = value;

                FirePropertyChangedEvent(nameof(SalesPerson));
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 속성 변경시 이벤트 발생시키기 - FirePropertyChangedEvent(propertyName)

        /// <summary>
        /// 속성 변경시 이벤트 발생시키기
        /// </summary>
        /// <param name="propertyName">속성명</param>
        protected void FirePropertyChangedEvent(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        #endregion
    }
}

 

▶ MainWindow.xaml

<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Color x:Key="ContentAreaLightColorKey">#ffc5cbf9</Color>
        <Color x:Key="ContentAreaDarkColorKey">#ff7381f9</Color>
        <Color x:Key="ControlLightColorKey">White</Color>
        <Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
        <Color x:Key="ControlDarkColorKey">#ff211aa9</Color>
        <Color x:Key="ControlMouseOverColorKey">#ff3843c4</Color>
        <Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
        <Color x:Key="GlyphColorKey">#ff444444</Color>
        <Color x:Key="BorderLightColorKey">#ffcccccc</Color>
        <Color x:Key="BorderMediumColorKey">#ff888888</Color>
        <Color x:Key="BorderDarkColorKey">#ff444444</Color>
        <Color x:Key="DatagridCurrentCellBorderColorKey">Black</Color>
        <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverterKey" />
        <Style x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="arrowPolygon"
                                                Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle Name="border"
                                SnapsToDevicePixels="True">
                                <Rectangle.Stroke>
                                    <LinearGradientBrush
                                        StartPoint="0.5 0"
                                        EndPoint="0.5 1">
                                        <GradientStop Offset="0" Color="{DynamicResource BorderLightColorKey }" />
                                        <GradientStop Offset="1" Color="{DynamicResource BorderMediumColorKey}" />
                                    </LinearGradientBrush>
                                </Rectangle.Stroke>
                                <Rectangle.Fill>
                                    <LinearGradientBrush
                                        EndPoint="0.5 1"
                                        StartPoint="0.5 0">
                                        <GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey }" />
                                        <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Polygon Name="arrowPolygon"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Bottom"
                                Margin="8 8 3 3"
                                Opacity="0.15"
                                Stretch="Uniform"
                                Points="0 10 10 10 10 0">
                                <Polygon.Fill>
                                    <SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
                                </Polygon.Fill>
                            </Polygon>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type DataGrid}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush
                        StartPoint="0.5 0"
                        EndPoint="0.5 1">
                        <GradientStop Offset="0" Color="{DynamicResource BorderLightColorKey}" />
                        <GradientStop Offset="1" Color="{DynamicResource BorderDarkColorKey }" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness"               Value="1"                   />
            <Setter Property="RowDetailsVisibilityMode"      Value="VisibleWhenSelected" />
            <Setter Property="ScrollViewer.CanContentScroll" Value="true"                />
            <Setter Property="ScrollViewer.PanningMode"      Value="Both"                />
            <Setter Property="Stylus.IsFlicksEnabled"        Value="False"               />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGrid}">
                        <Border Name="border"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Padding="{TemplateBinding Padding}"
                            SnapsToDevicePixels="True">
                            <Border.Background>
                                <SolidColorBrush Color="{DynamicResource ControlLightColorKey}" />
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{DynamicResource ControlLightColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ScrollViewer Name="DG_ScrollViewer"
                                Background="Black"
                                Focusable="false">
                                <ScrollViewer.Template>
                                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*"    />
                                                <RowDefinition Height="Auto" />
                                            </Grid.RowDefinitions>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="*"    />
                                                <ColumnDefinition Width="Auto" />
                                            </Grid.ColumnDefinitions>
                                            <Button
                                                Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}"
                                                Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
                                                Command="{x:Static DataGrid.SelectAllCommand}"
                                                Focusable="false"
                                                Visibility="{Binding HeadersVisibility,
                                                    ConverterParameter={x:Static DataGridHeadersVisibility.All},
                                                    Converter={x:Static DataGrid.HeadersVisibilityConverter},
                                                    RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                                            <DataGridColumnHeadersPresenter Name="PART_ColumnHeadersPresenter" Grid.Column="1"
                                                Visibility="{Binding HeadersVisibility,
                                                    ConverterParameter={x:Static DataGridHeadersVisibility.Column},
                                                    Converter={x:Static DataGrid.HeadersVisibilityConverter},
                                                    RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                                            <ScrollContentPresenter Name="PART_ScrollContentPresenter" Grid.Row="1" Grid.ColumnSpan="2"
                                                CanContentScroll="{TemplateBinding CanContentScroll}" />
                                            <ScrollBar Name="PART_VerticalScrollBar" Grid.Row="1" Grid.Column="2"
                                                Orientation="Vertical"
                                                ViewportSize="{TemplateBinding ViewportHeight}"
                                                Maximum="{TemplateBinding ScrollableHeight}"
                                                Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
                                            <Grid Grid.Row="2" Grid.Column="1">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset,
                                                        RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                                                    <ColumnDefinition Width="*" />
                                                </Grid.ColumnDefinitions>
                                            <ScrollBar Name="PART_HorizontalScrollBar" Grid.Column="1"
                                                Orientation="Horizontal"
                                                ViewportSize="{TemplateBinding ViewportWidth}"
                                                Maximum="{TemplateBinding ScrollableWidth}"
                                                Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />
                                        </Grid>
                </Grid>
                                    </ControlTemplate>
                                </ScrollViewer.Template>
                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsGrouping" Value="true">
                    <Setter Property="ScrollViewer.CanContentScroll" Value="false" />
                </Trigger>
            </Style.Triggers>
        </Style>
        <Style TargetType="{x:Type DataGridCell}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Border Name="border"
                            BorderThickness="1"
                            BorderBrush="Transparent"
                            Background="Transparent"
                            SnapsToDevicePixels="True">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="FocusStates">
                                    <VisualState Name="Unfocused" />
                                    <VisualState Name="Focused" />
                                </VisualStateGroup>
                                <VisualStateGroup Name="CurrentStates">
                                    <VisualState Name="Regular" />
                                    <VisualState Name="Current">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="border"
                                                Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource DatagridCurrentCellBorderColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type DataGridRow}">
            <Setter Property="Background">
                <Setter.Value>
                    <SolidColorBrush Color="{DynamicResource ControlLightColorKey}" />
                </Setter.Value>
            </Setter>
            <Setter Property="SnapsToDevicePixels"      Value="true"     />
            <Setter Property="Validation.ErrorTemplate" Value="{x:Null}" />
            <Setter Property="ValidationErrorTemplate">
                <Setter.Value>
                    <ControlTemplate>
                        <TextBlock
                            VerticalAlignment="Center"
                            Margin="2 0 0 0"
                            Foreground="Red"
                            Text="!" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridRow}">
                        <Border Name="DGR_Border"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            SnapsToDevicePixels="True">
                            <Border.Background>
                                <LinearGradientBrush
                                    StartPoint="0.5 0"
                                    EndPoint="0.5 1">
                                    <GradientStop Offset="0" Color="Transparent"                            />
                                    <GradientStop Offset="1" Color="{DynamicResource ControlLightColorKey}" />
                                </LinearGradientBrush>
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Normal_AlternatingRow">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ContentAreaLightColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ContentAreaDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Normal_Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Unfocused_Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Normal_Editing">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="MouseOver_Editing">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="MouseOver_Unfocused_Editing">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="Unfocused_Editing">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlDarkColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMediumColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="MouseOver_Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="MouseOver_Unfocused_Selected">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="DGR_Border"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <SelectiveScrollingGrid>
                                <SelectiveScrollingGrid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*"    />
                                </SelectiveScrollingGrid.ColumnDefinitions>
                                <SelectiveScrollingGrid.RowDefinitions>
                                    <RowDefinition Height="*"    />
                                    <RowDefinition Height="Auto" />
                                </SelectiveScrollingGrid.RowDefinitions>
                                <DataGridCellsPresenter Grid.Column="1"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
                                <DataGridDetailsPresenter Grid.Row="1" Grid.Column="1"
                                    SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen,
                                        ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical},
                                        Converter={x:Static DataGrid.RowDetailsScrollingConverter},
                                        RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
                                    Visibility="{TemplateBinding DetailsVisibility}" />
                                <DataGridRowHeader Grid.RowSpan="2"
                                    SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
                                    Visibility="{Binding HeadersVisibility,
                                        ConverterParameter={x:Static DataGridHeadersVisibility.Row},
                                        Converter={x:Static DataGrid.HeadersVisibilityConverter},
                                        RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                            </SelectiveScrollingGrid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="RowHeaderGripperStyleKey" TargetType="{x:Type Thumb}">
            <Setter Property="Height"     Value="8"           />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Cursor"     Value="SizeNS"      />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border
                            Padding="{TemplateBinding Padding}"
                            Background="{TemplateBinding Background}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type DataGridRowHeader}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal"               />
                                    <VisualState Name="Normal_CurrentRow"    />
                                    <VisualState Name="Unfocused_EditingRow" />
                                    <VisualState Name="Normal_EditingRow"    />
                                    <VisualState Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames
                                                Storyboard.TargetName="rowHeaderBorder"
                                                Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState Name="MouseOver_CurrentRow"                    />
                                    <VisualState Name="MouseOver_Unfocused_EditingRow"          />
                                    <VisualState Name="MouseOver_EditingRow"                    />
                                    <VisualState Name="MouseOver_Unfocused_Selected"            />
                                    <VisualState Name="MouseOver_Selected"                      />
                                    <VisualState Name="MouseOver_Unfocused_CurrentRow_Selected" />
                                    <VisualState Name="MouseOver_CurrentRow_Selected"           />
                                    <VisualState Name="Unfocused_Selected"                      />
                                    <VisualState Name="Unfocused_CurrentRow_Selected"           />
                                    <VisualState Name="Normal_CurrentRow_Selected"              />
                                    <VisualState Name="Normal_Selected"                         />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Name="rowHeaderBorder"
                                Width="10"
                                BorderThickness="1">
                                <Border.BorderBrush>
                                    <LinearGradientBrush
                                        StartPoint="0.5 0"
                                        EndPoint="0.5 1">
                                        <GradientStop Offset="0" Color="{DynamicResource BorderLightColorKey}" />
                                        <GradientStop Offset="1" Color="{DynamicResource BorderDarkColorKey }" />
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush
                                        StartPoint="0.5 0"
                                        EndPoint="0.5 1">
                                        <GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey }" />
                                        <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <StackPanel Orientation="Horizontal">
                                    <ContentPresenter
                                        VerticalAlignment="Center"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                                    <Control
                                        Template="{Binding ValidationErrorTemplate, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}"
                                        SnapsToDevicePixels="false"
                                        Visibility="{Binding (Validation.HasError),
                                            Converter={StaticResource BooleanToVisibilityConverterKey},
                                            RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" />
                                </StackPanel>
                            </Border>
                            <Thumb Name="PART_TopHeaderGripper"
                                Style="{StaticResource RowHeaderGripperStyleKey}"
                                VerticalAlignment="Top" />
                            <Thumb Name="PART_BottomHeaderGripper"
                                Style="{StaticResource RowHeaderGripperStyleKey}"
                                VerticalAlignment="Bottom" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
            <Setter Property="Width"      Value="8"           />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Cursor"     Value="SizeWE"      />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border
                            Background="{TemplateBinding Background}"
                            Padding="{TemplateBinding Padding}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                        <Grid>
                            <Border Name="columnHeaderBorder"
                                BorderThickness="1"
                                Padding="3 0 3 0">
                                <Border.BorderBrush>
                                    <LinearGradientBrush
                                        StartPoint="0.5 0"
                                        EndPoint="0.5 1">
                                        <GradientStop Offset="0" Color="{DynamicResource BorderLightColorKey}" />
                                        <GradientStop Offset="1" Color="{DynamicResource BorderDarkColorKey }" />
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush
                                        StartPoint="0.5 0"
                                        EndPoint="0.5 1">
                                        <GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey }" />
                                        <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <ContentPresenter
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Border>
                            <Thumb Name="PART_LeftHeaderGripper"
                                Style="{StaticResource ColumnHeaderGripperStyle}"
                                HorizontalAlignment="Left" />
                            <Thumb Name="PART_RightHeaderGripper"
                                Style="{StaticResource ColumnHeaderGripperStyle}"
                                HorizontalAlignment="Right" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush
                        StartPoint="0.5 0"
                        EndPoint="0.5 1">
                        <GradientStop Offset="0" Color="{DynamicResource ControlLightColorKey }" />
                        <GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="{x:Type DataGridColumnHeadersPresenter}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
                        <Grid>
                            <DataGridColumnHeader Name="PART_FillerColumnHeader"
                                IsHitTestVisible="False" />
                            <ItemsPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Margin="10">
        <DataGrid Name="dataGrid"
            CanUserAddRows="False"
            CanUserDeleteRows="False">
        </DataGrid>
    </Grid>
</Window>

 

▶ MainWindow.xaml.cs

using System.Collections.ObjectModel;
using System.Windows;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainWindow()
        {
            InitializeComponent();

            ObservableCollection<Person> collection = new ObservableCollection<Person>();

            collection.Add
            (
                new Person
                {
                    CompanyName  = "회사1",
                    FirstName    = "길동",
                    LastName     = "홍",
                    EmailAddress = "id01@abc.com",
                    Phone        = "000-0000-0000",
                    SalesPerson  = "김철수"
                }
            );

            collection.Add
            (
                new Person
                {
                    CompanyName  = "회사1",
                    FirstName    = "동구",
                    LastName     = "강",
                    EmailAddress = "id02@abc.com",
                    Phone        = "000-0000-0000",
                    SalesPerson  = "김철수"
                }
            );

            collection.Add
            (
                new Person
                {
                    CompanyName  = "회사2",
                    FirstName    = "희수",
                    LastName     = "김",
                    EmailAddress = "id03@abc.com",
                    Phone        = "000-0000-0000",
                    SalesPerson  = "이영희"
                }
            );

            this.dataGrid.ItemsSource = collection;
        }

        #endregion
    }
}