Articles in this section
Category / Section

How to show horizontal and vertical grid lines in WPF Gantt control

4 mins read

This article explains how to show the horizontal and vertical grid lines in Syncfusion WPF Gantt control, as shown in the following image.

 

Enable the horizontal and vertical grid lines

 

Display the horizontal grid lines

To show the horizontal grid lines, set the value for BorderThickness and BorderBrush properties in GanttCharRow using the style as shown in the following code sample.

 

[XAML]

            <sync:GanttControl.Resources>
                <Style TargetType="chart:GanttChartRow">
                    <Setter Property="BorderThickness" Value="0,0,0,2"/>
                    <Setter Property="BorderBrush" Value="Orange"/>
                </Style>
            </sync:GanttControl.Resources>

Display the vertical grid lines

To show the vertical grid lines in Gantt control, use the strip lines in the Gantt chart as shown in the following code sample.

 

[XAML]

        <sync:GanttControl x:Name="Gantt"
                               ItemsSource="{Binding TaskCollection}"
                               ResourceCollection="{Binding ResourceCollection}"
                               ShowStripLines="True" Loaded="Gantt_Loaded"
                               StripLines="{Binding StripCollection,
    
                                                         Mode=TwoWay,
                                                    UpdateSourceTrigger=PropertyChanged}"
                               VisualStyle="Metro">
 
          …
 
            <sync:GanttControl.TaskAttributeMapping>
                <sync:TaskAttributeMapping TaskIdMapping="TaskId"
                                               TaskNameMapping="TaskName"
                                               StartDateMapping="StartDate"
                                               FinishDateMapping="FinishDate"
                                               ChildMapping="Child"
                                               DurationMapping="Duration"
                                               ProgressMapping="Progress"
                                               PredecessorMapping="Predecessor"
                                               ResourceInfoMapping="Resources"/>
            </sync:GanttControl.TaskAttributeMapping>
        </sync:GanttControl>

 

[C#]

MainWindow.xaml.cs

        private void Gantt_Loaded(object sender, RoutedEventArgs e)
        {
            Border border = VisualTreeHelper.GetChild(Gantt, 0) as Border;
            Grid grid = VisualTreeHelper.GetChild(border, 0) as Grid;
            ScrollViewer scrollViewer = VisualTreeHelper.GetChild(grid, 2) as ScrollViewer;
            Grid scrollGrid = scrollViewer.Content as Grid;
            ganttChart = VisualTreeHelper.GetChild(scrollGrid, 1) as GanttChart;
            ganttSchedule = VisualTreeHelper.GetChild(scrollGrid, 0) as GanttSchedule;
 
            List<StripLineInfo> stripCollection = new List<StripLineInfo>();
            var differenceTime = (this.ganttSchedule.EndTime - this.ganttSchedule.StartTime).Days;
            for (int i = 0; i < differenceTime; i++)
            {
 
 
                stripCollection.Add(new StripLineInfo()
                {
                    Type = StriplineType.Absolute,
                    Width = 2,
                    Height = this.ganttChart.ActualHeight,
                    Position = new Point(PositionCalculation(this.ganttSchedule.StartTime.AddDays(i)), 0),
                    HorizontalContentAlignment = HorizontalAlignment.Center,
                    VerticalContentAlignment = VerticalAlignment.Center,
                    Background = new SolidColorBrush(Colors.Orange),
                });
            }
            model.StripCollection = stripCollection;
        }
 
        private double PositionCalculation(DateTime day)
        {
            DateTime date = ganttSchedule.StartTime;
            MethodInfo methodInfo = typeof(GanttChart).GetMethod(
    "GetStartPositionOfDate",
    BindingFlags.Instance | BindingFlags.NonPublic | BindingFlags.Static,
    null,
    new Type[] { typeof(DateTime) },
    null);
            object[] dateObjects = new object[] { day };
            double extent =
                (double)
                methodInfo.Invoke(
                    this.ganttChart,
                    BindingFlags.Instance | BindingFlags.NonPublic,
                    null,
                    dateObjects,
                    CultureInfo.CurrentCulture);
            return extent;
        }

 

View the sample in GitHub.

 

See also

 

How to add custom tooltip to Gantt

 

How to define your own schedule for Gantt to track the progress of projects

 

How to differentiate the dates of holidays

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied