How can I override the ContentTemplate of a ListView to add a vertical separator?

Viewed 942

I'm looking to modify a WPF ListView so that the items are rendered horizontally, and there is a separator between the first item and all subsequent items. Something like this: Horizontal list with first item separated

I've got the horizontal bit, but I'm stuck with the separator. I tried using a DataTemplate, but this incorporates the separator into the actual item which means it gets highlighted when I hover (note I'm using Caliburn, but I don't think it will affect the question much):

<UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</UserControl.Resources>
<StackPanel Margin="20">
    <ListView Name="Items" BorderThickness="0">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <ContentControl cal:View.Model="{Binding}" />
                    <Border Name="Separator" Width="2" Margin="5,10" HorizontalAlignment="Center" Background="Red" Visibility="{Binding IsFirst, Converter={StaticResource BooleanToVisibilityConverter}}" />
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</StackPanel>

The Items are very basic views with this border:

<Border Background="White" BorderBrush="Black" BorderThickness="2">

How it looks with DataTemplate:

Incorrectly highlighting the selector

After spending the morning reading up on templates, I decided that a ControlTemplate was the solution which after a struggle gave me this code:

<UserControl.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    <Style TargetType="ListViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <StackPanel Margin="10" Orientation="Horizontal">
                        <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                        <Border Name="Separator" Width="2" Margin="5,10" HorizontalAlignment="Center" Background="Red" Visibility="{Binding IsFirst, Converter={StaticResource BooleanToVisibilityConverter}}" />
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<StackPanel>
    <ListView Name="Items">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
</StackPanel>

This looks almost identical, but now I'm unable to highlight items for some reason. I thought maybe I had overridden the triggers as well, and tried adding in a ControlTemplate.Triggers entry based on this answer: Change selection-color of WPF ListViewItem to bring back highlighting behaviour, but without success.

How can I get the result I'm looking for, and is the ControlTemplate the right place to be making this change?

EDIT: Ideally I'm looking for a solution using just xaml.

3 Answers
Related