如何在我的ListBox中的每个ListBoxItem之间放置一个分隔符？

Question

这里是我的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> 

三世把一个矩形，并给它一个颜色里面的DataTemplate中的，并列表框具有的每一个项目本身之间设置一些以某种方式？

Answer 1

您可以移动隔板的呈现到ListBoxItem控制模板，在此特意简化的例子：

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

这使分离出您的项目模板。折衷是，您可能需要从默认的ListViewItem控制模板中复制更多以满足您的需求。当然，Separator只是十几种可视化渲染分隔符的方法之一。

Answer 2

这是一个更好的例子，因为你没有在顶部

<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

此基础上的答案@EvaLacy给了一点更加完整的分离器。

因为该答案取代了ListBoxItem的模板，所以它会禁用选择列表项时发生的内置突出显示（因为突出显示是通过原始模板中的触发器完成的）。为了得到这个功能回来了，把默认的触发到新的模板，并调整模板内容有点：

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

我用旧的，但有用的Show Me the Template应用程序检索这些触发器。

Answer 4

我的解决办法：

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