This is an Office 2010 list view, with their items styled... both hovered and pressed/selected.
How can I use the items style in WPF list view items?
I use the Fluent Ribbon Control Suite for my UI, and there are the right colors for this.
I just don't have any clue how to apply them to ListViewItem
s.
Please, how do I make the style?
Edit: I know how to style elements... It's just that I don't know how to apply this style, as it is a little more complex. For example, there are 2 borders.
I tried putting styles in each border in the template, but I cannot find (through the individual styles) whether the item is selected.
I also tried putting TargetName
s in the items' style, but an error said I cannot.
So I set the Template
property in a Setter
in the Style
, and I tried binding to non-ListViewItem
properties inside it, and it worked!
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border Background="{DynamicResource TransparentBrush}" BorderBrush="{DynamicResource TransparentBrush}" BorderThickness="1" CornerRadius="2" Height="Auto" HorizontalAlignment="Stretch" Name="border" VerticalAlignment="Stretch">
<Border Background="{DynamicResource TransparentBrush}" BorderBrush="{DynamicResource TransparentBrush}" BorderThickness="1" CornerRadius="2" Height="Auto" Name="border1">
<TextBlock Text="{Binding Path=FileName}" TextAlignment="Center" TextTrimming="CharacterEllipsis" Width="Auto" />
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Border.BorderBrush" TargetName="border" Value="{DynamicResource ButtonPressedOuterBorderBrush}" />
<Setter Property="Border.Background" TargetName="border" Value="{DynamicResource ButtonPressedOuterBackgroundBrush}" />
<Setter Property="Border.Background" TargetName="border1" Value="{DynamicResource ButtonPressedInnerBackgroundBrush}" />
<Setter Property="Border.BorderBrush" TargetName="border1" Value="{DynamicResource ButtonPressedInnerBorderBrush}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="UIElement.IsMouseOver" Value="True" />
<Condition Property="IsSelected" Value="False" />
<Condition Property="UIElement.IsEnabled" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Border.BorderBrush" TargetName="border1" Value="{DynamicResource ButtonHoverInnerBorderBrush}" />
<Setter Property="Border.Background" TargetName="border1" Value="{DynamicResource ButtonHoverInnerBackgroundBrush}" />
<Setter Property="Border.Background" TargetName="border" Value="{DynamicResource ButtonHoverOuterBackgroundBrush}" />
<Setter Property="Border.BorderBrush" TargetName="border" Value="{DynamicResource ButtonHoverOuterBorderBrush}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="UIElement.IsKeyboardFocusWithin" Value="True" />
<Condition Property="IsSelected" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Border.BorderBrush" TargetName="border1" Value="{DynamicResource ButtonHoverInnerBorderBrush}" />
<Setter Property="Border.Background" TargetName="border1" Value="{DynamicResource ButtonHoverInnerBackgroundBrush}" />
<Setter Property="Border.Background" TargetName="border" Value="{DynamicResource ButtonHoverOuterBackgroundBrush}" />
<Setter Property="Border.BorderBrush" TargetName="border" Value="{DynamicResource ButtonHoverOuterBorderBrush}" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Here, the property FileName
is (obviously) not part of ListViewItem, it's part of my class that I put into the ListView
. It's on line 6.
For those who want the theme, it's there, in the ControlTemplate.Triggers
!
You need Fluent for the resources (brushes) I used. I took them from the style of a Fluent.Button
.
Just replace the TextBlock with your data template and you'll be alright! :)