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
close icon

Color Behind SFDiagram Remains White on Background Color Change


I'm working with SFDiagram.  Whenever I change the background color of SFDiagram, the color remains white behind the nodes.  I am using transparent PNG's for the nodes.

How do we make the background transparent for the diagram?  Please see the picture for clarity:

SFDiagram Background

3 Replies

KR Keerthivasan Ramamoorthy Syncfusion Team November 21, 2016 04:35 AM UTC

Hi John, 
We have a support to achieve your requirement by using PageBackground property of the PageSettings, it is used to set Background color of the SfDiagram. The Background color applies based on the PageWidth and PageHeight of the Diagram or elements(Nodes/Connectors) occupies area in the Diagram. We have provided a Code example and Online Document to represent this. Please refer the code example and Online Document link as below.  
Code Example:  
diagram.PageSettings.PageBackground = new SolidColorBrush(Colors.Transparent);  
Here,diagram is instance of SfDiagram.  
Keerthivasan R. 

VV vv replied to Keerthivasan Ramamoorthy June 3, 2022 01:11 PM UTC

How can you set the page background in xaml using a dynamic resource!.  As a control this should be straight forward without the need for view models, which is curious why you have them in the first place.

Any help would be appreciated.

KR Karkuvel Rajan Shanmugavel Syncfusion Team June 6, 2022 12:34 PM UTC

Hi John,

Requirement: Need to set the diagram background to be transparent.

We have prepared a simple sample to achieve your requirement. In the sample, we have used transparent .png images in the Content of the Node and set the page background as Red and Diagram’s Background as Black to show the difference between them. Please follow the sample in the below link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagram_Background-874452579

If the provided sample doesn’t help you to achieve your requirement, please revert us with more details or modify the sample to understand your requirement on our end.


Karkuvel Rajan S

Live Chat Icon For mobile
Up arrow icon