wpf-401200-controls-and-libraries-gantt-control-strip-lines.md
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.
StripLineRule - a set of strip lines defined by a Recurrence pattern.
CurrentDateTimeStripLine - a strip line that indicates the current time (DateTime.Now), and automatically updates its position onscreen.
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>
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; }
}
Public Class StripLineDataItem
Public Property StartDateTime As DateTime
Public Property StripLineDuration As TimeSpan
End Class
In the ViewModel, create the StripLines collection.
public ObservableCollection<StripLineDataItem> StripLines { get; set; }
Public Property StripLines As ObservableCollection(Of StripLineDataItem)
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; }
}
}
' ViewModel code
Imports System
Imports System.Collections.ObjectModel
Imports System.Globalization
Imports DevExpress.Mvvm.Gantt
Namespace GanttControlDemoApp
Public Class ProjectTaskViewModel
Public Sub New()
StripLines = New ObservableCollection(Of StripLineDataItem)() From {
New StripLineDataItem() With {
.StartDateTime = DateTime.Parse("08/20/2019 10:00:00", CultureInfo.InvariantCulture),
.StripLineDuration = TimeSpan.Parse("5:0:0")
},
New StripLineDataItem() With {
.StartDateTime = DateTime.Parse("08/22/2019 12:00:00", CultureInfo.InvariantCulture),
.StripLineDuration = TimeSpan.Parse("3:0:0")
}
}
End Sub
Public Property StripLines As ObservableCollection(Of StripLineDataItem)
End Class
Public Class StripLineDataItem
Public Property StartDateTime As DateTime
Public Property StripLineDuration As TimeSpan
End Class
End Namespace
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>
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>
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.
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.