Strip Lines in WPF Gantt

The control provides support to add strip lines in the Gantt chart region that denote an important event in a sequential timeline. By using this feature, you can add strip lines to highlight the important days in your project. You can add a collection of strip lines using the provided API.

Strip lines in Essential Gantt support the following features:

Strip lines can be repeatable in the Gantt chart region based on repeat behavior and repeat interval.

  • You can modify the content or appearance of the strip lines at run time by changing the values of the underlying collection source.
  • The visibility of strip lines can be toggled using the ShowStripLines property in the Gantt control.

The control will get the information from the application to draw the strip lines. Gantt will accept the strip line information in the form of a collection of StripLineInfo objects and process it to draw the strip lines.

Repeat behavior

The available repeat behaviors are as follows:

  • Year
  • Month
  • Week
  • Day
  • Hour
  • Minute

Style selector

It used to pass the style of the strip lines dynamically. Based on constraints.

Template selector

It used to pass the content template of the strip lines dynamically based on constraints.

Types of strip lines

There are two types of strip lines available in Essential Gantt. They are:

  • Regular
  • Absolute—Absolute type will place the strip line at any user-defined point.

Properties

Property Description Type Data Type

Background

 Gets/sets background color of strip line. CLR Brush

Content

 Gets/sets the content of the strip line. CLR Object

ContentTemplate

 Gets/sets the content template of the strip line. CLR DataTemplate

ContentTemplateSelector

 Gets/sets the TemplateSelector of the strip line. CLR DataTemplateSelector

StartDate

 Gets/sets the start date of the strip line. CLR DateTime

EndDate

 Gets/sets the end date of the strip line. CLR DateTime

RepeatBehavior

 Gets/sets the repeat behavior of the strip line. CLR Repeat (Enum)

RepeatFor

 Gets/sets the intervals between the repeating strip lines. CLR Integer

RepeatUpto

 Gets/sets DateTime value. The strip line will be repeated up to this value. CLR DateTime

Style

 Gets/sets the style for the strip line. CLR Style

StyleSelector

 Gets/sets the style selector of the strip line. CLR StyleSelector

VerticalContentAlignment

 Gets/sets the vertical alignment of the content present in the strip line. CLR VerticalAlignment

HorizontalContentAlignment

 Gets/sets the horizontal alignment of the content present in the strip line. CLR Horizontal Alignment

Type

 Gets/sets the type of the strip line. CLR StriplineType(Enum)

Position

 Gets/sets the absolute position of the strip line for Absolute strip line type. CLR Point

Height

 Gets/sets the absolute height of the strip line for Absolute strip line type. CLR Double

Width

 Get/sets the absolute width of the strip line for Absolute strip line type. CLR Double

Use Case Scenarios

  • You can mark the important dates and meetings in the scheduled time line.
  • Strip lines help you to avoid missing important events.

Properties

Property Description Type Data Type

ShowStripLines

 Get the user option to show the strip lines. Dependency Property Bool

StripLines

 Get/sets the collection of StripLineInfo from the user. Dependency Property IEnumerable

Enums

Property Description

Repeat

 This property contains the following values:Year: Repeating the strip line on a yearly basis depends on the RepeatFor value in StripLineInfo.Month: Repeating the strip line on a monthly basis depends on the RepeatFor value in StripLineInfo.Week: Repeating the strip line on a weekly basis depends on the RepeatFor value in StripLineInfo.Day: Repeating the strip line on a daily basis depends on the RepeatFor value in StripLineInfo.Hour: Repeating the strip line on an hourly basis depends on the RepeatFor value in StripLineInfo.Minute: Repeating the strip line on per-minute basis depends on the RepeatFor value in StripLineInfo.

StriplineType

 This property contains the following values:Regular: This denotes the normal strip line.Absolute: This denotes the absolute strip line. You can customize the position, size, and appearance of the strip line in this type.

Events

By handling its event, you can customize the strip lines dynamically.

Event Description Arguments Type

StripLineCreated

 Whenever a strip line is created, this event will be triggered. the handler of the event will have the newly created strip line (StripLineInfo) in the argument.By handling this event, you can customize the appearance of the strip line. StripLineCreated(object sender, StriplineCreatedEventArgs args) Event

Adding strip lines to application

Regular strip lines

The following code sample demonstrates how to bind the regular strip line collection to strip lines.

<syncfusion:GanttControl x:Name="ganttControl"
                         ShowStripLines="True"
                         ItemsSource="{Binding TaskCollection}"
                         StripLines="{Binding RegularStripLines}">
    <syncfusion:GanttControl.TaskAttributeMapping>
        <syncfusion:TaskAttributeMapping TaskIdMapping="TaskId"
                                         TaskNameMapping="TaskName"
                                         StartDateMapping="StartDate"
                                         ChildMapping="Child"
                                         FinishDateMapping="FinishDate"
                                         DurationMapping="Duration"
                                         ProgressMapping="Progress"
                                         PredecessorMapping="Predecessor"
                                         ResourceInfoMapping="Resources"/>
    </syncfusion:GanttControl.TaskAttributeMapping>
    <syncfusion:GanttControl.DataContext>
        <local:ViewModel/>
    </syncfusion:GanttControl.DataContext>
</syncfusion:GanttControl>
this.ganttControl.ItemsSource = new ViewModel().TaskCollection;
this.ganttControl.ShowStripLines = true;

// Task attribute mapping
TaskAttributeMapping taskAttributeMapping = new TaskAttributeMapping();
taskAttributeMapping.TaskIdMapping = "TaskId";
taskAttributeMapping.TaskNameMapping = "TaskName";
taskAttributeMapping.StartDateMapping = "StartDate";
taskAttributeMapping.ChildMapping = "Child";
taskAttributeMapping.FinishDateMapping = "FinishDate";
taskAttributeMapping.DurationMapping = "Duration";
taskAttributeMapping.MileStoneMapping = "IsMileStone";
taskAttributeMapping.PredecessorMapping = "Predecessor";
taskAttributeMapping.ProgressMapping = "Progress";
taskAttributeMapping.ResourceInfoMapping = "Resource";
this.ganttControl.TaskAttributeMapping = taskAttributeMapping;

List<StripLineInfo> stripCollection = new List<StripLineInfo>();

//Getting the collection of StripLineInfo
stripCollection = GetStripCollection();

//Property for strip collection.
public List<StripLineInfo> StripCollection
{
    get
    {
        return this.stripCollection;
    }
    set
    {
        this.stripCollection = value;
        RaisePropertyChanged("StripCollection");
    }
}

//Method will return the collection StripLineInfo
private List<StripLineInfo> GetStripCollection()
{
    this.stripCollection.Add(new StripLineInfo() 
    { 
        Content =  "Weekly Team Meeting", 
        StartDate = new DateTime(2012, 6, 4), 
        EndDate = new DateTime(2012, 6, 4), 
        HorizontalContentAlignment = HorizontalAlignment.Center, 
        VerticalContentAlignment = VerticalAlignment.Center, 
        Background =  Brushes.Gold, RepeatBehavior = Repeat.Week, RepeatFor = 1,
        RepeatUpto = new DateTime(2012, 12, 10),
    });

    return this.stripCollection;
}
class ViewModel
{
    public ViewModel()
    {
        _taskCollection = this.GetData();
        LoadRegularStripLines();
    }

    private ObservableCollection<TaskDetails> _taskCollection;

    /// <summary>
    /// Gets or sets the appointment item source.
    /// </summary>
    /// <value>The appointment item source.</value>
    public ObservableCollection<TaskDetails> TaskCollection
    {
        get
        {
            return _taskCollection;
        }
        set
        {
            _taskCollection = value;
        }
    }

    public ObservableCollection<StripLineInfo> RegularStripLines
    {
        get;
        set;
    }

    private void LoadRegularStripLines()
    {
        RegularStripLines = new ObservableCollection<StripLineInfo>()
        {
            new StripLineInfo()
            {
                Content = "Weekly Team Meeting",
                StartDate = new DateTime(2010, 6, 4, 0, 0, 0),
                EndDate = new DateTime(2010, 6, 4, 23, 59, 59),

                Background = Brushes.Yellow,

                RepeatBehavior = Repeat.Week,
                RepeatFor = 1,
                RepeatUpto = new DateTime(2010, 12, 31),

                HorizontalContentAlignment = HorizontalAlignment.Center,
                VerticalContentAlignment = VerticalAlignment.Center
            }
        };
    }


    /// <summary>
    /// Gets the data.
    /// </summary>
    /// <returns></returns>
    public ObservableCollection<TaskDetails> GetData()
    {
        ObservableCollection<TaskDetails> Activities = new ObservableCollection<TaskDetails>();

        Activities.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 2), FinishDate = new DateTime(2010, 6, 18), TaskName = "Ambito di mercato analisi del prodotto", TaskId = 1 });

        ObservableCollection<IGanttTask> MarketAnalysis = new ObservableCollection<IGanttTask>();
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 2), FinishDate = new DateTime(2010, 6, 6), TaskName = "riesame del mercato attuale", TaskId = 2 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 6), FinishDate = new DateTime(2010, 6, 9), TaskName = "Establish mislestone for future development", TaskId = 3 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 9), FinishDate = new DateTime(2010, 6, 10), TaskName = "Stabilire la pietra miliare per lo sviluppo futuro", TaskId = 4 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 10), FinishDate = new DateTime(2010, 6, 13), TaskName = "Sales, marketing and pricing plan", TaskId = 5 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 11), FinishDate = new DateTime(2010, 6, 14), TaskName = "Piano di vendite, marketing e pricing", TaskId = 6 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 12), FinishDate = new DateTime(2010, 6, 17), TaskName = "Organization status review", TaskId = 7 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 18), FinishDate = new DateTime(2010, 6, 18), TaskName = "Revisione dell'organizzazione dello stato", TaskId = 8 });
        ObservableCollection<Predecessor> mrkPredecessor = new ObservableCollection<Predecessor>();
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 2, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 3, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 4, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 5, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 6, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 7, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        MarketAnalysis[6].Predecessor = mrkPredecessor;

        Activities[0].Child = MarketAnalysis;


        Activities.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 18), FinishDate = new DateTime(2010, 7, 14), TaskName = "Infrastruttura per la pianificazione del prodotto", TaskId = 9 });
        ObservableCollection<IGanttTask> InfrastructureReq = new ObservableCollection<IGanttTask>();
        InfrastructureReq.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 18), FinishDate = new DateTime(2010, 6, 24), TaskName = "Definire la procedura per la qualificazione di idee", TaskId = 10 });
        InfrastructureReq.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 24), FinishDate = new DateTime(2010, 7, 7), TaskName = "Definire il processo per la condivisione di idea", TaskId = 11 });
        InfrastructureReq.Add(new TaskDetails { StartDate = new DateTime(2010, 7, 7), FinishDate = new DateTime(2010, 7, 14), TaskName = "Infrastruttura per prodotto pianificazione completa", TaskId = 12 });
        InfrastructureReq[1].Predecessor.Add(new Predecessor { GanttTaskIndex = 10, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        InfrastructureReq[2].Predecessor.Add(new Predecessor { GanttTaskIndex = 11, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });

        Activities[1].Child = InfrastructureReq;

        return Activities;
    }
}

Output

The following screenshot illustrates how to render the regular strip lines.

regular-striplines-in-gantt-control

Strip lines in the Gantt chart

Absolute Strip lines

The following code sample demonstrates how to bind the absolute strip line collection to strip lines.

<syncfusion:GanttControl x:Name="ganttControl"
                         ShowStripLines="True"
                         ItemsSource="{Binding TaskCollection}"
                         StripLines="{Binding AbsoluteStripLines}">
    <syncfusion:GanttControl.TaskAttributeMapping>
        <syncfusion:TaskAttributeMapping TaskIdMapping="TaskId"
                                         TaskNameMapping="TaskName"
                                         StartDateMapping="StartDate"
                                         FinishDateMapping="FinishDate"
                                         ChildMapping="Child"
                                         DurationMapping="Duration"
                                         ProgressMapping="Progress"
                                         PredecessorMapping="Predecessor"
                                         ResourceInfoMapping="Resources"/>
    </syncfusion:GanttControl.TaskAttributeMapping>
     <syncfusion:GanttControl.DataContext>
        <local:ViewModel/>
    </syncfusion:GanttControl.DataContext>
</syncfusion:GanttControl>
this.ganttControl.ItemsSource = new ViewModel().TaskCollection;
this.ganttControl.ShowStripLines = true;

// Task attribute mapping
TaskAttributeMapping taskAttributeMapping = new TaskAttributeMapping();
taskAttributeMapping.TaskIdMapping = "TaskId";
taskAttributeMapping.TaskNameMapping = "TaskName";
taskAttributeMapping.StartDateMapping = "StartDate";
taskAttributeMapping.ChildMapping = "Child";
taskAttributeMapping.FinishDateMapping = "FinishDate";
taskAttributeMapping.DurationMapping = "Duration";
taskAttributeMapping.MileStoneMapping = "IsMileStone";
taskAttributeMapping.PredecessorMapping = "Predecessor";
taskAttributeMapping.ProgressMapping = "Progress";
taskAttributeMapping.ResourceInfoMapping = "Resource";
this.ganttControl.TaskAttributeMapping = taskAttributeMapping;

List<StripLineInfo> stripCollection = new List<StripLineInfo>();

//Getting the collection of StripLineInfo
stripCollection = GetStripCollection();

//Property for strip collection.
public List<StripLineInfo> StripCollection
{
    get
    {
        return this.stripCollection;
    }
    set
    {
        this.stripCollection = value;
        RaisePropertyChanged("StripCollection");
    }
}

//Method will return the collection StripLineInfo
private List<StripLineInfo> GetStripCollection()
{
    this.stripCollection.Add(new StripLineInfo() 
    { 
        Content =  "Weekly Team Meeting", 
        StartDate = new DateTime(2012, 6, 4), 
        EndDate = new DateTime(2012, 6, 4), 
        HorizontalContentAlignment = HorizontalAlignment.Center, 
        VerticalContentAlignment = VerticalAlignment.Center, 
        Background =  Brushes.Gold, RepeatBehavior = Repeat.Week, RepeatFor = 1,
        RepeatUpto = new DateTime(2012, 12, 10),
    });

    return this.stripCollection;
}
public class ViewModel
{
    public ViewModel()
    {
        _taskCollection = this.GetData();
        LoadAbsoluteStripLines();
    }

    private ObservableCollection<TaskDetails> _taskCollection;

    /// <summary>
    /// Gets or sets the appointment item source.
    /// </summary>
    /// <value>The appointment item source.</value>
    public ObservableCollection<TaskDetails> TaskCollection
    {
        get
        {
            return _taskCollection;
        }
        set
        {
            _taskCollection = value;
        }
    }

    public ObservableCollection<StripLineInfo> AbsoluteStripLines
    {
        get;
        set;
    }

    private void LoadAbsoluteStripLines()
    {
        AbsoluteStripLines = new ObservableCollection<StripLineInfo>()
        {
            new StripLineInfo()
            {
                Content = "Product Development Started",
                StartDate = new DateTime(2010, 6, 1, 0, 0, 0),
                EndDate = new DateTime(2010, 6, 1, 23, 59, 59),
                Background = Brushes.LightGreen,
                HorizontalContentAlignment = HorizontalAlignment.Center,
                VerticalContentAlignment = VerticalAlignment.Center
            },

            new StripLineInfo()
            {
                Content = "Release Date",
                StartDate = new DateTime(2010, 7, 1, 0, 0, 0),
                EndDate = new DateTime(2010, 7, 1, 23, 59, 59),
                Background = Brushes.OrangeRed,
                HorizontalContentAlignment = HorizontalAlignment.Center,
                VerticalContentAlignment = VerticalAlignment.Center
            }
        };
    }

    /// <summary>
    /// Gets the data.
    /// </summary>
    /// <returns></returns>
    public ObservableCollection<TaskDetails> GetData()
    {
        ObservableCollection<TaskDetails> Activities = new ObservableCollection<TaskDetails>();

        Activities.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 2), FinishDate = new DateTime(2010, 6, 18), TaskName = "Ambito di mercato analisi del prodotto", TaskId = 1 });

        ObservableCollection<IGanttTask> MarketAnalysis = new ObservableCollection<IGanttTask>();
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 2), FinishDate = new DateTime(2010, 6, 6), TaskName = "riesame del mercato attuale", TaskId = 2 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 6), FinishDate = new DateTime(2010, 6, 9), TaskName = "Establish mislestone for future development", TaskId = 3 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 9), FinishDate = new DateTime(2010, 6, 10), TaskName = "Stabilire la pietra miliare per lo sviluppo futuro", TaskId = 4 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 10), FinishDate = new DateTime(2010, 6, 13), TaskName = "Sales, marketing and pricing plan", TaskId = 5 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 11), FinishDate = new DateTime(2010, 6, 14), TaskName = "Piano di vendite, marketing e pricing", TaskId = 6 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 12), FinishDate = new DateTime(2010, 6, 17), TaskName = "Organization status review", TaskId = 7 });
        MarketAnalysis.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 18), FinishDate = new DateTime(2010, 6, 18), TaskName = "Revisione dell'organizzazione dello stato", TaskId = 8 });
        ObservableCollection<Predecessor> mrkPredecessor = new ObservableCollection<Predecessor>();
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 2, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 3, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 4, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 5, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 6, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        mrkPredecessor.Add(new Predecessor { GanttTaskIndex = 7, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        MarketAnalysis[6].Predecessor = mrkPredecessor;

        Activities[0].Child = MarketAnalysis;


        Activities.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 18), FinishDate = new DateTime(2010, 7, 14), TaskName = "Infrastruttura per la pianificazione del prodotto", TaskId = 9 });
        ObservableCollection<IGanttTask> InfrastructureReq = new ObservableCollection<IGanttTask>();
        InfrastructureReq.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 18), FinishDate = new DateTime(2010, 6, 24), TaskName = "Definire la procedura per la qualificazione di idee", TaskId = 10 });
        InfrastructureReq.Add(new TaskDetails { StartDate = new DateTime(2010, 6, 24), FinishDate = new DateTime(2010, 7, 7), TaskName = "Definire il processo per la condivisione di idea", TaskId = 11 });
        InfrastructureReq.Add(new TaskDetails { StartDate = new DateTime(2010, 7, 7), FinishDate = new DateTime(2010, 7, 14), TaskName = "Infrastruttura per prodotto pianificazione completa", TaskId = 12 });
        InfrastructureReq[1].Predecessor.Add(new Predecessor { GanttTaskIndex = 10, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });
        InfrastructureReq[2].Predecessor.Add(new Predecessor { GanttTaskIndex = 11, GanttTaskRelationship = GanttTaskRelationship.FinishToStart });

        Activities[1].Child = InfrastructureReq;

        return Activities;
    }
}

Output

The following screenshot illustrates how to render the absolute strip lines.

absolute-striplines-in-gantt-control

Strip lines in the Gantt chart

To view samples:

  1. Go to the Syncfusion Essential Studio installed location.
    Location: Installed Location\Syncfusion\Essential Studio\35.1.37\Infrastructure\Launcher\Syncfusion Control Panel
  2. Open the Syncfusion Control Panel in the above location (or) Double click on the Syncfusion Control Panel desktop shortcut menu.
  3. Click Run Samples for WPF under the User Interface Edition panel.
  4. Select Gantt.
  5. Expand the Interactive Features item in the Sample Browser.
  6. Choose the Strip Lines sample to launch.

see also

How to enable horizontal lines for gantt chart rows