How can I put a separator between every ListBoxItem in my ListBox?

Question

Here's my XAML:

    <ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid ShowGridLines="True">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <Image Grid.Column="0" Source="{Binding ImageUrl}" Width="100"/>
                    <StackPanel Grid.Column="1">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Title:" />
                            <TextBlock Text="{Binding Title}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Release Date:" />
                            <TextBlock Text="{Binding ReleaseDate}" />
                        </StackPanel>                            
                    </StackPanel>                        
                </Grid>                                        
            </DataTemplate>
        </ListBox.ItemTemplate>            
    </ListBox>

Sans putting a Rectangle and giving it a color inside of the DataTemplate, does the ListBox have some way of natively setting something in between every item?

Answer 1

This is a better example because then you don't have a separator at the top

<ListBox.ItemContainerStyle>                
    <Style TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <StackPanel>
                        <Separator x:Name="Separator"/>
                        <ContentPresenter/>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                            <Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListBox.ItemContainerStyle>

Answer 2

This builds on the answer @EvaLacy gave to be a little more complete.

Because that answer replaces the template of the ListBoxItem, it disables the built-in highlighting that occurs when selecting a list item (because the highlighting is done via triggers in the original template). To get this functionality back, put the default triggers into the new template and tweak the template content a bit:

<ListBox.ItemContainerStyle>                
    <Style TargetType="ListBoxItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <StackPanel>
                        <Separator x:Name="Separator"/>

                        <!-- Bind to parent properties -->
                        <Border BorderThickness="{TemplateBinding Border.BorderThickness}"
                                Padding="{TemplateBinding Control.Padding}"
                                BorderBrush="{TemplateBinding Border.BorderBrush}"
                                Background="{TemplateBinding Panel.Background}"
                                Name="Bd"
                                SnapsToDevicePixels="True">
                            <ContentPresenter Content="{TemplateBinding ContentControl.Content}"
                                              ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
                                              ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
                                              HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
                                              SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                        </Border>
                    </StackPanel>
                    <ControlTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                            <Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
                        </DataTrigger>
                    </ControlTemplate.Triggers>

                    <!-- Original Triggers -->
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter TargetName="Bd" Property="Panel.Background" 
                                Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        <Setter Property="TextElement.Foreground"
                                Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                    </Trigger>

                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="Selector.IsSelected" Value="True" />
                            <Condition Property="Selector.IsSelectionActive" Value="False"/>
                        </MultiTrigger.Conditions>
                        <Setter TargetName="Bd" Property="Panel.Background"
                                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                        <Setter Property="TextElement.Foreground"
                                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    </MultiTrigger>

                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground"
                                Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                    </Trigger>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListBox.ItemContainerStyle>

I retrieved these triggers using the old but useful Show Me the Template application.

Answer 3

My solution:

 <Style x:Key="STYLE_ListBoxSubItem" TargetType="ListBoxItem">      
    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
    <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <DockPanel LastChildFill="True">
                    <Separator x:Name="Separator" DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2"/>
                    <Border x:Name="Border" SnapsToDevicePixels="true">
                        <ContentPresenter VerticalAlignment="Center" />
                    </Border>
                </DockPanel>

                <ControlTemplate.Triggers>
                    <DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
                        <Setter Property="Visibility" TargetName="Separator" Value="Collapsed"/>
                    </DataTrigger>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="Orange"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#888888"/>
                    </Trigger>
                    <Trigger Property="Control.IsMouseOver" Value="True">
                        <Setter TargetName="Border" Property="Background" Value="LightGray"></Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<!-- Usage -->
<ListBox ItemContainerStyle="{StaticResource STYLE_ListBoxSubItem}"/>