How to insert a GridSplitter row between each item in a bound dynamic collection

Question

I have a one column grid, with rows of varying heights in a WPF application. The items in the grid are dynamically generated, and will be added and removed at run-time.

For each row that is added, I would like a GridSplitter row to be inserted between each element.

I currently bind the model data via an ItemControl, and use AttachedProperties to obtain the element row count (obviously the eventual solution will have a higher number of rows to include the GridSplitters):

<ItemsControl ItemsSource="{Binding MyModel}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid local:GridHelpers.RowCount="{Binding MyModel.RowCount}" local:GridHelpers.ColumnCount="1"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

The MyModel variable is an ObservableCollection which contains ViewModel objects. The RowCount is a member variable which returns the number of elements in the collection.

How can I insert a GridSplitter between each of the rows?

I would like each element and GridSplitter to be generated from a template. However, if the GridSplitter is contained within a template, it doesn't work due to the presence of a ContentPresenter as its parent rather than a Grid. I'm running out of ideas, apart from creating my own UI element which has its own splitter component written from scratch. There must be an other way surely!

Many thanks for your help.

Answer 1

Well, after a considerable amount of reading, I think I have found the best solution, for those who may wish to do the same thing.

I implemented something similar to how the ColumnResizerAdorner works in the core WPF library. It may also be worth looking at the ResizingAdorner example in MSDN's WPF sample.

I have a class for the adorning, which adds a Thumb to a VisualCollection. A class for handling thumb dragging events. This class is aware of the Grid row definitions, and resizes them accordingly.