Office 2010 like list view items style?

This is an Office 2010 list view, with their 开发者_如何学Pythonitems 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 ListViewItems.

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 TargetNames in the items' style, but an error said I cannot.

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...

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.

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