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,
- BubbleTheme
- CloudsTheme
- DaybreakTheme
- DiagramTheme
- FacetTheme
- GemstoneTheme
- IntegralTheme
- IonTheme
- LinearTheme
- OfficeTheme
- ParallelTheme
- ProminenceTheme
- RadianceTheme
- RetrospectTheme
- SequenceTheme
- SimpleTheme
- SliceTheme
- SmokeTheme
- WhispTheme
- ZephyrTheme
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);
