如何在我的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}"/>