¿Cómo puedo poner un separador entre cada ListBoxItem en mi ListBox?

Question

Aquí está mi 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 poniendo un rectángulo y que le dan un color en el interior de la DataTemplate, ¿el cuadro de lista tienen alguna forma de establecer de forma nativa algo entre cada artículo?

Answer 1

Se puede mover la presentación del separador en la plantilla ListBoxItem de control como en este ejemplo simplificado intencionalmente:

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

Esto evita que el separador de su plantilla de elementos. La compensación es que puede necesitar copiar más de la plantilla de control predeterminada ListViewItem para satisfacer sus necesidades. Por supuesto, el Separator es una de solo una docena de maneras de renderizar visualmente el separador.

Answer 2

Este es un ejemplo mejor, porque entonces usted no tiene un separador en la parte superior

<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

Esto se basa en la respuesta @EvaLacy dio a ser un poco más completo.

Como esa respuesta reemplaza a la plantilla del ListBoxItem, desactiva el resaltado integrado que se produce al seleccionar un elemento de la lista (porque el resaltado se realiza mediante activadores en la plantilla original). Para conseguir esta funcionalidad espalda, poner los disparadores por defecto en la nueva plantilla y modificar el contenido de la plantilla un poco:

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

Recuperé estos factores desencadenantes utilizando el viejo pero útil Show Me the Template aplicación.

Answer 4

Mi solución:

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