如何在不受 ItemTemplate 影响的情况下向 ListBox 项添加分隔符

Question

下面您可以看到视图和视图模型。 结果将是：“ABC”，每个字母的背景都是红色的。 我想在项目之间添加一个箭头但是我不希望箭头被涂成红色。 这意味着它应该是这样的：“A --> B --> C”，只有字母才会被红色着色，而箭头不会。 我可以使用转换器在文本属性上添加箭头，但它最终也会给箭头着色。

有什么想法吗？

Xaml：

<ListBox ItemsSource="{Binding MyArray}">
  <ListBox.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel/>
    </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
  <ListBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Background="Red" Text="{Binding}" Margin="5"/>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

背后代码：

    public class MainWindowViewModel
{
    public MainWindowViewModel()
    {
        MyArray = new ObservableCollection<string>();
        MyArray.Add("A");
        MyArray.Add("B");
        MyArray.Add("C");
    }
    public ObservableCollection<string> MyArray { get; set; }
}

Answer 1

您可以轻松地做到这一点：

  <TextBlock Margin="5">
      <Run Background="Red" Text="{Binding}"/>
      <Run Text="->"/>
  </TextBlock>

或者，如果您确实必须将其保留在数据模板之外，请使用 ItemContainerStyle 并将新的 Template 分配给 ListBoxItem，其中包含旁边的箭头ContentPresenter 项目模板所在的位置（这可能是一个好主意，因为这样您可以防止箭头显示为选中状态）。

编辑：我会使用带有PreviousData绑定的附加箭头来解决这个问题，如果它为空，则它之前没有项目：

<DataTemplate>
    <!-- StackPanel because Runs can't be collapsed, you could clear their text though -->
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="->">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Style.Triggers>
                        <DataTrigger
                                Binding="{Binding RelativeSource={RelativeSource PreviousData}}"
                                Value="{x:Null}">
                            <Setter Property="Visibility" Value="Collapsed" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
        <TextBlock Text="{Binding}" Background="Red" />
    </StackPanel>
</DataTemplate>

Answer 2

如果您知道集合中的最大项目数，则可以将 ListBox 的 AlternationCount 设置为大于集合中项目数的数字，然后使用DataTrigger 确定分隔符项目的可见性或文本。

<Style x:Key="ArrowTextBlockStyle" TargetType="{x:Type TextBlock}">
    <Setter Property="Text" Value="->" />
    <Style.Triggers>
        <DataTrigger Value="0" Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, Path=(ItemsControl.AlternationIndex)}">
            <Setter Property="Text" Value="" />
        </DataTrigger>
    </Style.Triggers>
</Style>

<ListBox AlternationCount="100" ItemsSource="{Binding MyArray}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Margin="5">
                <TextBlock Style="{StaticResource ArrowTextBlockStyle}" />
                <TextBlock Text="{Binding }" Background="Red" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

编辑

正如HB在他的回答中指出的那样，您还可以将DataTrigger基于RelativeSource.PreviousData，但是，只有在 ItemsSource 中没有任何项目时，这才有效空