SfDiagram bug? I can't set PageBackground of PageSettings to Transparent when I put SfDiagram in ListView. What do you know?

[Jun Maeda]

I can't set PageBackground of PageSettings to Transparent when I put SfDiagram in ListView. What do you know?

https://github.com/juner/ListInSfDiagramSample20200902

Attachment: listinsfdiagrambugsample_37b71210.zip

[Ranjitha Amirthalingam]

Hi Jun, 

 

Thanks for contacting Syncfusion Support. 

 

We could face that white region appears for node in list view even though PageBackground of PageSettings is transparent. Currently, we are validating the root cause of the issue and will update you further details on September 4, 2020. 

 

We appreciate your patience until then. 

 

Regards, 

Ranjitha A. 

[Jun Maeda]

thanks you.

Maybe `syncfusion:SfDiagram.ScrollSettings` is not set properly in ListView, is it? (If you prepare a node that exceeds the range, you cannot hide the scroll bar.)

[Ranjitha Amirthalingam]

Hi Jun, 

 

ScrollSettings and PageSettings properties were initialized with default values in the SfDiagram's Constructor. While you using SfDiagram as DataTemplate, the property which is already initialized doesn't gets updated for xaml values.  

So,we have solved this issue by creating custom class for SfDiagram and updated the properties in the constructor of the custom class. Then use that custom Diagram in the template to achieve your requirement. Please refer the code changes as below. 

 

Code changes: 

<local:CustomDiagram Background="Yellow" Height="120" Width="120" Tool="None" HorizontalRuler="{x:Null}" VerticalRuler="{x:Null}">
                        <local:CustomDiagram.Nodes>
                            <syncfusion:NodeCollection>
                                <syncfusion:NodeViewModel UnitHeight="50" UnitWidth="50" OffsetX="30" OffsetY="30" />
                            </syncfusion:NodeCollection>
                        </local:CustomDiagram.Nodes>
</local:CustomDiagram> 

 

public class CustomDiagram : SfDiagram
    {
        public CustomDiagram() : base()
        {
            this.PageSettings = new PageSettings() { PageWidth = 100, PageHeight = 100, PageBackground = new SolidColorBrush(Colors.Transparent) };
            this.ScrollSettings = new ScrollSettings() { ScrollLimit = ScrollLimit.Diagram, DragLimit = ScrollLimit.Diagram, AutoScrollLimit = ScrollLimit.Diagram };
        }
    } 

 

 

  

 

Regards, 

Ranjitha A. 

[Jun Maeda]

thank you. It went well.

Does that mean that you should create a DependencyProperty that inherits and works together? Although the OnInitialized function requires initialization.

add class:

https://github.com/juner/ListInSfDiagramSample20200902/blob/3bf06763966e12d69a81d978b076597d460433d5/ListInSfDiagramSample/UserControls/SfDiagram.cs

set style:

https://github.com/juner/ListInSfDiagramSample20200902/blob/3bf06763966e12d69a81d978b076597d460433d5/ListInSfDiagramSample/MainWindow.xaml#L29-L42

Attachment: ListInSfDiagramSample20200902_833e2dd6.zip

[Ranjitha Amirthalingam]

Hi Jun, 

 

Yes , the solution you provided is the way to update the properties(PageSettings,ScrollSettings) for diagram through style in Xaml. Could you please let us know whether you require any further assistance on this? 

 

 

 

Regards, 

Ranjitha A. 

[Jun Maeda]

No, so far it doesn't seem to matter.

Thank you very much.

[Ranjitha Amirthalingam]

Hi Jun, 

 

Most Welcome. 

 

Regards, 

Ranjitha A.