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 ?

Singleaction

I had this before also. I stacked multiple listboxes and set their borders such that it gave the appearance of a single listbox, but beneath the surface each lb had its own items source. The only tricky bit was coordinating the selection gestures so that the end-user 'experience' saw only one item selected. – Chlorosis

kinda wanted to avoid that :) – Singleaction

If you wanted to use a single control, there's still an answer for you: derive a class from VirtualizingStackPanel and implement your own ItemsControlGenerator for it. I did that before also and can attest it will give what you're after. On the downside, I would not place writing an ICG as an entirely pleasant experience. :) – Chlorosis

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.

Sopping

That sounds great , i'll try it out – Singleaction