tags:

views:

443

answers:

0

I am trying to display a correlation of multiple sets of events in real-time, using WPF. My current approach is to use the following classes:

class RTTimeline
{
    public string Name { get; private set; }
    public ObservableCollection<RTEvent> Events { get; private set; }
    ... more things here ...
}

class RTEvent
{
    public double SecondsSinceStart { get; set; }
    ... more things here ...
}

and:

<DataTemplate DataType="{x:Type local:RTEvent}">
    <Grid Canvas.Left="{Binding SecondsSinceStart}">
        <Rectangle Fill="Silver" Width="3" Height="10" />
    </Grid>
</DataTemplate>

<DataTemplate DataType="{x:Type local:RTTimeline}">
    <Grid HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <TextBlock Grid.Column="0" Text="{Binding Name}" />
        <ListBox Grid.Column="1"
                 ItemContainerStyle="{StaticResource CharacterContainerStyle}" 
                 ItemsSource="{Binding Events}"
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Width="1000"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>
    </Grid>
</DataTemplate>

<ListBox x:Name="Timelines" />

However, this solution doesn't work well when it comes to scrolling, as the events will extend beyond the width of the canvas, and there is no ability to scroll horizontally or zoom in/out in the timeline. Also, I think the performance of it will degrade when lots of events are in the timeline. The window-resizing performance is already terrible with 20 or so timelines.

What would be the best approach for this? Ideally I'd have a frozen label list on the left side, and a timeline on the right side, and the ability to scroll up/down the list, and left/right/in/out on the timeline. I think I need to use a virtualized panel, and somehow synchronize the scrollbars, but I'm not sure how to do this. Any suggestions?