Hi,
I’m using the Diagram control in a LightSwitch application. The custom control occupies all the available space on the the screen. But when I drag some node to the bottom the diagram resizes making the parent control to have vertical scrollbars.
I want to prevent that. The scrollbars should only appear in the Diagram control. The size should be only the available space on the screen.
Is there anyway to prevent the Diagram to resize?
Thanks in advance
Rodrigo Guerreiro
So your custom control includes a Diagram that is changing size due to the user dragging a node? That means you haven’t specified a Width and a Height, and the Panel containing the Diagram isn’t arranging it with a defined size?
I would have expected that dragging a node very near to the edge of the diagram (actually the DiagramPanel) would cause the size of the DiagramPanel.DiagramBounds to increase. Autoscrolling would cause it to keep going in that direction. The DiagramBounds being bigger than what can be shown in the DiagramPanel would cause scrollbars to appear.
So are you sure that the scrollbars belong to your own ScrollViewer containing other elements and your Diagram?
You can disable autoscrolling by setting the DiagramPanel.AutoScrollRegion property to a zero Thickness. You can do that either in the ControlTemplate for the Diagram or in a Diagram.TemplateApplied event handler.
There are other DiagramPanel properties that might get you other behavior that you want.
Maybe I should simplify my question :)
My Diagram keeps resizing to the bottom when I drag nodes to the bottom. I want to drag the nodes there but I don’t want the Diagram to resize the area. I just want the scrollbars to appear.
Of course that when this happens the scrollbars appear in the parent control (it has a scrollviewer). But that is a side effect.
Could you show the definition of your ScrollViewer and its contents, including your Diagram? I don’t see how you are getting the Diagram to increase its size as the user drags a node.
Unfortunately I cannot show you the definition, and I’m unable on my time frame to build a sample just to show you. Perhaps later on the project that I’m developing.
Thanks anyway ;)
walter,
I’ve developed a sample that replicates the behavior that I’m having. How can I send it to you?
Basically, this is how it looks:
<Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="1" Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch">
<Border Margin="5 5 5 5" HorizontalAlignment="Stretch">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="Field 1" VerticalAlignment="Center" />
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Center" />
</StackPanel>
</Border>
<Border Margin="5 5 5 5" HorizontalAlignment="Stretch">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="Field 2" VerticalAlignment="Center" />
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Center" />
</StackPanel>
</Border>
<Border Margin="5 5 5 5" HorizontalAlignment="Stretch">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<TextBlock Text="Field 3" VerticalAlignment="Center" />
<TextBox HorizontalAlignment="Stretch" VerticalAlignment="Center" />
</StackPanel>
</Border>
</StackPanel>
<local:OrgChartEditor HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalAlignment="Stretch" VerticalContentAlignment="Stretch"
Grid.Row="1" Grid.Column="0" />
</Grid>
</Grid>
</ScrollViewer>
</Grid>
In order to replicate the behavior, you need to keep adding nodes to the last leaf. When the diagram height overcomes the height of the OrgChartEditor control, this control resizes, making vertical scrollbar in the parent control to appear.
Thanks in advance
Rodrigo Guerreiro
You are trying to size the Diagram to expand to the remaining area, because it is in Grid cells that always have star-sizing. That’s quite common.
If you remove the container, everything works just the way I think you want.
It’s odd, because using precisely the same XAML in WPF had different behavior. In WPF the DiagramPanel inside the Diagram is just measured once with an available size of InfinityxInfinity. In Silverlight it is repeatedly measured with an available size of InfinityxInfinity. I don’t know which one is correct.
So this is a subtle incompatibility of ScrollViewer between WPF and Silverlight. Yet another one among countless many.
The Silverlight folks would probably say “you can get what you want without the ScrollViewer, so don’t use it”.
Unfortunately I can’t remove the ScrollViewer. There’s no other way?
Well, if you don’t want the Diagram to change height, set its Height. Or in this case the Height of the local:OrgChartEditor.
Maybe there’s something about the definition of local:OrgChartEditor. Is it another UserControl?
Yes it is. It’s a copy of the OrgChartEditor from your samples.
walter,
I’ve got another question but it’s related with this.
First select some node and make the scrollbar appear by addind nodes to the bottom leaf. When the scrollbar appears in the parent ScrollViewer, scroll all the way down. Now try to select another node. You’re unable to select the nodes. It seems that it lost the mouse pointer position. Can you help me with that?
I’m sorry, but I cannot reproduce the problem. I’m using your XAML, but replacing a go:Diagram for the local:OrgChartEditor. I set the Diagram.Layout to be a GridLayout with WrappingColumn=“1”. I added a Button to add a node data to the model’s NodesSource, within a transaction. I’m using GoSilverlight 1.1.8.3.
If you are going to have a ScrollViewer surrounding most of the controls on your page, I still think it doesn’t make sense to have the Diagram expand arbitrarily – I would set a MaxHeight. That way when the diagram/model gets big, the Diagram will automatically show its own scrollbars as needed.
I have a sample that replicates this behavior. Can I send it to you?
Sure. I hope it’s small and simple. Send it to GoXam at our domain.
Sure it’s small :)
I’ve already sent it to you with some screenshots that I hope can be of help.