WPF ListView : Header styling - wpf

I want to have a ListView with columns and a particular style:
The background for ALL column headers should be transparent except when the mouse is over in one of them.
When this happends, the column's background in which the mouse is over should be yellow and all the color in the other columns should be, let's say, blue.
I've tried playing with GridViewColumnHeader template, but that seems to change only the active column background. Any help?

In order to do this, I think you're going to have to replace the entire ListView style. Microsoft has an example.
You'll have to put a Border around the GridViewHeaderRowPresenter in the ScrollViewer style shown in there and add an IsMouseOver trigger to set the background of that Border to Blue.
Then, of course, you'll need an IsMouseOver trigger on the GridViewColumnHeader template to make the background yellow.
If you need any further explanation, please ask.
--
HTH, Dusty

Finally, I found a way to do this: basically, you set a trigger that will see if the parent GridViewHeaderRowPresenter is selected. All headers will then return true to that property.
Then you check if the header has the mouse over it and only the selected header will return true.
The result will be something like this:
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type GridViewHeaderRowPresenter}},
Path=IsMouseOver}"
Value="True">
<Setter TargetName="HeaderBack" Property="Background"
Value="{StaticResource HeaderActiveColumnBackground}"/>
<Setter TargetName="PART_HeaderGripper" Property="Background"
Value="{StaticResource VerticalLineColor}"/>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="HeaderBack" Property="Background"
Value="{StaticResource HeaderSelectedColumnBackground}"/>
</Trigger>
<Trigger Property="HasContent" Value="false">
<Setter TargetName="HeaderBack" Property="Background"
Value="{StaticResource HeaderDefaultColumnNoContentBackground}"/>
<Setter TargetName="PART_HeaderGripper" Property="Background"
Value="{StaticResource HeaderDefaultColumnNoContentBackground}"/>
</Trigger>
</ControlTemplate.Triggers>

Related

Repeat Button Style Setter/Triggers Doesn't Work

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.

React on control property in a child element

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

Style of Controle At various Event

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.

WPF combobox colors

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>

DataGridCell.IsEditMode?

How Can I know if the DataGridCell is currently in edit mode (not IsSelected), I mean, for example a DataGridTextColumn cell is clicked it becomes a TextBox and not a TextBlock, that's what I call IsEditMode.
I wanna set a trigger-setter for this mode.
EDIT:
I tried to set a general style for DataGridCell.IsEditing but it doesn't seem to do anything.
Here is a snippet of my current code:
<Style TargetType="{x:Type tk:DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsEditing" Value="True">
<Setter Property="BorderBrush" Value="#FF62B6CC"/>
<Setter Property="Background" Value="#FFF4F4F4"/>
</Trigger>
</Style.Triggers>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderThickness" Value="0.5"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
</Style>
Thanks.
Here's how to do it:
<Trigger Property="IsEditing" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<TextBox Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content.Text, Mode=TwoWay, UpdateSourceTrigger=Default}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
then style the textbox as you please
If you take a look at DataGridCell.cs file, IsEditing should be good way to find out if cell is in edit mode. But you can't set this property from style, because there is local value assignment in DataGridCell class (which has higher priority from style setter).
So, the answer would be: it should work from trigger, but it will not from the style setter.
Update: Shimmy, it really works. Snoop your application, make sure DataGridCell is using your implicit style. Select DataGridCell in the tree, and check its background property. Every time you go in Edit mode it is updated. But you don't see it, by default, since TextBox doesn't inherit Background property. But that's another story. I think you can tweak CellEditingTemplate to make it working.
The proper way to turn on edit mode is to find the DataGridCell's parent DataGrid and call BeginEdit() on that. If you set it directly, you're sidestepping a lot of DataGrid goo that maintains proper state transitions.

Resources