如何将分隔符添加到ListBox项目，而不受ItemTemplate的影响

Question

Below you can see the View and the ViewModel. The result will be :" ABC " that the background of each letter is red. I want to add an arrow between the items BUT I dont want the arrow to be colored by red. That mean it should be like this : "A --> B -- > C" that ONLY the letters will be colored by red, and the arrows NOT . I can use a Converter to add the arrow on the Text propertry, but it will end up color the arrow as well.

Any Idea ?

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>

Code Behind:

    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

You could easily do this:

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

Or if you really must keep it out of the data template use the ItemContainerStyle and assign a new Template to the ListBoxItem which contains an arrow next to the ContentPresenter where the item template will be (this might be a good idea as you then can prevent the arrow from appeearing selected).

Edit: I would approach the issue with the additional arrow with a PreviousData binding, if it is null there is no item before it:

<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

If you know the maximum number of items in your collection, you can set the AlternationCount of your ListBox to a number which is higher than the number of items in your collection, then use a DataTrigger to determine the visibility or text of your separator items.

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

Edit

As HB pointed out in his answer, you can also base your DataTrigger on RelativeSource.PreviousData , however that will only work if none of the items in your ItemsSource are null