Hi Stoyo

I am placing the diagramLite control in ScrollViewer control. The ScrollViewer control is placed inside the Grid control and this Grid is resizeable.

Now whenerver I resize the Grid, my scrollviewer control gets resized according to same but diagram lite control doesn't get resized automatically. When the nodes in the diagram control are moved within a control I am calling the ResizeToFitItems function and if diagram controls width and height is more than the grid cells width and height, scroll bar gets visible.

Is there any way by which, Diagram control occupies the width and height of the grid cell and when there are more items it gets automatically scrollbars.

For eq.
     <Grid x:Name="LayoutRoot"  Background="AliceBlue" ShowGridLines="True">
           
           <Grid.ColumnDefinitions>
                 <ColumnDefinition />
                 <ColumnDefinition />
           </Grid.ColumnDefinitions>

           <ScrollViewer VerticalAlignment="Top" Padding="0"
                               HorizontalScrollBarVisibility="Auto" Margin="10">
                 <diag:Diagram x:Name="diagram" BackBrush="#fefefe" IsTabStop="True" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="10"
                        HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
           </ScrollViewer>
       <basic:GridSplitter Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Right" IsTabStop="False"/>
       <ScrollViewer Grid.Column="1" VerticalAlignment="Top" Padding="0"
                               HorizontalScrollBarVisibility="Auto" Margin="10">
                 <diag:Diagram x:Name="ddtarget" BackBrush="#fefefe" IsTabStop="True"  />
           </ScrollViewer>

           <Canvas x:Name="ddplane" Grid.ColumnSpan="2">
                 <Rectangle x:Name="test" Width="100" Height="100" Fill="#60eeeeff" Stroke="Black"
                                StrokeThickness="1" Canvas.Left="400" Canvas.Top="0" Opacity="0" Visibility="Collapsed"  />
           </Canvas>

     </Grid>

In above eq. when loaded I see scrollbar and resizing the grid, shows same area for diagram control. 

Instead of this, by default I don't want to see scrollbars. If I resize and there are some nodes which becomes invisible in screen then scrollbars should appear. Adding new control which is partially on the margin set (space between diagram and actual scroll bar) then the diagram control should get resized.


Can you provide it with some example.

Hi Stoyo

I added the events as per you information. But some how I am not able get rid of Vertical ScrollBar.

Following is the updated xaml code and code behind code -

Xaml code -

<UserControl x:Class="sldragdrop.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:basic="clr-namespace:System.Windows.Controls;assembly=System.Windows.Contr
ols"             
xmlns:diag="clr-namespace:MindFusion.Diagramming.Silverlight;assembly=DiagramLit
e"
mc:Ignorable="d" >

<Grid x:Name="LayoutRoot"  Background="AliceBlue" ShowGridLines="True">

<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<ScrollViewer x:Name="ScrollViewer" VerticalAlignment="Top" Padding="0" 
  Margin="10">
<diag:Diagram x:Name="diagram" BackBrush="#fefefe" IsTabStop="True" Margin="20"
                        />
</ScrollViewer>
       <basic:GridSplitter Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Right" IsTabStop="False"/>
       <ScrollViewer Grid.Column="1" VerticalAlignment="Top" Padding="0"
  HorizontalScrollBarVisibility="Auto" Margin="10">
<diag:Diagram x:Name="ddtarget" BackBrush="#fefefe" IsTabStop="True"  />
</ScrollViewer>

<Canvas x:Name="ddplane" Grid.ColumnSpan="2">
<Rectangle x:Name="test" Width="100" Height="100" Fill="#60eeeeff" Stroke="Black"
   StrokeThickness="1" Canvas.Left="400" Canvas.Top="0" Opacity="0" Visibility="Collapsed"  />
</Canvas>

</Grid>
</UserControl>

Code behind handlers
----------------------------

       void ScrollViewer_SizeChanged(object sender, SizeChangedEventArgs e)
       {
           SetBounds();
       }

       void diagram_NodeModified(object sender, NodeEventArgs e)
       {
           SetBounds();
       }


       void diagram_NodeCreated(object sender, NodeEventArgs e)
       {
           SetBounds();
       }

       void SetBounds()
       {
           Rect diagramRect = diagram.GetContentBounds(false, true);
           double height = ScrollViewer.ActualHeight;
           double width = ScrollViewer.ActualWidth;
           diagram.Bounds = new Rect(Math.Min(diagramRect.Left, 0), Math.Min(diagramRect.Top, 0), Math.Max(diagramRect.Left + diagramRect.Width, width), Math.Max(diagramRect.Top + diagramRect.Height, height));
       }

Adding nodes on left and top side resizes the control and newly added nodes and left-top aligned but adding nodes on right and bottom side doesn't work.

-Rajesh

Hi Stoyo

Ya. I tried with setting the VerticalScrollBarVisibility to "Auto".

Also I tried by setting the ScrollViewer.VerticalScrollBarVisibility="Auto" on diagram control and still it is not working.

Will you please check it and provide me fix for same.

-Rajesh

Hi Stoyo

I checked with the by substracting few pixels and with this scrollbar gets removed only after if I resize the control once the application is visilbe in browser.

With the suggested implmentation, scrollbar gets visible when I run the application and after that resizing the grid or browser window removes them.

Will you provide me some example which can fix this issue ?

Also, let me know whether it is necessary to use "ScrollBar" as a container control for diagrams to display scrollbars ?

Isn't it possible that without using these events and explict scroll container, I get scrollbars in next version of Diagram lite automatically?

Hello

I am having this problem also, I have tried many scenarios.

My application framework loads a page by calling a usercontrol within the main framework.

Its this usercontrol that is where my grid sits which displays the content.

<!-- from application framework -->
<scrollviewer x:Name="SomePage">

<!-- Page content -->
<Grid x:Name="GridLeft">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<ScrollViewer x:Name="DiagramParent"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible"
Grid.Column="1">
<diag:Diagram x:Name="diagram"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Grid.Column="1"
ModificationStart="AutoHandles"/>
</ScrollViewer>
<Slider x:Name="ZoomSlider"
Grid.Column="0"
VerticalAlignment="Top"
Width="190"
Height="10"
Value="33"
Maximum="100"
Minimum="0"
ValueChanged="Slider_ValueChanged"
Margin="30,20,30,0"/>
<TextBlock Grid.Column="0"
Text="Set Zoom"
Foreground="White" Margin="10,0,0,0"
VerticalAlignment="Top"
HorizontalAlignment="Left" />
</Grid>
<!-- end of page content -->
<!-- from app framework -->
</ScrollViewer>


I am having a similar problem to Rajesh, no matter what I do with the bounds settings of the diagram, the scroll bars do not work, even if made visible as above. The auto does not even show the scroll bars, even though the content of the diagram 'appears' to go beyond the boundaries of the diagram.

The UI I am trying to achieve is that the user can see the entire diagram (in this case an organisation chart) and can zoom into any part of the chart.

Ideally I would like to implement a drag, so the user can drag around the diagram too, and double click on an item to bring it to the centre at 100%, similar to deep zoom but for a diagram.

Am I being too optimistic?

Anyhow, the scrollbar issue is the initial one for me. Can you help?

Love the components by the way :-)

Mark.

Hi Markjakes

I resolved the issue using following points -

- By default, I provided the diagram control pre-defined witdh and height  ( for eq. Say 10 and aligned it centrally )

- The diagram control is within a scrollviewer and horizontal and vertical scroll bars are set to auto.

- The drop event is handled on the ScrollViewer control and the position where drop is occured, I set the bounds in such a way that it new node is drawn on the dropped position.

This way I can drop the control out side the diagram control, and as the diagram bounds increases I have scroll bars automatically.

-Rajesh