Search code examples
c#wpffluentlistviewitemoffice-2010

Office 2010 like list view items style?


OneNote 2010 - Backstage Menu - New tab
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 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.


Solution

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