Incorporate a separator in listbox

Question

I need to incorporate a separator between items in my ListBoxItems for example where some items in my items source would be placed beneath the separator and some above it .

For example :

The above is done by altering the ControlTemplate of the ListBox :

 <ScrollViewer>
     <StackPanel>
         <ItemsPresenter />                                        
         <Separator  BorderBrush="Red"  />
         <ListBoxItem Content=".." ContentTemplate="..."  x:Key="helpItem"/>                                    
     </StackPanel>
 </ScrollViewer>

The problem is that the "helpItem" does not get selected since it is not part of my ItemsSource.

For now being able to select it would suffice

1)So my First question would be how could i associate this item with my ItemsSource or alternatively make it selectable ?

Further more in the future i might wan't to have more items which would be placed in the bottom half of my listbox

2)How would i physically place a Separator in a given place between my items , as if to divide my ItemsPresenter in a logical spot ?

Answer 1

Instead of multiple ListBox controls, if you could split your collection to "n" smaller groups based on how many seperator's you need, you can put them all together via a CompositeCollection into the same ListBox

So for example say I have:

public partial class MainWindow : Window {
  public List<string> CollA { get; set; }
  public List<string> CollB { get; set; }
  public MainWindow() {
    InitializeComponent();

    CollA = new List<string> {"A", "B", "C"};

    CollB = new List<string> {"D", "E", "F"};

    DataContext = this;
  }
}

and I want the seperator between CollA and CollB, then my xaml could be:

<ListBox>
  <ListBox.Resources>
    <CollectionViewSource x:Key="CollectionOne"
                          Source="{Binding CollA}" />
    <CollectionViewSource x:Key="CollectionTwo"
                          Source="{Binding CollB}" />
  </ListBox.Resources>
  <ListBox.ItemsSource>
    <CompositeCollection>
      <CollectionContainer Collection="{Binding Source={StaticResource CollectionOne}}" />
      <ListBoxItem HorizontalContentAlignment="Stretch"
                    IsEnabled="False"
                    IsHitTestVisible="False">
        <Rectangle Height="2"
                    Fill="Gray" />
      </ListBoxItem>
      <CollectionContainer Collection="{Binding Source={StaticResource CollectionTwo}}" />
    </CompositeCollection>
  </ListBox.ItemsSource>
</ListBox>

which should produce:

Now items are functional and you can bind the SelectedItem out and work with it as you desire and also by checking the SelectedItem against the source-collection, you can detect which source list currently selected item belongs to.