Question

Simple question. We want a divider to appear between each item in a horizontally styled listbox. Think the arrows between entries in a crumbtrail. However, we don’t want that divider to be part of the selection, so it really should go between each ListBoxItem. Is it possible to do that?

The only two ways I can think to do this is to insert ‘separator’ items into the data and template them differently, but that requires mucking with the items collection, which you may not be able to do in a data bound situation.

The only other way would be to style the actual ListBoxItem to have a separator outside of the highlighting border, then template the last one in the list separately.

Can anyone think of any other way to do this?

Answer 1

Interesting question!
As you said, one way would be to mock the ItemsSource collection.
Such as:

<ListBox.ItemsSource>
   <MultiBinding Converter="{StaticResource mockConverter}">
     <Binding Path="YourCustomList" />
   </MultiBinding>
</ListBox.ItemsSource>

Note that I used multibinding with only one binding. I believe that is the correct way in order for the converter to be “re-run”. This way, when you modify items in “YourCustomList”, it will retrigger the converter.

Unlike this, which will trigger converter only once(when ItemsSource is first binded against)

<ListBox ItemsSource="{Binding YourCUstomList, Converter={StaticResource mockCOnverter}}" />

^ wont work if you add new items.(Converter is only re-run when YourCustomList property changes)

MockConverter will be easy, just make sure you generate list with seperators. You need new class for a seperator. This way you can easily use DataTemplates(DataType). Next you probably have to set up a new trigger in ItemContainerStyle in order to set IsEnabled=false when object=Seperator.

It will be relatively painless and I see no complications. It’s a little ugly because seperators should not be a ListBoxItems.

Perhaps this could also work.
You can override ListBox ItemsPanelTemplate with your own. In your own template, you can do whatever you want. Perhaps add seperators. This way, you wont touch ItemsSource.

Check out StackPanel.cs for code.
I can’t provide with you a code right now, but the idea is this; you inherit from StackPanel, and overwrite Measure() and Arrange(). With those functions, you can calculate how big your stackPanel should be, and provide the location(X,y) where the seperators should be drawn at.
Note that the seperators have to be Children of StackPanel and they need to have IsHitTestVisible=False(so they wont generate events).

Later solution takes time, but if you are learning WPF, then why not?