Office 2010 like list view items style?

Question

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.

Answer 1

Use the ItemsControl.ItemContainerStyle to define a style for your items, to change the appearance for those states you can use Triggers that trigger on IsSelected and IsMouseOver , how you achieve this particular outcome in the end is up to you...

Answer 2

Maybe you do not want to re-invent the wheel? http://www.devcomponents.com/blog/?p=581

I use those components and they are beautiful.

The real point here is, this is not a trivial task.

Check out how the real button is made: http://msdn.microsoft.com/en-us/library/ms753328.aspx and you will get what I mean.

Answer 3

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: :)