title: DataGridColumnHeader Style
body: <pre><code>&lt;Style TargetType="DataGridColumnHeader"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type DataGridColumnHeader}"&gt;
                  &lt;Border x:Name="buttonBorderOuter"
                          BorderBrush="#DBDBDB"
                          BorderThickness="1"
                          Background="#00ECECEC"
                          Padding="2"&gt;
                      &lt;ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /&gt;
                      &lt;Border.Triggers&gt;
                          &lt;EventTrigger RoutedEvent="MouseEnter"&gt;
                              &lt;BeginStoryboard&gt;
                                  &lt;Storyboard&gt;
                                      ...
                                  &lt;/Storyboard&gt;
                              &lt;/BeginStoryboard&gt;
                          &lt;/EventTrigger&gt;
                          &lt;EventTrigger RoutedEvent="MouseLeave"&gt;
                              &lt;BeginStoryboard&gt;
                                  &lt;Storyboard&gt;
                                      ...
                                  &lt;/Storyboard&gt;
                              &lt;/BeginStoryboard&gt;
                          &lt;/EventTrigger&gt;
                      &lt;/Border.Triggers&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>The above code shows my <code>Style</code> for the <code>DataGridColumnHeader</code>. It's working fine with the <code>MouseEnter</code> and <code>MouseLeave</code> effect but there are some small things I don't like. There is what I have right now below here.</p>
  
  <p><img src="https://i.stack.imgur.com/CVOmA.png" alt="enter image description here"></p>
  
  <p>The problem here is that each <code>Cell</code> in the <code>Header</code> has the rounded border. I want that between 2 <code>Cells</code> in the <code>Header</code> is 1 single straight line. Also, when I click on one of the <code>Cells</code> in the <code>Header</code>, there is no arrow showing for the sorting and also no highlight that it is that column that's sorted.</p>
  
  <p>Does somebody has a template I could edit myself to achieve what I want? Or what are the parts I have to edit?</p>