Strip Lines (Time Indicators)
- 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>
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.
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"/>
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>
Link Strip Line Visibility to Zoom Factor
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.