How can I put a separator between every ListBoxIte

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

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 3

You can move the presentation of the separator into the ListBoxItem control template as in this intentionally simplified example:

<Grid>
    <Grid.Resources>
        <PointCollection x:Key="sampleData">
            <Point>10,20</Point>
            <Point>30,40</Point>
            <Point>50,60</Point>
        </PointCollection>
    </Grid.Resources>
    <ListBox ItemsSource="{StaticResource sampleData}">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <StackPanel>
                                <Separator/>
                                <ContentPresenter/>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

This keeps the separator out of your item template. The trade off is that you may need to copy more from the default ListViewItem control template to meet your needs. Of course the Separator is one of only a dozen ways to visually render the separator.

Answer 4

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}"/>