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

Question

Here is 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> 

Doesn't put the Rectangle and gives it a color inside the DataTemplate, does the ListBox have any way to initially set something between each element?

Answer 1

This is the best example, because then you do not 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

You can move the presentation of the separator to the ListBoxItem control ListBoxItem , 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 is a separator from your element template. The trade-off is that you may need to copy more from the default ListViewItem control template to suit your needs. Of course, Separator is one of ten ways to visually render a separator.

Answer 3

My decision:

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

Answer 4

This is based on @EvaLacy's answer, which was a bit more complete.

Since this answer replaces the ListBoxItem template, it disables the built-in highlighting that occurs when a list item is selected (since the selection is performed using triggers in the original template). To return this functionality, put the default triggers in a new template and modify the contents of the template a little:

 <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 extracted these triggers using the old but useful show me pattern .