Silverlight and WPF Timeline Scroll View

Here is another control which I had for a long time but only recently have decided to arrange the source code and post it here.
That’s how it looks:

Although it looks very complex, actually it is quite simple: it is just the styled ScrollBar control on the left and the ScrollViewer on the right.

The grey control with years on the left is the UserControl called TimelineScrollBar, mark-up of which looks so:

<Grid>
	<ItemsControl x:Name="rowItems">
		<ItemsControl.ItemTemplate>
			<DataTemplate>
				<Grid Height="{Binding Height}">
					<TextBlock Text="{Binding Text}"/>
				</Grid>
			</DataTemplate>
		</ItemsControl.ItemTemplate>
	</ItemsControl>

	

	<ScrollBar x:Name="VerticalScrollBar" Style="{StaticResource TimeLineScrollBarStyle}" />
</Grid>

The rowItems items control and theĀ VerticalScrollBar scroll bar are related to the dependency properties TimeItemsSource and BoundScrollviewer which should be set outside and are handled in the code-behind:

<Views:TimelineScrollBar x:Name="timelineScroller" 
 TimeItemsSource="{Binding TimelineItems}" 
 BoundScrollViewer="{Binding ElementName=listScroller}" 
 Width="120" />

The TimelineItems is the special collection of items { Text, Height}. These properties must be present and they are quite generic, so you can use any labels instead of years.

The generation of these items is the most difficult part, after that everything is quite easy.

Create the view model:

public class MainViewModel
{
	public List<TestItemViewModel> Items { get; private set; }

	public List<TimelineItemViewModel> TimelineItems { get; private set; }
}

Set is as DataContext to the view:

<Grid>
	<Views:TimelineScrollBar x:Name="timelineScroller" 
 TimeItemsSource="{Binding TimelineItems}" 
 BoundScrollViewer="{Binding ElementName=listScroller}" 
 Width="120" />

	<ScrollViewer x:Name="listScroller">
		<ItemsControl x:Name="list" ItemsSource="{Binding Items}" ItemTemplate="{StaticResource itemTemplate}" ItemsPanel="{StaticResource itemsControlTemplate}" />
	</ScrollViewer>
</Grid>

In this example I used the ItemsControl class for simplicity. If you want to use it with the ListBox class, you should change its ControlTemplate and retrieve the name of the inner ScrollViewer control so it can be bound to the timeline scroll bar.

The source code of my example you can download here: TimeScrollViewerSample.zip

Advertisements