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.
Related
I have a custom style that I'm applying to a TreeViewItem, based on the MaterialDesignTreeViewItem style :
<Style x:Key="Header" TargetType="TreeViewItem" BasedOn="{StaticResource MaterialDesignTreeViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
<Setter Property="FontSize" Value="22"/>
</Style>
Now the problem is that when I click on a TreeViewItem, the background goes red and the foreground goes white, but the dropdown arrow (which is not included in the red background) switches to white as well, so we can't see it anymore (background of my app is white)
Is it possible to change the foreground without changing the arrow's color ?
I'm creating a WPF UserControl and have defined a dependency property named "Orientation" in it. It's of the type Dock that allows me to set the values Top, Bottom, Left and Right. The UserControl also contains a Border element in its XAML. Depending on the value of the Orientation property, the border shall appear on one side. Here's my triggers I have defined so far:
<Trigger Property="Orientation" Value="Bottom">
<Setter Property="BorderThickness" Value="0,1,0,0"/>
</Trigger>
<Trigger Property="Orientation" Value="Top">
<Setter Property="BorderThickness" Value="0,0,0,1"/>
</Trigger>
<Trigger Property="Orientation" Value="Left">
<Setter Property="BorderThickness" Value="0,0,1,0"/>
</Trigger>
<Trigger Property="Orientation" Value="Right">
<Setter Property="BorderThickness" Value="1,0,0,0"/>
</Trigger>
I've now tried to use these triggers in the Border's style, but they can't find the Orientation property. I've then tried to use it in the UserControl's style, with the TargetName set to my Border, but TargetName cannot be set.
How does the correct XAML code for this look like?
In your Border Style use DataTrigger instead of Trigger e.g
<DataTrigger Binding="{Binding Orientation, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" Value="Bottom">
<Setter Property="BorderThickness" Value="0,1,0,0"/>
</DataTrigger>
similarly update all the triggers
I am using Visual Studio 2012 on windows 7. I need to know why the following style for Grid's selected row does not work for background and foreground colors but works perfectly fine for other properties like BorderBrush and BorderThickness etc? Though I can see them changing while mouse over grid rows.
<Style x:Key="gridRowStyle" TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="PeachPuff"/>
<Setter Property="Foreground" Value="BlueViolet"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="PeachPuff"/>
<Setter Property="Foreground" Value="BlueViolet"/>
<Setter Property="BorderBrush" Value="BlueViolet" />
<Setter Property="BorderThickness" Value="2" />
</Trigger>
</Style.Triggers>
</Style>
Here is how I am using on grid.
<DataGrid RowStyle="{StaticResource gridRowStyle}">
I am stressing on to know "why" rather than solution to the problem as I already have solution to problem if I use grid cell style instead of rowstyle like following:
<Style x:Key="gridCellStyle" TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="PeachPuff"/>
<Setter Property="Foreground" Value="BlueViolet"/>
</Trigger>
</Style.Triggers>
</Style>
In the Default style of the DataGridCell having the following default style trigger.
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
<Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
So if you written trigger for DataGridRow, then it will only apply to the element that was placed before the DataGridCell in visual tree.
So to change the Background & Foreground while selection, you must write the trigger in DataGridCell style or remove the default trigger from the style.
Simply remove this attributs at row level in the datagrid, they have priority over the trigged properties.
nezac
Could anyone tell what would be the style of the Label or Button at various event shows in the below image.
1. MouseOver
2 MousePressed and Control Selected
You can have a look at Style triggers. To figure out what properties you need you can have a look at the UIElement.
For example it can be something like:
<Style x:Key="Triggers" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property = "Background" Value="LightGray"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property = "BorderBrush" Value="Blue"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter Property = "BorderBrush" Value="LightGray"/>
</Trigger>
</Style.Triggers>
</Style>
The above style does not recreate the look of the button from the image, it's just a sample on how it can be done.
You can have a look at the Button class to see what properties you can change.
If I understood your question properly, I think you can change the opacity on MousePressed and Mouseover events.
I'm changing the look of all ComboBoxes in my application by adding this Style to App.xaml:
<Style TargetType="ComboBox">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#303030"/>
<Setter Property="BorderBrush" Value="#000000"/>
</Style>
There are two colors that I haven't been able to set:
1) the Background color whenIsEnabled=false
2) the highlight Background color when the mouse is over the ComboBox.
How can I change these two colors?
[edit: it looks like the highlight color is not the same as the mouse over color, because when I move my mouse over the ComboBox it will briefly turn the color I defined as the mouse over color, and then turn into some other color (light blue)]
You want to check Style Triggers . Also need to override the ItemContainerStyle to get rid of the default light blue selection color
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="SomeColor" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="SomeOtherColor" />
</Trigger>
</Style.Triggers>