All docs
V20.2
20.2 (EAP/Beta)
20.1
19.2
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
You are viewing help content for pre-release software. This document and the features it describes are subject to change. Switch to the current version.

Strip Lines

  • 5 minutes to read

The GanttControl allows you to highlight individual points or ranges on the timeline.

The control supports three strip line types:

  • StripLine - a single strip line defined by a start date and duration.

    <dxgn:GanttView.StripLines>
        <dxgn:StripLine 
            StartDate="08/14/2019 10:00:00" 
            Duration="5:0:0" 
            Background="#3FF5BD53"/>
    </dxgn:GanttView.StripLines>
    
  • StripLineRule - a set of strip lines defined by a Recurrence pattern.

    <dxgn:GanttView.StripLines>
        <dxgn:StripLineRule 
            Recurrence="{dxgn:Weekly DayOfWeek=Friday, Start=1/1/2019, Until=9/1/2019}" 
            StartOffset="8:0:0" 
            Duration="8:0:0" />
    </dxgn:GanttView.StripLines> 
    
  • CurrentDateTimeStripLine - a strip line that indicates the current time (DateTime.Now), and automatically updates its position onscreen.

    <dxgn:GanttView.StripLines>
        <dxgn:CurrentDateTimeStripLine />
    </dxgn:GanttView.StripLines>
    

wpf Gantt strip lines today line

Add Strip Lines

Add Strip Lines in Markup

Use the GanttView.StripLines property to populate a collection of strip lines displayed within the Gantt area.

<Window ...
    xmlns:dxgn="http://schemas.devexpress.com/winfx/2008/xaml/gantt" />

<dxgn:GanttControl ItemsSource="{Binding Tasks}" >
    <dxgn:GanttControl.View>
        <dxgn:GanttView
            x:Name="view" ... >
            <dxgn:GanttView.StripLines>
                <dxgn:CurrentDateTimeStripLine />
                <dxgn:StripLine StartDate="08/14/2019 10:00:00" Duration="5:0:0" Background="#3FF5BD53"/>
                <dxgn:StripLineRule
                    Recurrence="{dxgn:Weekly DayOfWeek=Friday, Start=1/1/2019, Until=9/1/2019}"
                    StartOffset="8:0:0"
                    Duration="8:0:0" />
            </dxgn:GanttView.StripLines>
        </dxgn:GanttView>
    </dxgn:GanttControl.View>
</dxgn:GanttControl>
</Window>

Bind to a Collection of Strip Lines

To describe strip lines in a Model or ViewModel, create a corresponding class with strip line settings.

public class StripLineDataItem {
    public DateTime StartDateTime { get; set; }
    public TimeSpan StripLineDuration { get; set; }
}

In the ViewModel, create the StripLines collection.

public ObservableCollection<StripLineDataItem> StripLines { get; set; }

This collection should implement the INotifyCollectionChanged interface, so that the changes made within the ViewModel are automatically reflected by the GanttControl. The GanttView.StripLinesSource property should be bound to the ViewModel's StripLines property.

// ViewModel code
using System;
using System.Collections.ObjectModel;
using System.Globalization;
using DevExpress.Mvvm.Gantt;

namespace GanttControlDemoApp {
    public class ProjectTaskViewModel {
        public ProjectTaskViewModel() {
            StripLines = new ObservableCollection<StripLineDataItem>() {
                new StripLineDataItem() {
                    StartDateTime = DateTime.Parse("08/20/2019 10:00:00", CultureInfo.InvariantCulture),
                    StripLineDuration = TimeSpan.Parse("5:0:0")
                },
                new StripLineDataItem() {
                    StartDateTime = DateTime.Parse("08/22/2019 12:00:00", CultureInfo.InvariantCulture),
                    StripLineDuration = TimeSpan.Parse("3:0:0")
                }
            };
        }

        public ObservableCollection<StripLineDataItem> StripLines { get; set; }
    }
    public class StripLineDataItem {
        public DateTime StartDateTime { get; set; }
        public TimeSpan StripLineDuration { get; set; }
    }
}

Strip lines are generated according to a template specified by the GanttView.StripLineTemplate property.

xmlns:dxi="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"

<DataTemplate x:Key="StripLineTemplate">
    <ContentControl>
        <dxgn:StripLine StartDate="{Binding StartDateTime}" 
                        Duration ="{Binding StripLineDuration}"/>
    </ContentControl>
</DataTemplate>

A template that describes strip lines should be assigned to the GanttView.StripLineTemplate property.

<Window ...
    xmlns:local="clr-namespace:GanttControlDemoApp"
    xmlns:dxgn="http://schemas.devexpress.com/winfx/2008/xaml/gantt" 
    xmlns:dxi="http://schemas.devexpress.com/winfx/2008/xaml/core/internal">
    <Window.DataContext>
        <local:ProjectTaskViewModel />
    </Window.DataContext>
    <Grid>
        <dxgn:GanttControl ItemsSource="{Binding Tasks}">
            <dxgn:GanttControl.Resources>
                <DataTemplate x:Key="StripLineTemplate">
                    <ContentControl>
                        <dxgn:StripLine StartDate="{Binding StartDateTime}" 
                                        Duration ="{Binding StripLineDuration}"/>
                    </ContentControl>
                </DataTemplate>
            </dxgn:GanttControl.Resources>
            <dxgn:GanttControl.View>
                <dxgn:GanttView ... 
                    StripLinesSource="{Binding StripLines}"
                    StripLineTemplate="{StaticResource StripLineTemplate}">
                </dxgn:GanttView>
            </dxgn:GanttControl.View>
        </dxgn:GanttControl>

    </Grid>
</Window>

Appearance Customization

Use the following properties to customize strip line appearance.

Property Description
Background Specifies the strip line color.
BorderBrush Specifies the strip line outer border brush.
BorderThickness Specifies the strip line outer border thickness.

The code sample below demonstrates how to change a strip line's background color and border.

<dxgn:StripLine 
    StartDate="08/14/2019 10:00:00" 
    Duration="5:0:0" 
    Background="#3FF5BD53" 
    BorderBrush="#FFF5BD53" 
    BorderThickness="1,0"/>

Gantt strip line set custom background

The ControlStyle property allows you to customize the StripLineControl style. This control is used to render strip lines.

The code sample below demonstrates how to change strip line opacity when an end user moves the cursor over it.

<dxgn:StripLine 
    StartDate="08/18/2019 10:00:00" 
        Duration="5:0:0" 
        Background="#3FF5BD53">
    <dxgn:StripLine.ControlStyle>
        <Style TargetType="{x:Type dxgn:StripLineControl}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Opacity" Value=".8"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </dxgn:StripLine.ControlStyle>
</dxgn:StripLine>

The control allows you to hide strip lines if end-users zoom out the view farther than specified by the HideOnZoom property.

The code sample below demonstrates a strip line that is hidden when the Gantt area's GanttView.Zoom property value is less than one hour per device-independent pixel.

<dxgn:StripLine
    StartDate="08/14/2019 10:00:00" 
    Duration="5:0:0"
    HideOnZoom="1:0:0"/>

NOTE

The HideOnZoom property does not affect the CurrentDateTimeStripLine.

Strip Line Tooltip

Use the strip line's ToolTipTemplate property to define the strip line tooltip template.

The template data context is represented by the StripLineToolTipData object.

The code sample below demonstrates how to specify a tooltip template for a strip line.

<dxgn:CurrentDateTimeStripLine ToolTip="Current time">
    <dxgn:CurrentDateTimeStripLine.ToolTipTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="70"/>
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>

                <TextBlock Text="Start:" Grid.Column="0" Grid.Row="0"/>
                <TextBlock Text="End:" Grid.Column="0" Grid.Row="1"/>
                <TextBlock Text="Duration:" Grid.Column="0" Grid.Row="2"/>
                <TextBlock Text="ToolTip:" Grid.Column="0" Grid.Row="3"/>

                <TextBlock Text="{Binding Start}" Grid.Column="1" Grid.Row="0"/>
                <TextBlock Text="{Binding End}" Grid.Column="1" Grid.Row="1"/>
                <TextBlock Text="{Binding Duration}" Grid.Column="1" Grid.Row="2"/>
                <TextBlock Text="{Binding ToolTip}" Grid.Column="1" Grid.Row="3"/>

            </Grid>
        </DataTemplate>
    </dxgn:CurrentDateTimeStripLine.ToolTipTemplate>
</dxgn:CurrentDateTimeStripLine>

Set the GanttView.StripLineShowToolTipDelay property to the desired delay in milliseconds to display tooltips with a custom delay.