Articles in this section
Category / Section

How to customize the appearance of gridlines in WPF Diagram (SfDiagram)?

1 min read

The HorizontalGridLines and VerticalGridLines properties allow us to customize the appearance of the gridlines in WPF Diagram (SfDiagram). We have provided code example to represent this. Please refer to the code example as below.

C#

//Creates collection for the style.
 
public class Gridlinestyle : List<Style>
{
 
}

XAML

<Window.Resources>
  <!--Style for HorizontalGridlines-->
  <local:Gridlinestyle x:Key="horizontalline">
    <Style TargetType="Path">
      <Setter Property="Stroke" Value="Blue"></Setter>
      <Setter Property="StrokeDashArray" Value="3"></Setter>
    </Style>
  </local:Gridlinestyle>
  <!--Style for VerticalGridlines-->
  <local:Gridlinestyle x:Key="verticalline">
    <Style TargetType="Path">
      <Setter Property="Stroke" Value="Blue"></Setter>
      <Setter Property="StrokeDashArray" Value="3"></Setter>
    </Style>
  </local:Gridlinestyle>
</Window.Resources>

Line Intervals

Thickness and the space between gridlines can be customized by using LinesInterval property. In the line Interval collections, values at the odd places are referred as the thickness of lines and the values at the even places are referred as the space between gridlines. We have provided code example to represent this. Please refer to the code example as below.

C#

//Creates collection for the double values.
public class Intervals : List<double>
{
}

XAML

<Window.Resources>
  <!--Initializes the double collection-->
  <local:Intervals x:Key="Intervals">
    <sys:Double>1.25</sys:Double>
    <sys:Double>14</sys:Double>
    <sys:Double>0.25</sys:Double>
    <sys:Double>15</sys:Double>
    <sys:Double>0.25</sys:Double>
    <sys:Double>15</sys:Double>
    <sys:Double>0.25</sys:Double>
    <sys:Double>15</sys:Double>
    <sys:Double>0.25</sys:Double>
    <sys:Double>15</sys:Double>
  </local:Intervals>
</Window.Resources>

Integrating Gridline style and LineIntervals customization in Diagram

<Grid>
  <syncfusion:SfDiagram x:Name="Diagram">
    <syncfusion:SfDiagram.SnapSettings>
      <syncfusion:SnapSettings SnapConstraints="ShowLines">
        <!--Initialize HorizontalGridlines-->
        <syncfusion:SnapSettings.HorizontalGridlines>
          <syncfusion:Gridlines Strokes="{StaticResource horizontalline}" LinesInterval="{StaticResource Intervals}"></syncfusion:Gridlines>
        </syncfusion:SnapSettings.HorizontalGridlines>
        <!--Initialize VerticalGridlines-->
        <syncfusion:SnapSettings.VerticalGridlines>
          <syncfusion:Gridlines Strokes="{StaticResource verticalline}" LinesInterval="{StaticResource Intervals}"></syncfusion:Gridlines>
        </syncfusion:SnapSettings.VerticalGridlines>
      </syncfusion:SnapSettings>
    </syncfusion:SfDiagram.SnapSettings>
  </syncfusion:SfDiagram>
</Grid>

We have provided sample and screenshot to represent both customization. Please refer to the sample and screenshot as below.

Customize WPF Diagram Gridlines

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