Articles in this section
Category / Section

How to apply built-in theme for node and connector in WPF Diagram (SfDiagram)?

3 mins read

SfDiagram control provides built-in theme support for diagram and its elements of Nodes, Connectors and Annotations. Using Theme property of SfDiagram control, you can specify the required theme style from available built-in themes collection. When you assign theme for diagram, then its default theme style will be set with its elements. Also you can specify the different them style for Each Node and Connector by using ThemeStyleID property to change their theme style from default styles.

Following are the available built-in-themes,

Xaml

        <!--Initialize Diagram-->
        <Syncfusion:SfDiagram x:Name="diagramcontrol">
            <!--Specify the Office theme-->
            <Syncfusion:SfDiagram.Theme>
                <Syncfusion:OfficeTheme />
            </Syncfusion:SfDiagram.Theme>
            <!--Initialize Node-->
            <Syncfusion:SfDiagram.Nodes>
                <Syncfusion:NodeCollection>
                    <!--Creating start node with theme style id value as Variant1-->
                    <Syncfusion:NodeViewModel ID="start"
                                              UnitWidth="150"
                                              UnitHeight="60"
                                              OffsetX="300"
                                              OffsetY="60"
                                              ThemeStyleId="Variant1"
                                              Shape="{StaticResource Ellipse}">
                        <Syncfusion:NodeViewModel.Annotations>
                            <Syncfusion:AnnotationCollection>
                                <Syncfusion:TextAnnotationViewModel Text="Start">
                                </Syncfusion:TextAnnotationViewModel>
                            </Syncfusion:AnnotationCollection>
                        </Syncfusion:NodeViewModel.Annotations>
                    </Syncfusion:NodeViewModel>
 
                    <!--Creating process node with theme style id value as Variant2-->
                    <Syncfusion:NodeViewModel ID="process"
                                              UnitWidth="150"
                                              UnitHeight="60"
                                              OffsetX="300"
                                              OffsetY="160"
                                              ThemeStyleId="Variant2"
                                              Shape="{StaticResource Process}">
                        <Syncfusion:NodeViewModel.Annotations>
                            <Syncfusion:AnnotationCollection>
                                <Syncfusion:TextAnnotationViewModel Text="Process">
                                </Syncfusion:TextAnnotationViewModel>
                            </Syncfusion:AnnotationCollection>
                        </Syncfusion:NodeViewModel.Annotations>
                    </Syncfusion:NodeViewModel>
 
                    <!--Creating end node with theme style id value as Variant3-->
                    <Syncfusion:NodeViewModel ID="end"
                                              UnitWidth="120"
                                              UnitHeight="60"
                                              OffsetX="300"
                                              OffsetY="260"
                                              ThemeStyleId="Variant3"
                                              Shape="{StaticResource Process}">
                        <Syncfusion:NodeViewModel.Annotations>
                            <Syncfusion:AnnotationCollection>
                                <Syncfusion:TextAnnotationViewModel Text="End">
                                </Syncfusion:TextAnnotationViewModel>
                            </Syncfusion:AnnotationCollection>
                        </Syncfusion:NodeViewModel.Annotations>
                    </Syncfusion:NodeViewModel>
                </Syncfusion:NodeCollection>
            </Syncfusion:SfDiagram.Nodes>
 
            <!--Initialize Connector-->
            <Syncfusion:SfDiagram.Connectors>
                <Syncfusion:ConnectorCollection>
 
                    <!--Creating connection from start to process node-->
                    <Syncfusion:ConnectorViewModel x:Name=" StartToProcess"
                                                   ThemeStyleId="Subtly,Accent1"
                                                   SourceNodeID="start"
                                                   TargetNodeID="process">
                    </Syncfusion:ConnectorViewModel>
 
                    <!--Creating connection from process to end node-->
                    <Syncfusion:ConnectorViewModel x:Name="ProcessToEnd"  SourceNodeID="process"
                                                   ThemeStyleId="Subtly,Accent3"
                                                   TargetNodeID="end">
                    </Syncfusion:ConnectorViewModel>
                </Syncfusion:ConnectorCollection>
            </Syncfusion:SfDiagram.Connectors>
        </Syncfusion:SfDiagram>

C#

            //Creating diagram instance 
            SfDiagram diagramcontrol = new SfDiagram();
            //Specify the office theme.
            diagramcontrol.Theme = new OfficeTheme();
 
            //Initialize NodeCollection to SfDiagram
            diagramcontrol.Nodes = new NodeCollection();
            //Initialize ConnectorCollection to SfDiagram
            diagramcontrol.Connectors = new ConnectorCollection();
 
            //Creating start node with theme style id value as Variant1
            NodeViewModel start = new NodeViewModel()
            {
                ID = "start",
                UnitWidth = 150,
                UnitHeight = 60,
                OffsetX = 300,
                OffsetY = 60,
                //Specify shape to the Node from built-in Shape Dictionary
                Shape = this.Resources["Ellipse"],
                ThemeStyleId = StyleId.Variant1,
                //Initialize the AnnotationCollection
                Annotations = new ObservableCollection<IAnnotation>()
                {
                    //Initialize the Annotation with text
                    new TextAnnotationViewModel()
                    {
                        Text="Start",
                    }
                }
            };
 
            //Add Node to Nodes property of the Diagram
            (diagramcontrol.Nodes as NodeCollection).Add(start);
 
            //Creating process node with theme style id value as Variant2
            NodeViewModel process = new NodeViewModel()
            {
                ID = "process",
                UnitWidth = 150,
                UnitHeight = 60,
                OffsetX = 300,
                OffsetY = 160,
                //Specify shape to the Node from built-in Shape Dictionary
                Shape = this.Resources["Process"],
                ThemeStyleId = StyleId.Variant2,
                //Initialize the AnnotationCollection
                Annotations = new ObservableCollection<IAnnotation>()
                {
                    //Initialize the Annotation with text
                    new TextAnnotationViewModel()
                    {
                        Text="Process",
                    }
                }
            };
 
            //Add Node to Nodes property of the Diagram
            (diagramcontrol.Nodes as NodeCollection).Add(process);
 
            //Creating end node with theme style id value as Variant3
            NodeViewModel end = new NodeViewModel()
            {
                ID = "end",
                UnitWidth = 150,
                UnitHeight = 60,
                OffsetX = 300,
                OffsetY = 260,
                //Specify shape to the Node from built-in Shape Dictionary
                Shape = this.Resources["Process"],
                ThemeStyleId = StyleId.Variant3,
                //Initialize the AnnotationCollection
                Annotations = new ObservableCollection<IAnnotation>()
                {
                    //Initialize the Annotation with text
                    new TextAnnotationViewModel()
                    {
                        Text="End",
                    }
                }
            };
 
            //Add Node to Nodes property of the Diagram
            (diagramcontrol.Nodes as NodeCollection).Add(end);
 
            //Creating connection from start to process node
            ConnectorViewModel StartToProcess = new ConnectorViewModel()
            {
                SourceNodeID = "start",
                TargetNodeID = "process",
                ThemeStyleId = StyleId.Subtly | StyleId.Accent1,
            };
 
            //Adding the connector into Collection
            (diagramcontrol.Connectors as ConnectorCollection).Add(StartToProcess);
 
            //Creating connection from process to end node
            ConnectorViewModel ProcessToEnd = new ConnectorViewModel()
            {
                SourceNodeID = "process",
                TargetNodeID = "end",
                ThemeStyleId = StyleId.Subtly | StyleId.Accent3,
            };
 
            //Adding the connector into Collection
            (diagramcontrol.Connectors as ConnectorCollection).Add(ProcessToEnd);

 

Diagram

Description automatically generated

View sample in GitHub.

 

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