Time Scale Header

Note: The properties discussed in this section applies to both GanttControl and FlexyGantt.

The Time Scale Headers refer to the headers in the gantt chart that define how the horizontal span of the gantt chart should be divided into days, weeks, etc.

Default Headers

Default Time Scale Header

As seen above the default headers consist of a header row of type "Days" and another of type "Weeks". This is the default definition in the GanttControl.TimeScaleHeaders property.

To add/remove header rows, you will have to add/remove TimeScaleHeaderDefinition instances to the above collection property.

The code below clears the existing headers definition and adds 2 new rows to the above collection.

TimeScaleHeaderDefinitions headers = this.ganttControl.TimeScaleHeaders;

headers.Clear();

headers.Add(new TimeScaleHeaderDefinition() { Type = TimeScaleType.Months });

headers.Add(new TimeScaleHeaderDefinition() { Type = TimeScaleType.Weeks });

headers.Add(new TimeScaleHeaderDefinition() { Type = TimeScaleType.Days, TextFormat="ddd" });

Custom Month header on top

The built-in header types ranges from Minutes to Years. There is also support for custom time scale headers.

Zooming - Programatically

You can specify a zoom level programmatically by changing the GanttControl.BaseTimeUnitWidth property as follows:

// For zooming out 50%

this.ganttControl.BaseTimeUnitWidth = 37.5; // Default is 25.0; Max is 50.

The above value changes as the end-user zooms in and out the header during runtime.

This is called "base time unit width", because it indicates the width (in pixels) for the current "base time scale type" header which is indicated by the BaseTimeScaleType property. The BaseTimeScaleType property does not usually change during the life of the gantt control, even when there are headers being added and removed or shown/hidden. It's value is usually TimeScaleType.Days unless you have a TimeScaleType.Hours header in the time scale. So, a value of 20 for BaseTimeUnitWidth usually means - draw the base time scale type time units (usually Days) 20 pixels wide. A time unit representing a week would be drawn 140 pixels wide and so on.

There are also (settable) BaseTimeUnitWidthMinimum and BaseTimeUnitWidthMaximum which dictate the allowed range of zooming operations. This specified range will be enforced while setting the zoom value programmatically or by the end-user.

GanttChart View Width

By default, the GanttChart is presented in a horizontally scrollable view whose width is specified via the GanttChart.ViewWidth property.

// Do this in ganttControl.TemplateApplied event handler

this.ganttControl.GanttChart.ViewWidth = 3000; // Default is 2000; Allowed values are 1000 - 4000.

Horizontal Scrollbar with pager button

// To hide these pager buttons:

this.ganttControl.GanttChart.TimeScalePagerButtonsVisibility = Visibility.Hidden;

Alternatively, you could use the GanttChart.ResizeToFit property to make the view to resize to fit the available space. In this mode, the end-user can also easily pan the view thought a Ctrl + Mouse Down + Drag on the chart headers.

this.ganttControl.GanttChart.ResizeToFit = true;

ResizeToFit mode where end-users can pan the view with Ctrl + Mouse Down + drag

AnchorTime (and Start and End Times of the View)

The GanttChart also has a concept of "AnchorTime" which is the time that will be visible to the left of the chart when the chart loads. Note that this is not the time that dictates the start time of the view.

GanttChart loaded with AnchorTime set to July 16 2010

When ResizeToFit is set, the AnchorTime is shown right in the middle of the view.

To explicitly specify the start time of the view use the GanttChart.SetStartTime method.

The End-Time of the view cannot be explicitly set. It varies based on the current zoom level (BaseTimeUnitWidth setting). Take a look at the "...Common\TaskScaleStartAndEnd" sample for utility methods that will let you do this easily.

Header Height

You can specify a custom height for each of the headers in the GanttChart using the TimeScaleHeaderDefinition.HeaderHeight property.

For example, to change the height of the top-most header:

this.gantt.TimeScaleHeaders[0].HeaderHeight = 25;

Changing the chart header's height will automatically change the height of the grid's header.

Header Text Format

a) The TimeScaleHeaderDefinition type lets you specify the format string that will be internally used in the DateTime.ToString method to arrive at the text that is to be displayed in the headers above.

So, if you modify the above setting as follows (add the TextFormat setting):

headers.Add(new TimeScaleHeaderDefinition() { Type = TimeScaleType.Days, TextFormat="ddd" });

The header text will be updated accordingly:

Custom format in day headers

Note that the format string can take Escape Sequences as well. So, you can specify something like this: TextFormat = "ddd \n d"; to get an output like this:

Custom format with a Line Break Escape Sequence

b) The gantt also provides you the ability to specify multiple text formats and intelligently displays the format that best fits the available width. For example:

headers.Add(new TimeScaleHeaderDefinition() { Type = TimeScaleType.Days, TextFormat="M|dd" });

... will cause the gantt to first try to render the date in "M" format like this:

Day headers rendered in "M" format.

... and when the headers size is not big enough to accommodate the text, it would render in "dd" format like this:

Day headers rendered in "dd" format

c) Also, if the default formatting options don't suffice, you can provide custom header texts as follows:

// Customize the weekly header's text:

this.gantt.TimeScaleHeaders[1].ProvideCustomHeaderText += new ProvideCustomHeaderTextEventHandler(MainPage_ProvideCustomHeaderText);

Weeks in the format "W XX"

void MainPage_ProvideCustomHeaderText(object sender, ProvideCustomHeaderTextEventArgs args)

{

DateTime jan1st = new DateTime(args.DateTime.Year, 1, 1, DateTimeKind.Utc);

int days = (args.DateTime - jan1st).Days;

int weeks = days / 7;

args.Text = "W " + weeks.ToString();

args.TooltipText = "Week of " + args.DateTime.ToShortDateString();

}