[WPF] Horizontal 'listbox' with relative position of items

Hi,

I have a list of 'Drivers' that are racing around a race track. For each driver I have two relevant properties: Position and LapDistance.
Position is the position of the driver in this race (eg, first, second, third, etc) as an integer. LapDistance is the percentage of the current lap that this driver has completed (a float from 0 to 1). If LapDistance is 0, the driver has just passed the start/finish line, if it's 0.75 the driver is three-quarters around the track, etc.

What I want to do now is display a 'graph' of the driver positions going around the track. Instead of having them actually follow an image of the track with its many twists and turns, I just 'straighten' the track and display them on a straight line. Left side is LapDistance = 0, to right side for LapDistance = 1.

A quick mockup example:
http://www.nickthissen.nl/Images/Temp/tmpBBD5.png
Imagine the driver positions moving along this track from left to right (well, hopefully) and then wrapping around to the start once they go from LapDistance = 1 to LapDistance = 0 again after completing a lap.

The LapDistances in this example would be something like;

Code:

---

Driver Position=1, LapDistance=0.75
Driver Position=2, LapDistance=0.55
Driver Position=3, LapDistance=0.33
Driver Position=4, LapDistance=0.29
Driver Position=5, LapDistance=0.10
Driver Position=6, LapDistance=0.90

---

I am pretty sure I should not go the custom drawing way as I would in winforms. I think I can use something like a ListBox with a custom ControlTemplate for this?

Two problems I'm having are:
1. I'm not sure how to accomplish the items being layed out horizontally
2. I have no clue how to handle the 'percentage' part of the LapDistance. This bar should obviously scale with its own width, so the horizontal positions of the driver numbers are actually LapDistance * Control Width. I don't think you can do anything like that in a Binding.. ?


In my trial and error testing I got something like this:

xml Code:

<ListBox>
            <ListBox.ItemsSource>
                <x:Array Type="my:Driver">
                    <my:Driver Position="1" LapDistance="395" />
                    <my:Driver Position="2" LapDistance="391" />
                    <my:Driver Position="3" LapDistance="376" />
                    <my:Driver Position="5" LapDistance="369" />
                    <my:Driver Position="6" LapDistance="363" />
                    <my:Driver Position="7" LapDistance="361" />
                    <my:Driver Position="8" LapDistance="333" />
                    <my:Driver Position="9" LapDistance="312" />
                </x:Array>
            </ListBox.ItemsSource>
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas IsItemsHost="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Position}" Foreground="White" Background="Black" Padding="3" Canvas.Left="{Binding LapDistance}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

As you can see I am trying to replace the usual items host of the listbox with a Canvas (so I can set the positions of each item manually), and I'm binding the Canvas.Left attached property of the items to the LapDistance.
As you can also see I gave up trying to get the 'percentage' part; I chose some LapDistances that are 'absolute' numbers instead of percentages just so I could see if those would work first.

This doesn't work, it seems to just draw all items on top of each other on the very left, at least I only see the '9' item..


Is anyone able to help me with this? Thanks!