title: Style a wpf datagrid
body: <p>I have found a sample style for wpf as per below, the main thing it does is to change the background color of DataGridColumnHeader and still preserve the sorting arrow. as can be seen the sorting arrow is explicitly specified in the style as UpArrow and DownArrow. </p>
  
  <pre><code>&lt;Style x:Key="SuojiHeaderStyle" TargetType="{x:Type DataGridColumnHeader}"&gt;
      &lt;Setter Property="VerticalContentAlignment" Value="Center" /&gt;
      &lt;Setter Property="Background" Value="{StaticResource HeaderBrush}" /&gt;
      &lt;Setter Property="Padding" Value="5" /&gt;
       &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type DataGridColumnHeader}"&gt;
                  &lt;Grid&gt;
                      &lt;dg:DataGridHeaderBorder SortDirection="{TemplateBinding SortDirection}"
                                   IsHovered="{TemplateBinding IsMouseOver}"
                                   IsPressed="{TemplateBinding IsPressed}"
                                   IsClickable="{TemplateBinding CanUserSort}"
                                   Background="{TemplateBinding Background}"
                                   BorderBrush="{TemplateBinding BorderBrush}"
                                   BorderThickness="{TemplateBinding BorderThickness}"
                                   Padding ="{TemplateBinding Padding}"
                                   SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
                                   SeparatorBrush="{TemplateBinding SeparatorBrush}"&gt;
                          &lt;ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" /&gt;
                      &lt;/dg:DataGridHeaderBorder&gt;
  
                      &lt;Thumb x:Name="PART_LeftHeaderGripper"
                                 HorizontalAlignment="Left"
                                 Style="{StaticResource ColumnHeaderGripperStyle}"/&gt;
                      &lt;Thumb x:Name="PART_RightHeaderGripper"
                                 HorizontalAlignment="Right"
                                 Style="{StaticResource ColumnHeaderLeftGripperStyle}"/&gt;
  
                      &lt;Path Name="UpArrow" Fill="Black" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="7,0,7,0" Visibility="Hidden"&gt;
                          &lt;Path.Data&gt;
                              &lt;PathGeometry&gt;
                                  &lt;PathFigure StartPoint="0,0"&gt;
                                      &lt;LineSegment Point="6,0"/&gt;
                                      &lt;LineSegment Point="3,5"/&gt;
                                      &lt;LineSegment Point="0,0"/&gt;
                                  &lt;/PathFigure&gt;
                              &lt;/PathGeometry&gt;
                          &lt;/Path.Data&gt;
                      &lt;/Path&gt;
                      &lt;Path Name="DownArrow" Fill="Black" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="7,0,7,0" Visibility="Hidden"&gt;
                          &lt;Path.Data&gt;
                              &lt;PathGeometry&gt;
                                  &lt;PathFigure StartPoint="0,5"&gt;
                                      &lt;LineSegment Point="6,5"/&gt;
                                      &lt;LineSegment Point="3,0"/&gt;
                                      &lt;LineSegment Point="0,5"/&gt;
                                  &lt;/PathFigure&gt;
                              &lt;/PathGeometry&gt;
                          &lt;/Path.Data&gt;
                      &lt;/Path&gt;
                  &lt;/Grid&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="SortDirection" Value="Descending"&gt;
                          &lt;Setter TargetName="UpArrow" Property="Visibility" Value="Hidden"/&gt;
                          &lt;Setter TargetName="DownArrow" Property="Visibility" Value="Visible"/&gt;
                      &lt;/Trigger&gt;
                      &lt;Trigger Property="SortDirection" Value="Ascending"&gt;
                          &lt;Setter TargetName="DownArrow" Property="Visibility" Value="Hidden"/&gt;
                          &lt;Setter TargetName="UpArrow" Property="Visibility" Value="Visible"/&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>when I apply this style to my DataGrid
          
              </p>
  
  <pre><code>        &lt;DataGrid ItemsSource="{Binding Source={StaticResource cvs}}" x:Name="MasterAllGrid" AutoGenerateColumns="False" 
              HeadersVisibility="All"  CanUserAddRows="False" HorizontalGridLinesBrush="#f0f0f0" VerticalGridLinesBrush="#f0f0f0" ColumnHeaderStyle ="{StaticResource SuojiHeaderStyle}"
                  VerticalAlignment="Stretch" SelectionChanged="MasterAllGrid_SelectionChanged" VerticalScrollBarVisibility="Auto" Background="{x:Null}"&gt;
  
              &lt;DataGrid.Columns&gt;
                  &lt;DataGridTextColumn Header="ticker" Binding="{Binding Path=Ticker}"/&gt;
  </code></pre>
  
  <p>the arrow in the style overlapps with the Column Header Text (Sorry I am not allowed to posed pic by StackOverflow because I am new). How to make it not to overlap?</p>