ARTICLE

Making Timeline Control for DataGrid in WPF

Posted by Diptimaya Patra Articles | WPF July 12, 2010
In this article we will see how we can make a Timeline control in WPF.
Reader Level:
Download Files:
 

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.
 

Article Extensions
Contents added by Pit Monster on Jun 27, 2012
Hi Diptimaya Patra!

I tried your Timeline Control Sample and its great!

I changed the count of your TimeScale.cs columns to two because i want to set a period of time with a rectangle and its cutted if it will overlapp the next column.

    public class TimeScale
    {
        public string FirstCol { get; set; }
        public string SecondCol { get; set; }
    }



It works fine if i add the rectangle in the TimelineControl.xaml.cs Class if the control is loaded (void TimelineControl_Loaded(object sender, RoutedEventArgs e))

It looks like this:

            Rectangle rt1 = new Rectangle();
            rt1.Name = "rectangle1";
            rt1.Width = 120;
            rt1.Height = 50;
            rt1.StrokeThickness = 0;
            rt1.Visibility = Visibility.Visible;
            SolidColorBrush myBrush1 = new SolidColorBrush(Colors.Red);
            rt1.Fill = myBrush1;
           StackPanel2.Children.Insert(12, rt1);


But now i want to add this rectangle by pushing the button in MainWindow.xaml.cs:

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            TimelineControl tc = new TimelineControl();
            Rectangle rt = new Rectangle();
            rt.Name = "AddedRectangle";
            rt.Width = 10;
            rt.Height = 50;
            rt.StrokeThickness = 0;
            rt.Visibility = Visibility.Visible;
            SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
            rt.Fill = myBrush;
            tc.StackPanel2.Children.Insert(2, rt);
        }

But nothing happens if i push the button...

What did i do wrong or how can i do this ?

Regards

Peter
COMMENT USING

Trending up