HighlightBrushKey settings not working in Windows 7 - wpf

I have the following style defined in my Resource Dictionary:
<!-- ListViewItem Styles-->
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseOverBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#E4F0FD" Offset="0"/>
<GradientStop Color="#D7EAFD" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataForeground, Converter={StaticResource ColorToBrushConverter}}" />
<Setter Property="Padding" Value="1,0,1,0" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource MouseOverBrush}" />
<Setter Property="BorderBrush" Value="#C6E1FC" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
<!-- /ListViewItem Styles-->
When i was using windows XP the behavior that I was getting was my gradients were used for the Hightlight and the selection. Now i have switched over to using Windows 7 and it seems like the gradients are no longer used the highlight/selection colors are now the light blue of the VS look.
Any suggestions on why this would be happening and how do I fix this in such a way that it works the same on Windows XP and Windows 7 (we have a multiplatform environment)
Thank you.
Full Solution after comments
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseOverBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#E4F0FD" Offset="0"/>
<GradientStop Color="#D7EAFD" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataForeground, Converter={StaticResource ColorToBrushConverter}}" />
<Setter Property="Padding" Value="1,0,1,0" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource MouseOverBrush}" />
<Setter Property="BorderBrush" Value="#C6E1FC" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<!-- This part of the triger is for when Windows Aero theme is turned on Win Vista/7-->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}, Path=IsSelected}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}, Path=IsKeyboardFocusWithin}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}, Path=IsSelected}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}, Path=IsKeyboardFocusWithin}" Value="False" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</MultiDataTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>

The default Style on Aero is a bit different then the Luna themes. In Aero, there is a trigger like so in the default Style:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}"/>
<!-- ... -->
</Trigger>
While on Luna, it looks like:
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Bd" Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<!-- ... -->
</Trigger>
So you can see the default Style for Aero, doesn't use the HighlightBrushKey at all. This is mostly because those brushes are based on a single solid color. But the Aero theme has a lot of gradients, which can't be represented by the old style colors.
You would need to set the Background property as well to apply it on Aero, like so:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<!-- ... -->
</Trigger>

Related

Overwrite the default Windows 10 style for xaml ui elements

I´ve tried to change the IsMouseOver & IsFocused BorderBrush of a TextBox.
But it seems not to take affect, I always get this ugly standart blue color.
My style is inside a ResourceDictionary.
It´s working perfectly fine, except the problem with changing the BorderBrush.
<Style x:Key="TextBoxA" TargetType="TextBox" >
<Setter Property="Foreground" Value="#FFF0E6D2"/>
<Setter Property="FontSize" Value="15" />
<Setter Property="BorderBrush" Value="#FF785A28"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="#FF000306"/>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF040B11" Offset="1"/>
<GradientStop Color="#FF11171B" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF785A28" Offset="1"/>
<GradientStop Color="#FFC8C36E" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#FF785A28"/>
</Trigger>
</Style.Triggers>
</Style>
You need to modify the ControlTemplate. Right-click on the TextBox in design mode in Visual Studio and choose Edit Template->Edit a Copy to copy the default template into your XAML markup and then edit it as per your requirements:
<TextBox>
<TextBox.Style>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Foreground" Value="#FFF0E6D2"/>
<Setter Property="FontSize" Value="15" />
<Setter Property="BorderBrush" Value="#FF785A28"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Background" Value="#FF000306"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="AllowDrop" Value="true"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="border" Value="0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="#FF785A28"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF040B11" Offset="1"/>
<GradientStop Color="#FF11171B" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF785A28" Offset="1"/>
<GradientStop Color="#FFC8C36E" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
Unless you edit the template of the control, you are pretty limited in what you can change. Here is the default template for the WPF TextBox, so change it to fit your desired style: https://learn.microsoft.com/en-us/dotnet/framework/wpf/controls/textbox-styles-and-templates

How to change the Property="Style" in trigger

Trigger is not working. IsMouseOver is not changing style of the Button. I am not sure what is wrong with my code. I am trying to change the style property of the button on mouse over property. It keeps throwing error.
Basically I am trying to use different style on mouse over event
<Style x:Key="FancyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="Foreground" Value="{Binding Foreground}"/>
<Setter Property="FontWeight" Value="{Binding FontWeight}"/>
<Setter Property="Width" Value="{Binding Width}"/>
<Setter Property="Height" Value="{Binding Height}"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="White" />
<GradientStop Offset="0.2" Color="DarkGray" />
<GradientStop Offset="0.6" Color="Black" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Style" Value="{StaticResource ResourceKey=FancyButtonInvertStyle}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="FancyButtonInvertStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="Foreground" Value="{Binding Foreground}"/>
<Setter Property="FontWeight" Value="{Binding FontWeight}"/>
<Setter Property="Width" Value="{Binding Width}"/>
<Setter Property="Height" Value="{Binding Height}"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="0.4" Color="DarkGray" />
<GradientStop Offset="0.6" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
Instead of trying to change the Style in the Trigger, change the Background directly in it. Keeps you also from repeating the Style completely over again.
<Style x:Key="FancyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="Foreground" Value="{Binding Foreground}"/>
<Setter Property="FontWeight" Value="{Binding FontWeight}"/>
<Setter Property="Width" Value="{Binding Width}"/>
<Setter Property="Height" Value="{Binding Height}"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="White" />
<GradientStop Offset="0.2" Color="DarkGray" />
<GradientStop Offset="0.6" Color="Black" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="0.4" Color="DarkGray" />
<GradientStop Offset="0.6" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I'm not sure if you even can change the Style of itself in the Trigger the way you intend to, because it is not set via a Setter Tag in the target control itself.

how i can change button content foreground in trigger?

I want to change the foreground from a trigger when I press the button, here is the XAML I have so far:
<Window.Resources>
<SolidColorBrush x:Key="FocuseBorder" Color="DarkBlue" ></SolidColorBrush>
<SolidColorBrush x:Key="OverBorder" Color="Blue" />
<SolidColorBrush x:Key="PressdBorder" Color="Red" />
<SolidColorBrush x:Key="DefulateBorder" Color="Black" ></SolidColorBrush>
<LinearGradientBrush x:Key="GradDefulat" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF949494" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GradOver" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF949494" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GradPressd" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF666868" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GradFocuse" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FF5F5F5F" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="SelectionButton3"
TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="grd" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ClipToBounds="False">
<Border x:Name="TheBorder" CornerRadius="10"
Background="{StaticResource GradDefulat}" Height="{Binding Path=Height}" Width="{Binding Path=Width}"
BorderBrush="DarkSlateBlue"> </Border>
<Rectangle Name="rect" Fill="{StaticResource GradDefulat}" Stroke="DarkSlateBlue"
Height="200" Width="50">
<Rectangle.RenderTransform >
<RotateTransform Angle="45" CenterX=" 30" CenterY="25" >
</RotateTransform>
</Rectangle.RenderTransform>
</Rectangle>
<ContentPresenter x:Name="ContentArea" VerticalAlignment="Center" HorizontalAlignment="Center "
Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
<ControlTemplate.Triggers >
<Trigger Property="IsDefaulted" Value="True">
<Setter TargetName="TheBorder" Property ="Background" Value="{StaticResource GradDefulat}"/>
<Setter TargetName="TheBorder" Property="BorderBrush" Value="{StaticResource DefulateBorder}"/>
<Setter TargetName="rect" Property ="Fill" Value="{StaticResource GradDefulat}"/>
<Setter TargetName="rect" Property="Stroke" Value="{StaticResource DefulateBorder}"/>
</Trigger>
<!-- Defaulated-->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="TheBorder" Property="Background" Value="{StaticResource GradOver}"/>
<Setter TargetName="TheBorder" Property="BorderBrush" Value="{StaticResource OverBorder}"/>
<Setter TargetName="rect" Property="Fill" Value="{StaticResource GradOver}"/>
<Setter TargetName="rect" Property="Stroke" Value="{StaticResource OverBorder}"/>
</Trigger>
<!-- Over-->
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="TheBorder" Property="Background" Value="{StaticResource GradFocuse}"/>
<Setter TargetName="TheBorder" Property="BorderBrush" Value="{StaticResource FocuseBorder}"/>
<Setter TargetName="rect" Property="Fill" Value="{StaticResource GradFocuse}"/>
<Setter TargetName="rect" Property="Stroke" Value="{StaticResource FocuseBorder}"/>
</Trigger>
<!--Focuse-->
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="TheBorder" Property="Background" Value="{StaticResource GradPressd}"/>
<Setter TargetName="TheBorder" Property="BorderBrush" Value="{StaticResource PressdBorder}"/>
<Setter TargetName="rect" Property="Fill" Value="{StaticResource GradPressd}"/>
<Setter TargetName="rect" Property="Stroke" Value="{StaticResource PressdBorder}"/>
</Trigger>
<!-- Focuse-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
English isn't my first language, so I apologize for the lack of detail.

DataGrid header sort direction icon

How can i display custom sort direction image in wpf datagrid header?
I use this style in my datagrid. How can I add images for ascending and descending sort directions?
<Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}" >
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#fbfdfc" Offset="0.1" />
<GradientStop Color="#d4d5d9" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Padding" Value="3"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="SortDirection" Value="{x:Null}" />
</MultiTrigger.Conditions>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#ffd8a8" Offset="0.0" />
<GradientStop Color="#ffad41" Offset="0.5" />
<GradientStop Color="#fedf78" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Black" />
</MultiTrigger>
</Style.Triggers>
</Style>
If you want to change the triangles you need to override the Template, you can trigger on the SortDirection and display a different image accordingly. (Get the default templates from MSDN (Default WPF Themes link))

In XAML style, how to change solid background to gradient?

I've got a MainResources.xaml file in which I have a style that defines how each of my windows in my application look:
<Style x:Key="MainBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Background" Value="WhiteSmoke" />
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
Instead of "WhiteSmoke" I want my background to be this gradient:
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="0"/>
<GradientStop Color="#bbb" Offset="1"/>
</LinearGradientBrush>
But the following attempt causes VS2008 to tell me "Style setters do not support child elements":
<Style x:Key="MainBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Background">
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="0"/>
<GradientStop Color="#bbb" Offset="1"/>
</LinearGradientBrush>
</Setter>
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
What is the correct way to put a gradient color as the background for this style?
You are missing the <Setter.Value>
<Style ...>
<Setter Property="...">
<Setter.Value>
<LinearGradientBrush />
</Setter.Value>
</Setter>
</Style>

Resources