如何在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內部給它一種顏色，那么ListBox是否有某種方式可以在每個項目之間進行原生設置？

Answer 1

這是一個更好的例子，因為那時你頂部沒有分隔符

<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

我的解決方案

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

您可以將分隔符的表示移動到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 4

這建立在@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應用程序檢索了這些觸發器。