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

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

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>

14 Replies

RT Ramya Thirugnanam Syncfusion Team June 24, 2019 06:28 AM UTC

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> 
 
 
 
Regards, 
Ramya T 



XH Xamarin Hunter replied to Ramya Thirugnanam June 26, 2019 12:36 AM UTC

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> 
 
 
 
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.  


RT Ramya Thirugnanam Syncfusion Team June 26, 2019 05:48 AM UTC

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 



XH Xamarin Hunter replied to Ramya Thirugnanam June 26, 2019 08:10 AM UTC

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 


Picture

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: 

   
       
       
           
               
               
                   
                   
                       
                           
                           
                               
                           
                       
                   
                   
                   
                       
                           
                               
                           
                       
                   
                   
                   
                       
                           
                               
                           
                       
                   
               
           
           
               
               
                   
                   
               
           
       
   


XH Xamarin Hunter replied to Ramya Thirugnanam June 26, 2019 08:14 AM UTC

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


RT Ramya Thirugnanam Syncfusion Team June 26, 2019 09:34 AM UTC

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  



XH Xamarin Hunter replied to Ramya Thirugnanam June 27, 2019 11:51 PM UTC

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.


RT Ramya Thirugnanam Syncfusion Team June 28, 2019 07:18 AM UTC

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   



XH Xamarin Hunter replied to Ramya Thirugnanam June 28, 2019 09:50 AM UTC

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


RT Ramya Thirugnanam Syncfusion Team July 1, 2019 10:37 AM UTC

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);  
            }  
        }  
 
Regards, 
Ramya T 



XH Xamarin Hunter replied to Ramya Thirugnanam July 1, 2019 04:49 PM UTC

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);  
            }  
        }  
 
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


RT Ramya Thirugnanam Syncfusion Team July 2, 2019 08:43 AM UTC

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);  
             
         
 
Regards,   
Ramya T   



XH Xamarin Hunter replied to Ramya Thirugnanam July 5, 2019 12:56 PM UTC

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);  
             
         
 
Regards,   
Ramya T   


Thanks for your solutions. Best regards.


RT Ramya Thirugnanam Syncfusion Team July 8, 2019 05:47 AM UTC

Hi Utemar, 
 
Thanks for update. 
 
Regards, 
Ramya T 


Loader.
Up arrow icon