We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: WPF |
Control: SfDiagram

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.

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile