So Dwayne tells me that my Timeline Panel is in desperate need of a graphics artist. Ouch. While it didn't actually hurt my feelings, it was good motivation to get Part 2 online here which shows that the screenshot I left you all with of the basic timeline was really just showing the functionality of organizing textblock elements based on their event date.
In order to do the layout I override the ArrangeOverride method and introduce my own code to adjust the horizontal positioning. I utilize a ConvertDateToPosition function in which I calculate the _eventDate's position relative to the start and end dates provided to the panel. This could be inferred from the child dates but I decided to allow this to be set independently.
protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize)
{
foreach (UIElement child in base.InternalChildren)
{
Size sizeChild = new Size(child.DesiredSize.Width, child.DesiredSize.Height);
DateTime _eventDate = (DateTime)child.GetValue(EventDateProperty);
double NewSize = ConvertDateToPosition(_eventDate, _startDate, _endDate);
NewSize = NewSize*finalSize.Width;
child.Arrange(new Rect(ptChild, sizeChild));
}
return finalSize;
Now the cool thing about the way that XAML and WPF handle child elements is that they can be of any type. Initially I used boring text boxes, but they could be Ellipses....
Or buttons...
Really any element could be used. The next step to follow my original Kayakalon example was to have the width of the elements determined as well by the end date provided. This would allow a more visual indication of the time spans.
To do this, I used the same ConvertDateToPosition function mentioned above to to calculate a new width for the child element which is inserted in the Child.Arrange call that executes for each child element during the ArrangeOveride method.
Before I forget, I wanted to mention that I also added some code in the arrange method to vertically stack the elements if their dates overlapped. This was done by tracking the potion and width of the last child element to see if the next one overlapped and if so increase it's vertical position. I also added the tick marks along the top by overriding the OnRender event.
Now I need to go make my hip shiny, trendy colored version of this for Dwayne.