Auto Resize Strech Width and Height of SfDiagram: How to Fit SfDiagram in Page

[Xamarin Hunter]

I've created a SfDiagram belong to a page in WPF. SfDiagram was created in a WPF Page and MainWindow Page Content show this Page but I couldnt achieve to fit SfDiagram fully Page. I want to set auto fit like stretch on width and height of SfDiagram. 

Here is my Page xaml includes SfDiagram:

    <Grid>

        <DockPanel>

            <chart:SfDiagram x:Name="myDiagram"/>

        </DockPanel>

    </Grid>

[Ramya Thirugnanam]

Hi Utemar, 

 

Thanks for contacting Syncfusion support. 

 

Requirement: Fit SfDiagram into xaml page. 

 

We have prepared the sample based on the provided code example. We were unable to face any issues from our end and SfDiagram has fully fit into the xaml page. Please refer the code example and video link as below. 

 

Code example: We set the background color for SfDiagram to represent the requirement. 

 

<Grid> 

   <DockPanel> 

      <syncfusion:SfDiagram x:Name="myDiagram" Background="Gray"/> 

   </DockPanel> 

</Grid> 

 

 

Video link: https://www.syncfusion.com/downloads/support/forum/145445/ze/145445_Video-449398764 

 

Regards, 

Ramya T 

[Xamarin Hunter]

Hi Utemar, 

 

Thanks for contacting Syncfusion support. 

 

Requirement: Fit SfDiagram into xaml page. 

 

We have prepared the sample based on the provided code example. We were unable to face any issues from our end and SfDiagram has fully fit into the xaml page. Please refer the code example and video link as below. 

 

Code example: We set the background color for SfDiagram to represent the requirement. 

 

<Grid> 

   <DockPanel> 

      <syncfusion:SfDiagram x:Name="myDiagram" Background="Gray"/> 

   </DockPanel> 

</Grid> 

 

 

Video link: https://www.syncfusion.com/downloads/support/forum/145445/ze/145445_Video-449398764 

 

Regards, 

Ramya T 

Is there any way to set SfDiagram as a horizontal align in a Page? I've achieve align just only OffsetX belong to page width but I want to achieve SfDiagram'aligment as a center alignment via any code.  

[Ramya Thirugnanam]

Hi Utemar, 

 

Thanks for your update. 

 

We were unable to understand the requirement from the given query. Could you please provide us the screenshot or video to represent your requirement? This will help us to provide you the appropriate solution at the earliest. 

 

Regards, 

Ramya T 

[Xamarin Hunter]

Hi Utemar, 

 

Thanks for your update. 

 

We were unable to understand the requirement from the given query. Could you please provide us the screenshot or video to represent your requirement? This will help us to provide you the appropriate solution at the earliest. 

 

Regards, 

Ramya T 

https://pasteboard.co/IlaDQoV.png

I've created SfDiagram which refer to this Syncfusion Help Services: I've find flow Diagram sample from this link:

In these code, I've change Grid to DockPanel. Then, DockPanel and SfDiagram, I've set to align as centered. But, the output is not shown centered according to MainWindow.

My aim is simple: My SfDiagram will be located as a center align according to window area.

Here is my code: 

   

       

       

           

               

               

                   

                   

                       

                           

                           

                               

                           

                       

                   

                   

                   

                       

                           

                               

                           

                       

                   

                   

                   

                       

                           

                               

                           

                       

                   

               

           

           

               

               

                   

                   

               

           

       

   

[Xamarin Hunter]

Hi Utemar, 

 

Thanks for your update. 

 

We were unable to understand the requirement from the given query. Could you please provide us the screenshot or video to represent your requirement? This will help us to provide you the appropriate solution at the earliest. 

 

Regards, 

Ramya T 

Here is Visual Solution: 

Attachment: FlowDiagram_XAML_b203c0a4.rar

[Ramya Thirugnanam]

Hi Utemar, 

 

Thanks for sharing sample and screenshot to represent the requirement. 

 

Diagram supports manual and automatic arrangement of node in Diagram. In manual positioning depends on OffsetX and OffsetY property of nodes. For your scenario(manual), we can achieve your requirement by using ViewPortChangedEvent and BringIntoCenter method. Please find the code example and modified sample as below. 

 

ViewPortChangedEvent: It will be invoked whenever the size of the diagram or page get modified(Zooming, Dragging etc.…). 

BringIntoCenter : It will bring the specific region or bounds into center of the diagram.  

 

Sample Link:
FlowDiagram_XAML
 

 

Code example: 

private void MainWindow_ViewPortChangedEvent(object sender, ChangeEventArgs<object, ScrollChanged> args) 

        { 

            if(args.NewValue.ContentBounds!=Rect.Empty) 

            { 

                (Diagram.Info as IGraphInfo).BringIntoCenter(args.NewValue.ContentBounds); 

            } 

        } 

 

Regards,  

Ramya T  

[Xamarin Hunter]

Hi Utemar, 

 

Thanks for sharing sample and screenshot to represent the requirement. 

 

Diagram supports manual and automatic arrangement of node in Diagram. In manual positioning depends on OffsetX and OffsetY property of nodes. For your scenario(manual), we can achieve your requirement by using ViewPortChangedEvent and BringIntoCenter method. Please find the code example and modified sample as below. 

 

ViewPortChangedEvent: It will be invoked whenever the size of the diagram or page get modified(Zooming, Dragging etc.…). 

BringIntoCenter : It will bring the specific region or bounds into center of the diagram.  

 

Sample Link:
FlowDiagram_XAML
 

 

Code example: 

private void MainWindow_ViewPortChangedEvent(object sender, ChangeEventArgs<object, ScrollChanged> args) 

        { 

            if(args.NewValue.ContentBounds!=Rect.Empty) 

            { 

                (Diagram.Info as IGraphInfo).BringIntoCenter(args.NewValue.ContentBounds); 

            } 

        } 

 

Regards,  

Ramya T  

It works well from the viewpoint of horizontal aligment. But, a different problem occurred at this time. My SfDiagram is really long according to page and when i deploy it, there is shown scrollbar automatically in order to move SfDiagram up and down.
So what happened now? Now SfDiagram located horizontalaligment but could not move flowchart up or down; always same vertical view although SfDiagram has a scrollbar. What am i missing?
Best regards.

[Ramya Thirugnanam]

Hi Utemar,  

 

Thanks for your update. 

 

Could you please confirm us whether page setting is used in your application, share us the simple video to represent the issue and code example of Sfdiagram definition in your application? 

 

This will help us to investigate further on the reported issue and provide you the appropriate solution at the earliest. 

 

Regards,   

Ramya T   

[Xamarin Hunter]

Hi Utemar,  

 

Thanks for your update. 

 

Could you please confirm us whether page setting is used in your application, share us the simple video to represent the issue and code example of Sfdiagram definition in your application? 

 

This will help us to investigate further on the reported issue and provide you the appropriate solution at the earliest. 

 

Regards,   

Ramya T   

Here is my visual solution. SfDiagram located horizontal center but for vertical view, scrollbar is not seem ideally

Attachment: FlowDiagram_XAML_89494cd8.rar

[Ramya Thirugnanam]

Hi Utemar, 

 

Reported Issue : Could not able to scroll the diagram vertically.  

 

We have analyzed the provided sample and able to reproduce the reported issue. We have provided modified code example and sample for this. Please find the code example and sample link below.  

 

Code Example:   

 

        private void MainWindow_ViewPortChangedEvent(object sender, ChangeEventArgs<object, ScrollChanged> args)  

        {  

            // This condition is used to check whether the bounds is not empty and the old bounds and new bounds are not equals to each other.  

            if (args.NewValue.ContentBounds != Rect.Empty && args.OldValue.ContentBounds != args.NewValue.ContentBounds)  

            {  

                (Diagram.Info as IGraphInfo).BringIntoCenter(args.NewValue.ContentBounds);  

            }  

        }  

 

Sample link : https://www.syncfusion.com/downloads/support/forum/145445/ze/FlowDiagram_XAML523627678 

Regards, 

Ramya T 

[Xamarin Hunter]

Hi Utemar, 

 

Reported Issue : Could not able to scroll the diagram vertically.  

 

We have analyzed the provided sample and able to reproduce the reported issue. We have provided modified code example and sample for this. Please find the code example and sample link below.  

 

Code Example:   

 

        private void MainWindow_ViewPortChangedEvent(object sender, ChangeEventArgs<object, ScrollChanged> args)  

        {  

            // This condition is used to check whether the bounds is not empty and the old bounds and new bounds are not equals to each other.  

            if (args.NewValue.ContentBounds != Rect.Empty && args.OldValue.ContentBounds != args.NewValue.ContentBounds)  

            {  

                (Diagram.Info as IGraphInfo).BringIntoCenter(args.NewValue.ContentBounds);  

            }  

        }  

 

Sample link : https://www.syncfusion.com/downloads/support/forum/145445/ze/FlowDiagram_XAML523627678 

Regards, 

Ramya T 

First of all, thank you for your works to solve my problem. But, my problem is still going on.

Actually, my aim is simple: I want to be located my sfdiagram as a vectorel like width unit star *. If I change window size such a maximize, smaller or bigger; then SfDiagram should be always shown horizontal center and should be up-down via vertical scroll bar.

In your lastly response (there is more progressing my problem to solve), when my app is deployed, SfDiagram is located horizontal center and allows vertical scroll bar very well although the offset of all nodes adjust to 0. So far everything is fine.
On the another hand, it happens only startup. When I change page size window size, SfDiagram location is still same. SfDiagram should be located  as avectorel.

Here is sample pictures:

First Picture belongs to StartUp and Everything is fine



Second Picture belongs to the state which I bigger window size. SfDiagram could not be located horizontal center; just vertical scroll bar be allowed.



I want to achieve two condition at the same time.

I've attached lastly project. Please check it.

Attachment: FlowDiagram_XAML_7b9ce746.rar

[Ramya Thirugnanam]

Hi Utemar, 

 

Requirement: Content always at the center of the viewport  

 

We have analyzed your requirement and modified the provided sample. In the sample, we have checked conditions in ViewPortChanged event to achieve your requirement.  We have provided code example and modified sample for this. Please find the modified sample and code example below.  

   

Code Example: 

 

        private void MainWindow_ViewPortChangedEvent(object sender, ChangeEventArgs<object, ScrollChanged> args)  

        {  

            var Item = args.Item as SfDiagram;  

            var horizontaloffset = Item.ScrollSettings.ScrollInfo.HorizontalOffset;  

            var dummyRect = new Rect(0,0,0,0);  

            if ((args.OldValue.ContentBounds == dummyRect && args.NewValue.ContentBounds != dummyRect) ||  

                (args.NewValue.ContentBounds != Rect.Empty &&  

                Math.Round(Math.Abs(horizontaloffset), 0) != Math.Round(Item.ScrollSettings.ScrollInfo.ViewportWidth / 2, 0)))  

            {  

                (Diagram.Info as IGraphInfo).BringIntoCenter(args.NewValue.ContentBounds);  

            }  

        }  

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/145445/ze/FlowDiagram_XAML-606297707  

Regards,   

Ramya T   

[Xamarin Hunter]

Hi Utemar, 

 

Requirement: Content always at the center of the viewport  

 

We have analyzed your requirement and modified the provided sample. In the sample, we have checked conditions in ViewPortChanged event to achieve your requirement.  We have provided code example and modified sample for this. Please find the modified sample and code example below.  

   

Code Example: 

 

        private void MainWindow_ViewPortChangedEvent(object sender, ChangeEventArgs<object, ScrollChanged> args)  

        {  

            var Item = args.Item as SfDiagram;  

            var horizontaloffset = Item.ScrollSettings.ScrollInfo.HorizontalOffset;  

            var dummyRect = new Rect(0,0,0,0);  

            if ((args.OldValue.ContentBounds == dummyRect && args.NewValue.ContentBounds != dummyRect) ||  

                (args.NewValue.ContentBounds != Rect.Empty &&  

                Math.Round(Math.Abs(horizontaloffset), 0) != Math.Round(Item.ScrollSettings.ScrollInfo.ViewportWidth / 2, 0)))  

            {  

                (Diagram.Info as IGraphInfo).BringIntoCenter(args.NewValue.ContentBounds);  

            }  

        }  

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/145445/ze/FlowDiagram_XAML-606297707  

Regards,   

Ramya T   

Thanks for your solutions. Best regards.

[Ramya Thirugnanam]

Hi Utemar, 

 

Thanks for update. 

 

Regards, 

Ramya T