Making Timeline Control for DataGrid in WPF

Making Timeline Control for DataGrid In WPF

Introduction

In this article we will see how we can make a Timeline control in WPF.

Creating A WPF Project

Fire up Visual Studio 2010, create a WPF Application, and name it as TimelineSample.

TimeLine1.gif

TimeLine2.gif

Here is the thing, we should build a user control that would display time or times for a partcular hour. Let's say we have 6:30am, 6:35am and 6:55am as times for a particular hour 6am. So we should diplay as the following pictorial notations.

TimeLine3.gif

To do the above control, we need to use rectangles for the representation of Hour and Minute(s). The following is the xaml for doing so.
We have created the following two Brushes to be used respectively.

TimeLine4.gif


Now that we have the brushes we can draw the rectangles. The horizontal rectangle is for Hour and the vertical rectangle(s) for minute(s).

TimeLine5.gif

As you see from the above xaml display, we have Minute rectangles Visibility made as Hidden. Here is the trick for visibility; if we use visibility as collapsed the space taken by the rectangle is gone and the next rectangle would take it's place. In order to do that we need a Dependency Property which would contain the minute(s) as user has to give.

TimeLine6.gif

As you see in the above code display, the MinutesProperty is created as a Dependency Property. It is a type of TimelineControl and it would have the value as string.

Let's have the Loaded event of the User Control, where we will make the minute rectangles visible based on the minute list provided.

TimeLine7.gif

The User Control is ready. Now let's add a datagrid or listbox to display the user control.

The issue that we are going to face is the Time Scale, that means when we add hour columns based on some criteria, if it changes the Time Scale should be fixed or flexible. It should not repeat the Hours columns that already added to the data grid.

To solve that issue let's create a custom datagrid control and add two Dependency Properties, such as Start Time and End Time.

Add a class named TimelineDatagrid and add it to the project.

TimeLine8.gif

Use the namespaces displayed below:

TimeLine9.gif

Now inherit the DataGrid class and then create two Dependency Properties as displayed below.

TimeLine10.gif

Now, let's add this custom datagrid to the MainWindow by referencing the Namespace.

TimeLine11.gif

And add the DataGrid also customize it's properties as required.

TimeLine12.gif

Let's add a class and name it as TimeScale, which would have the properties required to bind to the DataGrid.

TimeLine13.gif

TimeLine14.gif

As you see in the above code display, we have the TimeScale class which has the properties as Day and the Hours in 24Hour format.

As soon as you proceed through this article, you would understand why we have taken the 24Hour format instead the normal time (am/pm) format.

TimeLine15.gif

In the above code display, you could see we are initializing the StartTime and EndTime of the DataGrid and then we have a List of TimeScale for sample data purpose.

Now we need to subscribe the Loaded event of the DataGrid to load the customized columns.

TimeLine16.gif

As you see in the above code display, we have subscribed to the Loaded event of the DataGrid and in the handler, we are passing the StartTime and EndTime values to a method called LoadColumns.

We have to add DatagridTemplateColumn as the TimelineControl and the First column for Date as DatagridTextColumn.

Inside the method add the following lines of code to add the DataGridTextColumn.

TimeLine17.gif

Add the below condition for StartTime for the timeScale of 12pm to 11pm.

TimeLine18.gif

Add the below condition for EndTime is Greater than StartTime.

TimeLine19.gif

That's it. Run the application to see the Datagrid Control as TimeLine control.

TimeLine20.gif

Hope this article helps.