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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: