Как я могу поместить разделитель между каждым ListBoxItem в моем ListBox?

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>

Я извлек эти триггеры, используя старый, но полезный Показать мне шаблон применение.