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:

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


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

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:

	<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}" />

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:


WPF Scheduler

Several years ago I found a Silverlight sample application on one of the sites of Microsoft, that application was called something like Patient Journey Demonstrator and didn’t serve any real purpose but to show what can be created by using Silverlight.
I remember that I decompiled the source code and tried to build something similar, but eventually I didn’t used those controls in any of my applications. Anyway, here is one of the interesting controls:

This controls looks good by the way: you can expand and collapse items representing hours, you can drag and drop appointments from one time to another, also there are some unavailable gray cells which it is not allowed to drag items to. The only one inconvenience is that all items should take the same amount of time and can’t cross the border of an hour.

This code is 2 years old and isn’t implemented well, but at least it works. Maybe some day I’ll rewrite it and make it more useful, as soon as I have a time.
Source code:

Silverlight and WPF ComboBox with TreeView inside

The TreeView is useful control, but it has one shortcoming: it occupies too much space in the application. That’s why I’ve decided to create the custom control which looks like a ComboBox but displays the TreeView instead of the list.

Here is the final result:

Although this control looks quite simple, the actual implementation isn’t clear and takes long time.
Here is the sequence of steps:

1) Custom TreeView and TreeViewItem. They provide the following functionality:

  • Allow to expand andĀ  select an item from a view model (It isn’t possible to select an item of the TreeView using other ways)
  • The event which is fired when a user clicks a TreeViewItem (so it will be possible to close the ComboBox)

2) Interface for an item of the ItemsSource collection

public interface ITreeViewItemModel
	string SelectedValuePath { get; }
	string DisplayValuePath { get; }

	bool IsExpanded { get; set; }
	bool IsSelected { get; set; }

	IEnumerable<ITreeViewItemModel> GetHierarchy();
	IEnumerable<ITreeViewItemModel> GetChildren();

Members of this interface:

  • IsExpanded – allows to expand the TreeViewItem from the bound view model. Must be implemented as the INotifyPropertyChanged property.
  • IsSelected – allows to select the TreeViewItem from the bound view model. Must be implemented as the INotifyPropertyChanged property.
  • SelectedValuePath – the unique string (unique item id) that will be used to select and expand the treeview control
  • DisplayValuePath – the content that will be displayed at the header when the combobox is closed
  • GetHierarchy – returns the item and its parents
  • GetChildren – returns child items of the current item

3. Create the Combobox

It is the most difficult part of the implementation. I was forced to create many methods to provide the connection between Combobox and TreeView. But although there is many private methods, there is only two public properties:

  • SelectedItem – now it is possible to get or set this item and it will be selected in the treeview.
  • SelectedHierarchy – it wasn’t necessary to create this property, but it wasn’t difficult so I’ve decided to implement it. Use list of strings instead of the actual item.

4. Add it to a view and bind with a view model:

    <Windows:HierarchicalDataTemplate x:Key="treeViewDataTemplate" 
                   ItemsSource="{Binding Children}">
        <TextBlock Text="{Binding Title}" />
<Grid x:Name="LayoutRoot" Background="White">
        <local:ComboBoxTreeView ItemsSource="{Binding Items}" 
             SelectedItem="{Binding SelectedItem}" 
             ItemTemplate="{StaticResource treeViewDataTemplate}"
             HorizontalAlignment="Center" VerticalAlignment="Top" />

The ItemTemplate property is obligatory property and must be of the HierarchicalDataTemplate type.

Silverlight version:
WPF version:
The updated source code which supports the ‘SelectionChanged’ event of the combobox:

Silverlight Status Indicator Control

In this article I’m going to create the control similar to the status indicator control which is used for displaying KPIs in the Business Intelligence Studio.

Here is the screenshot of the ComboBox in BI Studio:

The concept of KPI is rather complex, but all that you need to know is that it is displayed differently depending on the state of the value:

  • Good state (green)
  • Moderate state (yellow)
  • Bad state (red)

So let’s open Visual Studio, create new Silverlight Application, make right mouse button click on the project, select Add New Item and then Silverlight Templated Control:

Very often it is difficult to choose between User Control and Templated Control, but in this example I use the second control because it allows to change styles and control templates.

After adding new item you have two files: the code file and the file Generic.xaml which contains default styles of all templated controls:

Now I start to implement behavior of the control.

Read more of this post