We Keep Coding

The Mouse Over trigger is not working on wpf button control

The Mouse Over trigger is not working on wpf button control. I want to change background and foreground of a button when the mouse is over on it.
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFF2E32F" Offset="0" />
<GradientStop Color="#FF45E815" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
Edited
I added Template but it just removes the button default MouseOver trigger and not taking place my desired foreground and background style.

I found a working solution from here. Define the style inside the button like this:
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFF2E32F" Offset="0" />
<GradientStop Color="#FF45E815" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>

Style with template is blocking the text in WPF

I'm trying to create a template for my buttons that have:
Border corner radius
Background as gradient
Change border color on hover
So far I got here:
<Window.Resources>
<Style TargetType="Button" x:Key="aimDark">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5,5,5,0" />
<Setter Property="Height" Value="20" />
<Setter Property="Foreground" Value="#0e0e0e" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
CornerRadius="4"
BorderBrush="#000000"
BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#006d23" Offset="0" />
<GradientStop Color="#006d23" Offset="0.05" />
<GradientStop Color="#00c741" Offset="0.45" />
<GradientStop Color="#00c741" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Test" Name="btn01" Style="{StaticResource aimDark}" />
</Grid>
The Problem:
First my Content in the button doesn't appear, in fact there isn't text been render in my button.
And I don't know how to change only the border color in the Hover Event.

In ControlTemplate you should specify ContentPresenter to display the Content of a Button.
<Window.Resources>
<Style TargetType="Button" x:Key="aimDark">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5,5,5,0" />
<Setter Property="Height" Value="20" />
<Setter Property="Foreground" Value="#0e0e0e" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
CornerRadius="4"
BorderBrush="#000000"
BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#006d23" Offset="0" />
<GradientStop Color="#006d23" Offset="0.05" />
<GradientStop Color="#00c741" Offset="0.45" />
<GradientStop Color="#00c741" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

The template that you created does not have a ContentPresenter, and that's required in order to show the content (text or other). I suggest you start from the default Button template and make changes as you need.

You need a ContentPresenter to make the content of the button appear.
Also if you define a name in ControlTemplate>Border you can modify it when a action is trigger like this:
<Style x:Key="mylayout" TargetType="Button">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5,5,5,0" />
<Setter Property="Height" Value="20" />
<Setter Property="Foreground" Value="#949494" />
<Setter Property="Background" Value="the_gradient" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="4" BorderBrush="#000000" BorderThickness="1" Background="{TemplateBinding Background}" Name="border">
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#e9eceb" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

How to avoid that a tabItem loses colour

I have a WPF program with a tabItems interfaces set on the left hand side.
What I want is that the tabItem keeps the colour as in the following picture:
Please notice where is the mouse pointer. When there the tabItem is coloured.
When going in another part of the interface on the right the tabItem looses the colour and gets embossed:
I am not sure if it helps posting my xaml file helps.
Basically I noticed that when the arrow goes on a datagrid on the right the tabItem is coloured when going on the free space it isn't.
Please notice that I don't want the tabItem to be of a particular colour, it has to follow the system palette and so to be in the correct system colour.
Thank you for any help.

Here is an Article from Microsoft describing how to use ColorTemplate with Triggers to solve your issue.
Here is the example from article in case in the future the link is down for some reason:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0,0,-4,0"
Background="{StaticResource LightBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource WindowBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Resources:
<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
...
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
...
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
...
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />
...
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
...
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

Telerik - WPF - RadGridView Filter - How to set checkbox container to scroll?

I'm still pretty green to WPF, and I'm trying to figure out how to work with a Telerik RadGrid for WPF.
The grid has a filter that automatically populates with checkboxes for every value in the field. You can see the problem this creates below:
Is there a way to make the component that contains the checkboxes scroll after a certain point? Say, a max of 200 pixels or so?
I'm trying to maintain changes like this in a resource file. I'm ok with XAML but not much of a C# programmer. Here is what I currently have for the GridViewHeaderCell portion:
<Style x:Key="{x:Type telerik:GridViewHeaderCell}" TargetType="{x:Type telerik:GridViewHeaderCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
<Grid x:Name="PART_HeaderCellGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">
<Border BorderBrush="#FF4B4B4B" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="1,1" StartPoint="1,0">
<GradientStop Color="#FF292929" Offset="1"/>
<GradientStop Color="#FF6C6C6C"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Border x:Name="GridViewHeaderCell_Over" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
<Border BorderBrush="White" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBA3" Offset="1"/>
<GradientStop Color="#FFFFFBDA" Offset="0"/>
<GradientStop Color="#FFFFD25A" Offset="0.43"/>
<GradientStop Color="#FFFEEBAE" Offset="0.42"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<Border x:Name="GridViewHeaderCell_Selected" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF616161" Offset="0"/>
<GradientStop Color="#FF989898" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB69A78"/>
<GradientStop Color="#FFFFE17A" Offset="0.126"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFD74E" Offset="0.996"/>
<GradientStop Color="#FFFFDCAB" Offset="0.17"/>
<GradientStop Color="#FFFFB062" Offset="0.57"/>
<GradientStop Color="#FFFFD18F" Offset="0.56"/>
<GradientStop Color="#FFFFBA74"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Border>
<ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
</Style>
</ContentControl.Style>
</ContentControl>
<Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M0,0L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0z" Fill="Black" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Top" Width="5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1" ScaleX="1"/>
<SkewTransform AngleY="0" AngleX="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
<telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" IsTabStop="False" Margin="0,0,8,0" Visibility="{TemplateBinding FilteringUIVisibility}">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:FilteringDropDown>
<Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="8"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
<Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="8"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="SortingState" Value="None"/>
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
<Setter Property="Foreground" Value="Black"/>
</MultiTrigger>
<Trigger Property="SortingState" Value="Ascending">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
<Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
<Setter.Value>
<ScaleTransform ScaleY="1" ScaleX="1"/>
</Setter.Value>
</Setter>
<Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
</Trigger>
<Trigger Property="SortingState" Value="Descending">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
<Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
<Setter.Value>
<ScaleTransform ScaleY="-1" ScaleX="1"/>
</Setter.Value>
</Setter>
<Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
</Trigger>
<Trigger Property="SortingState" Value="None">
<Setter Property="Opacity" TargetName="PART_SortIndicator" Value="0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5B5B5B" Offset="1"/>
<GradientStop Color="#FF868686"/>
<GradientStop Color="#FF4F4F4F" Offset="0.42"/>
<GradientStop Color="#FF0E0E0E" Offset="0.43"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#FF848484"/>
<Setter Property="BorderThickness" Value="0,0,1,1"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="5,0,3,0"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="DropMarkPen">
<Setter.Value>
<Pen Brush="White" Thickness="2"/>
</Setter.Value>
</Setter>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
If you need additional information for the solution, please let me know!
Thanks.

Just curious what version you are using and if there is any other styling in place within the application, as by default the dropdown has a max height of 250px and should handle scrolling. This is the default view with a brand new project with the 2011.2.712.40 version:
If you can shed some more info on version number that would be a great next step, as the above is from the latest official release (not the new one tomorrow :D). Because the filter control would be handled by this chunk of code:
<telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" IsTabStop="False" Margin="0,0,8,0" Visibility="{TemplateBinding FilteringUIVisibility}">
<telerik:StyleManager.Theme>
<telerik:Office_BlackTheme/>
</telerik:StyleManager.Theme>
</telerik:FilteringDropDown>
but if that hasn't been modified/defined elsewhere then we need to dig deeper into what's causing the issue.

How to change column header's background color when using WPF datagrid

How to change column header's background color when using WPF datagrid? Need to modify xaml directly?

Use a style with a setter targeted at DataGridColumnHeader:
<DataGrid>
<DataGrid.Resources>
<Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="Blue" />
</Style>
</DataGrid.Resources>
</DataGrid>

Try this:
<windows.Resources>
<LinearGradientBrush x:Key="HeaderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF6B8E95" Offset="0"/>
<GradientStop Color="#FF14A7C1" Offset="1"/>
<GradientStop Color="#FF1E424E" Offset="0.509"/>
<GradientStop Color="#FF1D4855" Offset="0.542"/>
<GradientStop Color="#FF1D4855" Offset="0.542"/>
<GradientStop Color="#FF193A44" Offset="0.526"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HeaderBorderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF1D1D1D" Offset="0.614"/>
<GradientStop Color="#FF007F96" Offset="0.853"/>
<GradientStop Color="#FF0AEAFA" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="HeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="{StaticResource HeaderBrush}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Cursor" Value="Hand" />
</Style>
</Windows.Resources>
<Grid>
<DataGrid Name="dataGrid1" ColumnHeaderStyle="{StaticResource HeaderStyle}"/>
</Grid>
This is the result:

<DataGridTextColumn Header="ID">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="Green"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>

Style style = new Style(typeof(System.Windows.Controls.Primitives
.DataGridColumnHeader));
style.Setters.Add(new Setter(ToolTipService.ToolTipProperty
,"Your tool tip here"));
style.Setters.Add(new Setter { Property = BackgroundProperty, Value
= Brushes.Yellow });
dgExcelSheet.Columns[1].HeaderStyle = style;

I found out that for me, it is not possible to change only background color without loosing other styles (paddig/borders/...)
So i wrote some style which is simillar to original in: aero2.normalcolor.xaml
Style contains mouseover, press and sort effect
Here is result
You can also create your own colors
<!--DATAGRID-->
<LinearGradientBrush x:Key="ThemeDGHeader_Background" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.42"/>
<GradientStop Color="#FFEAEAEA" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_Border" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF7F8FA" Offset="0"/>
<GradientStop Color="#FFD5D5D5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFDAF4FF" Offset="0.42"/>
<GradientStop Color="#FFACE2F9" Offset="0.6"/>
<GradientStop Color="#FFA1DCF5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBCE4F9" Offset="0.42"/>
<GradientStop Color="#FF8CD5F7" Offset="0.6"/>
<GradientStop Color="#FF77C6EE" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_Sorted" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE7F8FF" Offset="0.42"/>
<GradientStop Color="#FFDEF5FF" Offset="0.6"/>
<GradientStop Color="#FFBCE8FB" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ThemeDGHeader_MouseOverBorder" Color="#FF76C8F0"/>
<SolidColorBrush x:Key="ThemeDGHeader_PressedBorder" Color="#FF7EC2E2"/>
<SolidColorBrush x:Key="ThemeDGHeader_SortedBorder" Color="#FF9DD8F5"/>
<SolidColorBrush x:Key="ThemeDG_Border" Color="#FF688CAF"/>
<!--DATAGRID HEADER-->
<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}" x:Key="DCHS">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border x:Name="BR"
BorderThickness="1,0,1,1"
Padding="0,0,2,0"
BorderBrush="{StaticResource ThemeDGHeader_Border}"
Background="{StaticResource ThemeDGHeader_Background}">
<Border x:Name="BRIN"
CornerRadius="1"
Padding="4,4,4,2"
BorderThickness="0,0,0,0"
BorderBrush="{StaticResource ThemeDGHeader_PressedBorder}"
>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
/>
</Border>
</Border>
<Path x:Name="SortArrow"
HorizontalAlignment="Center" VerticalAlignment="Top"
Width="7" Height="4" Margin="0,1,0,0"
Stretch="Fill"
RenderTransformOrigin="0.5,0.5"
Visibility="Visible"
Data="M0,0 L1,0 0.5,1 z" >
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0,0">
<GradientStop Color="#FF9DC3D8" Offset="1"/>
<GradientStop Color="#FF7AA8C4" Offset="0.403"/>
<GradientStop Color="#FF4B7085" Offset="0.017"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<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="SortDirection" Value="{x:Null}">
<Setter TargetName="SortArrow" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
<Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_MouseOver}"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_MouseOverBorder}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BR" Property="Border.Padding" Value="0,0,0,0"/>
<Setter TargetName="BRIN" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Pressed}" />
<Setter TargetName="BRIN" Property="Border.BorderThickness" Value="1,1,1,0"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDG_Border}"/>
<Setter TargetName="BR" Property="Border.BorderThickness" Value="1,0,1,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Using:
<DataGrid ColumnHeaderStyle="{StaticResource DCHS}"/>

try this
<Style.Triggers >
<Trigger Property="SortDirection" Value="Ascending" >
<Setter Property="Background" Value="{StaticResource SelectedSolidColor}" />
</Trigger>
</Style.Triggers>
</Style>