ListView losing GridView display when applying ItemContainerStyle

Question

I have a WPF application in which I styled several components to look more like the default Windows 7 style. Now I wanted to do the same for a ListView, since the default style (even on Windows 7) doesn't look very similar.

The ListView has its View set to a GridView with some GridViewColumns. The XAML for the ListView without any style applied is as such:

              <ListView ItemsSource="{Binding Series.ServiceSeries.Weeks}">
                <ListView.View> 
                    <GridView>
                        <GridView.Columns>
                            <GridViewColumn Header="" DisplayMemberBinding="{Binding WeekNumber}" />
                            <GridViewColumn Header="Start date" DisplayMemberBinding="{Binding Path=., Converter={StaticResource WeekConverter}, ConverterParameter=start}" />
                            <GridViewColumn Header="Track" DisplayMemberBinding="{Binding Path=., Converter={StaticResource WeekConverter}, ConverterParameter=track}" />
                            <GridViewColumn Header="Race length" DisplayMemberBinding="{Binding Path=., Converter={StaticResource WeekConverter}, ConverterParameter=length}" />
                        </GridView.Columns>
                    </GridView>
                </ListView.View>
            </ListView>

It looks like this on Windows 7, as you can see the colors are slightly wrong: 1 http://www.nickthissen.nl/Images/Persistent/tmp3DCB.png

So I decided to apply a custom style to the ItemContainerStyle of the ListView. The Style is an almost exact copy of a style I'm using for a ListBox, except replacing ListBoxItem by ListViewItem:

                    <Style TargetType="{x:Type ListViewItem}" x:Key="ListViewItemStyle">
                    <Setter Property="OverridesDefaultStyle" Value="True" />
                    <Setter Property="SnapsToDevicePixels" Value="True" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListViewItem}">

                                <Border x:Name="Border" CornerRadius="3" BorderThickness="1" SnapsToDevicePixels="True">
                                    <Border x:Name="InnerBorder" CornerRadius="2" BorderBrush="Transparent" Background="Transparent"
                            BorderThickness="1" Padding="3,1" SnapsToDevicePixels="True">

                                        <ContentPresenter />

                                    </Border>
                                </Border>

                                <ControlTemplate.Triggers>

                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="Border" Property="BorderBrush"
                                Value="{StaticResource ListboxItemHoverBorder}" />
                                        <Setter TargetName="InnerBorder" Property="BorderBrush"
                                Value="{StaticResource ListboxItemHoverInnerBorder}" />
                                        <Setter TargetName="InnerBorder" Property="Background"
                                Value="{StaticResource ListboxItemHoverBackground}" />
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="Border" Property="BorderBrush"
                                Value="{StaticResource ListboxItemSelectedBorder}" />
                                        <Setter TargetName="InnerBorder" Property="BorderBrush"
                                Value="{StaticResource ListboxItemSelectedInnerBorder}" />
                                        <Setter TargetName="InnerBorder" Property="Background"
                                Value="{StaticResource ListboxItemSelectedBackground}" />
                                    </Trigger>

                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected" Value="true" />
                                            <Condition Property="Selector.IsSelectionActive" Value="false" />
                                        </MultiTrigger.Conditions>
                                        <Setter TargetName="Border" Property="BorderBrush"
                                Value="{StaticResource ListboxItemInactiveBorder}" />
                                        <Setter TargetName="InnerBorder" Property="BorderBrush"
                                Value="{StaticResource ListboxItemInactiveInnerBorder}" />
                                        <Setter TargetName="InnerBorder" Property="Background"
                                Value="{StaticResource ListboxItemInactiveBackground}" />
                                    </MultiTrigger>

                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>

After applying this style to the ItemContainerStyle property of the ListView, the ListView looks like this: 2 http://www.nickthissen.nl/Images/Persistent/tmpCCB2.png

As you can see, the colors are now much better, but it has completely lost its GridView display style, instead it's ignoring the columns completely and just inserting the ToString representation of the objects (which I did not override so it's returning the full type name).

I don't understand why this happens and nothing I do gets rid of it, except removing the ItemContainerStyle. There must be something wrong with my style but I cannot find the problem...

Can anyone see what I did wrong and how I can get my GridView style back? Thanks!

Answer 1

Try changing Content Presenter in you style to GridViewRowPresenter

<Border x:Name="Border" CornerRadius="3" BorderThickness="1" SnapsToDevicePixels="True">
    <Border x:Name="InnerBorder" CornerRadius="2" BorderBrush="Transparent" Background="Transparent"
            BorderThickness="1" Padding="3,1" SnapsToDevicePixels="True">
        <GridViewRowPresenter />
    </Border>
</Border>