WPF Custom Panels - Split the final element's visual between the end and start of a panel region

Question

I am currently attempting to write a control(s) that will display a collection of elements, each of which have a start time between 0 and 1. The desired visual look we're aiming for is something akin to a simple timeline.

I've already created a FrameworkElement that renders an individual element as a line (this line represents the transition between one element and the next, e.g. y(x) = x) and my intention is to use this element as part of the DataTemplate for my custom ItemsControl. By flipping the odd elements horizontally and butting them together in a panel, it should be possible to see a continuous series of transitions between the elements. I'm having difficulty in deciding how to implement this panel, in particular with filling 'dead space' that might occur at the start of the panel.

The collection of elements that I'm trying to draw represents a looping effect, but the first element may not start at time T=0. Because the effect loops back on itself this means that the gap between T=0 and the first effect's start time is actually made up of the final part of the last element in the collection. This means I have to find a way of chopping up the last visual element in the panel so that the front part sits at the end of the panel and the back part sits at the start.

Another way to think of this is in terms of a circle/pie chart - if element A starts at 15% and element B starts at 50%, element B would occupy the regions 50-100% and 0%-15% continuously.

I'm really looking for a way to get this done in WPF visually rather than by modifying the collection of items (e.g. by adding a fake 'padding' element between 0 and the first element) as this would create complications down the line when it comes to things like modifying/selecting items, etc.

Someone has suggested drawing this as a 0-1 effect (removing any offset on the first element if there is one) then recreating the offset using a pair of cameras/viewports, which is something I'm not familiar with and seems a bit overkill. Can anyone suggest a simpler or more elegant way?

Answer 1

The 3D XAML question posed below contains code that achieves the kind of effect I was looking for, with some modifications. I set it up as an orthographic camera and made the position and texture co-ordinates of the MeshGeometry3D into dependency properties:

Why does TextureCoordinates work as expected for a Viewport2DVisual3D, but not for a GeometryModel3D?