I'm new to WPF and have run into a bit of a problem. I am trying to remove the blue gradient effect on a combobox (e.g. when the user mouses over it) in order to create a more flat UI aesthetic, but I haven't been able to figure out how. Most of the solutions I've seen while googling involve doing somthing like:
<Style x:Key="myComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<!-- and then the rest of the style re-implements the combobox from scratch... -->
That seems a bit much just to remove one minor effect. I've also tried doing things like:
<Style x:Key="myComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="Foreground" Value="LightGray"/>
<Setter Property="BorderBrush" Value="DarkGray"/>
<Setter Property="Focusable" Value="False" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightGray"/>
</Trigger>
</Style.Triggers>
But that doesn't seem to have any effect either. Does anyone know what setting I might change to remove the hover effect?
I'm using the Extended WPF Toolkit's IntegerUpDown control.
I was able to stylize the arrow buttons in a previous question.
Before
After
I've run into some additional style problems:
I'm using PresentationFramework.Aero and Aero2.
<!-- RepeatButton Style -->
<Style x:Key="{x:Static theme:ResourceKeys.SpinnerButtonStyleKey}" TargetType="RepeatButton">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="DarkBlue"/>
<Setter Property="BorderBrush" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
Link to the full XAML: http://pastebin.com/ETYgHEpz
The IsEnabled False Trigger will not override the Disabled Background or Border Color. It always stays White, I need it Transparent. However I can override the Opacity and BorderThickness. (Windows 10):
Cannot change the IsMouseOver Background Color, always Light Blue. (Windows 10):
Windows 7 always displays a White Border, even if BorderThickeness is 0 and Color is Transparent or {x:Null}:
I think it is being overriden by a Control Template, but IntergerUpDown doesn't have a RepeatButton Style within the Control Template and I've had trouble trying to add one. I had to create the Style outside.
some properties won't work when you set via Style setters. This is because of Dependency Property Value Precedence. Try changing the values in ControlTemplate triggers.
I'm developing a VS extension and I want to achieve that my UI will use colors (font, background etc.) depending on the selected VS-color-scheme. What is the best way to do this. Can I bind against some static ressources in my WPF?
Yes, binding to static VS resources is the best approach. It is supported in VS 2012+ and looks like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vs_shell="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.11.0">
<Style TargetType="Label">
<Setter Property="Foreground" Value="{DynamicResource {x:Static vs_shell:EnvironmentColors.ToolWindowTextBrushKey}}"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="{DynamicResource {x:Static vs_shell:EnvironmentColors.ToolWindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static vs_shell:EnvironmentColors.ToolWindowBackgroundBrushKey}}"/>
</Style>
</ResourceDictionary>
See EnvironmentColors Class for all avilable colors.
I am fairly new to WPF and I am currently working with triggers. I have a question regarding a simple trigger. By simple trigger, I mean one that watches for a change in a dependency property and uses a setter to change the style.
Example:
<Style.Triggers>
<Trigger Property="Control.IsFocused" Value ="True">
<Setter Property=" Control.Foreground" Value =" DarkRed" />
</Trigger>
</Style.Triggers>
All examples I have seen have used the following trigger properties:
<Trigger Property="Control.IsFocused" Value ="True">
<Trigger Property="Control.IsMouseOver" Value ="True">
<Trigger Property="Button.IsPressed" Value ="True">
Question:
Are these the only trigger properties available? If not, what others exist?
I have searched online but to no avail. Maybe someone could shed some light on this.
These are not the only properties that you can use in your Triggers, however, they are common examples because they are easily understandable and easy to demonstrate.
In truth, you can have your Trigger watch any DependencyProperty, but because it is "triggered" when the value changes (and matches the Value you tell it to watch for), it only makes sense to use properties that will change at runtime, often from user action (such as focus, mouse over, pressed, etc). Only certain DependencyProperties actual change value under these circumstances, so not all of them make sense to use in Triggers.
Microsoft has added several DependencyProperties to the standard controls so that you can easily create triggers based on changes. However you can also create your own controls with your own DependencyProperties and have triggers that respond when your custom DependencyProperties change.
Keep in mind, PropertyTriggers are only one flavor of Trigger in WPF. There are also EventTriggers and DataTriggers and MultiTriggers. These other triggers fire based on events or changes in data, or in the case of MultiTriggers multiple property (or data) values.
Is there something specific you're trying to do with Triggers? This other answer provides a good explanation of what each type of trigger does.
There are multiple types of triggers in WPF, but the two most commonly used are regular Triggers and DataTriggers
Both types of triggers will watch a value, and when it changes to match the specified Value then they apply your Style Setters.
Regular triggers can be used for any Dependency Property of the object. This includes properties like Text, Visibility, Background, etc in addition to the more commonly triggered properties that you specified: IsFocused, IsMouseOver, and IsPressed.
Note that per the MSDN page about Trigger.Property, you don't need to specify the class name prefix if the Style or Template containing the trigger has it's TargetType property set
An easy way to remember it is if you can bind the property, you can set a Trigger on it.
DataTriggers are triggers that watch a bound value instead of a Dependency Property. They allow you to watch a bound expression, and will react when that binding evaluates equal to your Value.
For example, you could set a DataTrigger on "{Binding Value}" or "{Binding ElementName=MyTextBox, Path=IsChecked}". You can even use Converters with DataTriggers, such as
<DataTrigger
Binding="{Binding SomeInt, Converter={StaticResource IsGreaterThanZero}}"
Value="True">
Use this code for better experience with trigger in wpf.
<Window x:Class="DataBinding.Trigger2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Trigger2" Height="500" Width="500">
<Window.Resources>
<Style TargetType="Button">
<Style.Setters>
<Setter Property="FontFamily" Value="Tahoma"></Setter>
<Setter Property="FontSize" Value="15"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Height" Value="25"></Setter>
<Setter Property="Width" Value="100"></Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="Purple"></Setter>
<Setter Property="Foreground" Value="DarkCyan"></Setter>
<Setter Property="FontFamily" Value="Franklin Gothic"></Setter>
<Setter Property="FontSize" Value="10"></Setter>
<Setter Property="FontWeight" Value="Normal"></Setter>
<Setter Property="Height" Value="50"></Setter>
<Setter Property="Width" Value="200"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="FontFamily" Value="Calibri"></Setter>
<Setter Property="FontSize" Value="25"></Setter>
<Setter Property="FontWeight" Value="Heavy"></Setter>
<Setter Property="Height" Value="100"></Setter>
<Setter Property="Width" Value="400"></Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="Green"></Setter>
<Setter Property="Foreground" Value="Violet"></Setter>
<Setter Property="FontFamily" Value="Times New Roman"></Setter>
<Setter Property="FontSize" Value="20"></Setter>
<Setter Property="FontWeight" Value="Thin"></Setter>
<Setter Property="Height" Value="250"></Setter>
<Setter Property="Width" Value="250"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Button>It's a Magic.</Button>
Ok i'm trying to style the datepicker from microsoft from their wpftoolkit.dll. I have it in a grid that is disabled, unfortunately it's background color stays white(despite it being disabled) unlike the other controls that gray out.
Ok I did do this:
<Style TargetType="{x:Type tk:DatePicker}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="LightGray"/>
</Trigger>
</Style.Triggers>
</Style>
But the text inside it that displays "Show Calendar" still has a white background. How do I set a style to make it look like the other controls i.e. gray out all of the background?
The background of the "Show Calendar" text (the part of the control that shows the currently selected date) is a "DatePickerTextBox" that's sitting inside the date picker. To set its background, use:
<Style TargetType="{x:Type tk:DatePickerTextBox}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="LightGray"/>
</Trigger>
</Style.Triggers>
</Style>