Margin Problem After Dropping

noName_ · February 23, 2012, 9:23am

Hi,
There are lots of groups on my diagram.When user expand any of them, it is expanded within a grid control and innately its size grows up.After every expanding , I am organizing the groups on diagram with :

“myDiagram.LayoutManager.LayoutDiagram(LayoutInitial.InvalidateAll, true);”

It works but there is a problem .When any group is expanded, the margins between groups grows and margin is as big as the new size of expanded group. It looks bad…
I just want to expand related group. The margin between the groups must be the same as defined in xaml. ( By the way I put the groups in a border and the margin iis defined in border. )

How can I solve this issue??
Thanks for the replies …

walter · February 23, 2012, 9:29am

I’m not sure what you mean, but what you are doing is not the normal way to get the result that I think you want.

Instead, make sure that all layouts have Conditions=“Standard GroupSizeChanged”.
The standard conditions for a layout to be re-performed are adding or removing nodes or links.
Adding the “GroupSizeChanged” condition means that whenever a Group changes size, the layout containing that group will be invalidated and will soon be performed again.

The “Grouping” sample does this, for example.

noName_ · February 23, 2012, 10:15am

My group template is :

                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding Path=Data.Name}" FontWeight="Bold"  VerticalAlignment="Top" HorizontalAlignment="Center" FontFamily="Times New Roman" FontSize="10" Foreground="Black" TextWrapping="Wrap"  />
                        <Button x:Name="btnCollapseExpand" FontWeight="Bold"  Content="{Binding Path=Group.IsExpandedSubGraph, 
                       Converter ={StaticResource theButtonConverter}}"  Width="45" Height="20" Click="btnCollapseExpandGrid_Click" Margin="5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                            </StackPanel>
                 </Border>
                    <go:GroupPanel x:Name="myGroupPanel" Padding="5"/>                       
                  </StackPanel>                     
                    <go:Group.Layout>
                        <go:LayeredDigraphLayout Direction="90" Conditions="Standard GroupSizeChanged" />
                    </go:Group.Layout>
                </StackPanel>
            </Border>
    </DataTemplate>

I added

" go:Group.Layout
<go:LayeredDigraphLayout Direction=“90” Conditions=“Standard GroupSizeChanged” />
</go:Group.Layout>"

It gives me an except at run time.It doesn’t giveme the error detail because it is an error in xaml .

There are groups in my diagram . When I expand a group , the size of group increases beacuse of the grid control which is shown in it. And the margins between groups increases very much. I want to expand the group which user expands, the other groups on the diagram should be shown with the same margins as described in xaml.
I hope I explain my problem this time…:(

Thanks again…

walter · February 23, 2012, 1:06pm

What version are you using, on which platform?

With older versions for Silverlight, you need to say ConditionFlags="…".
But this should not be necessary with 1.3 and Silverlight 4, since Silverlight 4 improved its XAML implementation.

noName_ · February 24, 2012, 1:40am

I am using Silverlight 5, I tried
ConditionFlags="…". But It doesn’t works. Is there anything which may cause this problem?

walter · February 24, 2012, 7:31am

The inconsistent indentation makes it hard to tell, but it sure looks like you did not apply that attached property to the top level element.

noName_ · February 27, 2012, 2:06pm

Hi Walter, I haven't found any solution for my problem.I am sending my templated. There are 3 Group Templates which I used. When user expands nodes which is decribed with GroupTemplate1, it expands related nodes in it which describced with GroupTemplate2, and hierarchically , when second nodes are expanded, the nodes are shown which described with GroupTemplate2.

Node1( GroupTemplate1) -> Node2(GroupTemplate2) -> Node3(GroupTemplate3)

      <Border x:Name="myBorder" CornerRadius="5"
          BorderBrush="Transparent" BorderThickness="0"                               
          diagram:Node.LocationElementName="myGroupPanel" diagram:Group.IsSubGraphExpanded="False"        
          HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}">              
                <StackPanel FlowDirection="LeftToRight" >
                    <StackPanel Orientation="Vertical" Margin="2">
                        <Button x:Name="btnCollapseExpand"  Content="{Binding Path=Group.IsExpandedSubGraph, 
                    Converter={StaticResource theButtonConverter}}"  Width="30"  Click="btnCollapseExpand_Click" VerticalAlignment="Top" HorizontalAlignment="Center"/>
                        <TextBlock Text="{Binding Path=Data.Name}" Margin="3" FontWeight="Bold"  VerticalAlignment="Top" HorizontalAlignment="Center" FontFamily="Times New Roman" FontSize="10" Foreground="Black" TextWrapping="Wrap"  />
                        <go:NodePanel HorizontalAlignment="Center" Sizing="Auto"  >
                            <Path go:NodePanel.Figure="Database"  Stroke="Black" StrokeThickness="0.8"
                  go:Part.SelectionAdorned="True"
                  go:Node.LocationElementName="myGroupPanel"
                  go:Group.IsSubGraphExpanded="False"
                  go:Part.Resizable="True" Width="80" Height="65" >                                
                      <Path.Fill>
                        <LinearGradientBrush StartPoint="0.0 0.0" EndPoint="1.0 0.0">
                            <LinearGradientBrush.GradientStops>
                                <GradientStop Color="{Binding Path=Data.Color,
                               Converter={StaticResource theStringColorConverter}}"
                               Offset="0.0" />
                        <GradientStop Color="White" Offset="0.5" />
                        <GradientStop Color="{Binding Path=Data.Color,
                        Converter={StaticResource theStringColorConverter}}"
                         Offset="1.0" />
                        </LinearGradientBrush.GradientStops>
                            </LinearGradientBrush>
                     </Path.Fill>
                    </Path>
                   </go:NodePanel>
                     </StackPanel>
                    <go:GroupPanel x:Name="myGroupPanel"  AllowDrop="True"
                            SurroundsMembersAfterDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                </StackPanel>                           
                <go:Group.Layout>
                    <diagramlayout:GridLayout Sorting="Forward" CellSize="12 16" ConditionFlags="Standard GroupSizeChanged" ></diagramlayout:GridLayout>
                </go:Group.Layout>
            </Border>
        </DataTemplate>

    <DataTemplate x:Key="GroupTemplate2">
            <Border x:Name="myBorder" CornerRadius="5"
          BorderBrush="Transparent" BorderThickness="0"                               
          diagram:Node.LocationElementName="groupPanelHost" diagram:Group.IsSubGraphExpanded="False"        
          HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}">
                <StackPanel FlowDirection="LeftToRight" >
                    <StackPanel Orientation="Vertical" Margin="2">
                        <Button x:Name="btnCollapseExpand2"  Content="{Binding Path=Group.IsExpandedSubGraph, 
                    Converter={StaticResource theButtonConverter}}"  Width="30"  Click="btnCollapseExpand2_Click" VerticalAlignment="Top" HorizontalAlignment="Center"/>
                        <TextBlock Text="{Binding Path=Data.Name}" Margin="3" FontWeight="Bold"  VerticalAlignment="Top" HorizontalAlignment="Center" FontFamily="Times New Roman" FontSize="10" Foreground="Black" TextWrapping="Wrap"  />
                        <go:NodePanel HorizontalAlignment="Center" Sizing="Auto"  >
                            <Path go:NodePanel.Figure="Terminator"  Stroke="Black" StrokeThickness="0.8"
                  go:Part.SelectionAdorned="True"
                  go:Node.LocationElementName="myGroupPanel"
                  go:Group.IsSubGraphExpanded="False"
                  go:Part.Resizable="True" Width="80" Height="65" >
                                <Path.Fill>
                                    <LinearGradientBrush StartPoint="0.0 0.0" EndPoint="1.0 0.0">
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="{Binding Path=Data.Color,
                               Converter={StaticResource theStringColorConverter}}"
                               Offset="0.0" />
                                            <GradientStop Color="White" Offset="1.0" />
                                            <GradientStop Color="{Binding Path=Data.Color,
                        Converter={StaticResource theStringColorConverter}}"
                         Offset="1.0" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Path.Fill>
                            </Path>
                        </go:NodePanel>
                    </StackPanel>
                    <go:GroupPanel x:Name="groupPanelHost"  AllowDrop="True"
                            SurroundsMembersAfterDrop="True" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
                </StackPanel>
                <go:Group.Layout>
                    <diagramlayout:GridLayout Sorting="Forward" CellSize="12 16" ConditionFlags="Standard GroupSizeChanged" ></diagramlayout:GridLayout>
                </go:Group.Layout>
            </Border>
        </DataTemplate>

    <DataTemplate x:Key="GroupTemplate3"     >
            <Border x:Name="myBorder" CornerRadius="5"
          BorderBrush="LightGray" BorderThickness="0.5"    
          Background="#FFD773"
          Margin="5"
          diagram:Node.LocationElementName="myGroupPanelGrid"
          diagram:Group.IsSubGraphExpanded="False"        
          HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
          go:Node.Location="{Binding Path=Data.Location, Mode=TwoWay}"
          >
          <StackPanel FlowDirection="LeftToRight" >             
              <StackPanel Orientation="Vertical"  Margin="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Border x:Name="myBorderGrid" Background="Transparent" CornerRadius="5" 
                         BorderBrush="Transparent" BorderThickness="0.5" Width="140" Height="50"
                         HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                                 diagram:Node.LocationElementName="myGroupPanelGrid" 
                                >
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding Path=Data.Name}" FontWeight="Bold"  VerticalAlignment="Top" HorizontalAlignment="Center" FontFamily="Times New Roman" FontSize="10" Foreground="Black" TextWrapping="Wrap"  />
                        <Button x:Name="btnCollapseExpand3" FontWeight="Bold"  Content="{Binding Path=Group.IsExpandedSubGraph, 
                       Converter ={StaticResource theButtonConverter}}"  Width="45" Height="20" Click="btnCollapseExpand3_Click" Margin="5" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                                <TextBlock Text="" x:Name="txtAlert" FontWeight="Bold"  VerticalAlignment="Top" HorizontalAlignment="Center" FontFamily="Times New Roman" FontSize="10" Foreground="Black" TextWrapping="Wrap"  />
                            </StackPanel>
                 </Border>
                    <go:GroupPanel x:Name="myGroupPanelGrid" Padding="5"/>                       
                  </StackPanel>
                    <go:Group.Layout>
                        <go:LayeredDigraphLayout Direction="90" ConditionFlags="Standard GroupSizeChanged" />
                    </go:Group.Layout>
                </StackPanel>
            </Border>
    </DataTemplate>

The picture shows how my program works. But I want it works as right side like showed.The margin Between nodes at Y axis , increases as much as the expanded nodes height. Out of the line which expanded nodes is on , other nodes on should be the same.How can I corecct this?

Thanks again for the replies..

walter · February 27, 2012, 2:42pm

The Margins on your Groups are small, so that would not explain the behavior that you show in the pictures.

Are the rectangles in your pictures all top-level Groups or Nodes? If so, what does your Diagram.Layout do?

noName_ · February 27, 2012, 2:56pm

I updated the post Walter.
There is one more group which I didn’t show at picture (1. degree group ).When user expands it (1. degree group) , the groups in it(second degree groups) are expanded. (The biggest rectangle in picture represents the 2. degree group.) When user expands 2. degree groups, the third degree groups are expanded. Finally when user expand 3. degree groups , the nodes (not group) in it are expanded.

I am using for diagram layout after every expand - collapse :

objectDiagram.LayoutManager.LayoutDiagram(LayoutInitial.InvalidateAll, true);

walter · February 27, 2012, 3:28pm

Right, but I was asking how you declared the Diagram.Layout.
Is the Diagram.Layout a GridLayout? If so, you need to set its CellSize=“5 5” or something else small.

You shouldn’t need to invalidate layouts programmatically.

noName_ · February 27, 2012, 3:52pm

Yes , I am using GridLayout and I set cell size as you said.

In the question , you can see these Layout settings.. Isn't it possible to edit this layout like I want.I should give this work tomorrow..:(

walter · February 27, 2012, 5:12pm

OK, so you are saying that the biggest rounded rectangle is from GroupTemplate2, right?
And it uses the Group.Layout that you just quoted?

When I try GridLayout with a small value for CellSize (and zeroes for the Spacing, to make it clearer), I get:

You can clearly see that the rows that have all short items in them are shorter than rows that have some tall items in them.

That’s what you wanted, yes?

Oh, what are the actual sizes for the big node and the smaller nodes inside the biggest group?

noName_ · February 29, 2012, 10:10am

Hi Walter ,
Thank a lot for your time. I tried to do settings in your last post, and I realized that I misses Alignment=“Position” property in my design.It works as I want :). But there is one more problem I have. The nodes which can be seen at page when page loaded are showed regularly. But There are nodes which can not be seen without any scrool bar move .These nodes overlap on each other.
How can I solve this issue?
Thanks in advance…

walter · February 29, 2012, 11:40am

I haven’t seen that bug. Can you reproduce it with any of the sample apps? Or can you tell me how to reproduce the bug in a separate app?

I’d also like to understand better what you are seeing. Consider just one “column” of overlapping nodes. Does it appear that it is the same node, but drawn multiple times? Or are they different nodes that happen to overlap each other?

noName_ · March 1, 2012, 12:55pm

Hi Walter , I have just put
Alignment=“Position” property , and margin problem is solved.When I expand big one node( big node in picture ), the small nodes overlaps on each other as I said at last post. But When I expand any node (small nodes in picture), it work without any bug.Overlapping problem does not exist. Again When I collapse the expanded node it works well again…I mean , When the small nodes are loaded for the first time, they overlaps on each other.But when any of these small nodes are expanded or collapses , it works as it should be…Why can this problem happens ?
Thanks very much for your time in advance…

walter · March 1, 2012, 1:21pm

You still haven’t stated what the value of Diagram.Layout is.
It makes it hard for me to help.

noName_ · March 1, 2012, 1:47pm

I am sorry , I should be missed it. I have used GridLayout for Diagram. My Diagram declaration is here

 <diagram:Diagram Grid.Row="1" x:Name="objectDiagram" GroupTemplateDictionary="{StaticResource GroupTemplatesDictionary}"  AllowDrop="True" Padding="10" HorizontalContentAlignment="Stretch"
                    VerticalContentAlignment="Stretch" NodeTemplate="{StaticResource NodeTemplateWithGrid}"  LinkTemplate="{StaticResource LinkTemplate}"
            GridVisible="True" GridSnapEnabled="True" ContextMenuEnabled="True" AllowClipboard="True" AllowCopy="True" AllowDelete="True" AllowDragOut="True"
                          AllowEdit="True" AllowGroup="True" AllowInsert="True" AllowLink="False" AllowMove="True" AllowPrint="True" AllowRelink="True" AllowReshape="True"
                          AllowResize="True" AllowRotate="True" AllowScroll="True" AllowSelect="True" AllowUndo="True" AllowUngroup="True" AllowZoom="True" >
            <diagram:Diagram.Layout>
                <diagramlayout:GridLayout Sorting="Forward"  Alignment="Position" CellSize="10 10"   ConditionFlags="Standard GroupSizeChanged"></diagramlayout:GridLayout>
            </diagram:Diagram.Layout>

            <diagram:Diagram.PartManager>
                <local:CustomPartManager />
                
                </diagram:Diagram.PartManager>

            <diagram:Diagram.LinkingTool>
                <diagramtool:LinkingTool PortGravity="20" TemporaryLinkTemplate="{StaticResource TemporaryLinkTemplate}" />
            </diagram:Diagram.LinkingTool>

            <diagram:Diagram.RelinkingTool>
                <diagramtool:RelinkingTool PortGravity="20" TemporaryLinkTemplate="{StaticResource TemporaryLinkTemplate}" />
            </diagram:Diagram.RelinkingTool>

            <diagram:Diagram.DraggingTool>
                <diagramtool:DraggingTool DraggableLinks="True" />
            </diagram:Diagram.DraggingTool>

            <diagram:Diagram.DragZoomingTool>
                <diagramtool:DragZoomingTool />
            </diagram:Diagram.DragZoomingTool>

            <diagram:Diagram.PanningTool>
                <diagramtool:PanningTool  />
            </diagram:Diagram.PanningTool>

            <diagram:Diagram.RotatingTool>
                <local:CustomRotatingTool SnapAngleMultiple="15" SnapAngleEpsilon="15" />
            </diagram:Diagram.RotatingTool>

            <diagram:Diagram.GridPattern>
                <diagram:GridPattern CellSize="10 10">
                    <Path Stroke="LightGray" StrokeThickness="0.2" diagram:GridPattern.Figure="HorizontalLine" />
                    <Path Stroke="LightGray" StrokeThickness="0.2" diagram:GridPattern.Figure="VerticalLine" />
                    <Path Stroke="LightGray" StrokeThickness="0.3" diagram:GridPattern.Figure="HorizontalLine" diagram:GridPattern.Interval="2" />
                    <Path Stroke="LightGray" StrokeThickness="0.3" diagram:GridPattern.Figure="VerticalLine" diagram:GridPattern.Interval="2" />
                    <Path Stroke="Gray" StrokeThickness="0.3" diagram:GridPattern.Figure="HorizontalLine" diagram:GridPattern.Interval="4" />
                    <Path Stroke="Gray" StrokeThickness="0.3" diagram:GridPattern.Figure="VerticalLine" diagram:GridPattern.Interval="4" />
                    <Path Stroke="Black" StrokeThickness="0.3" diagram:GridPattern.Figure="HorizontalLine" diagram:GridPattern.Interval="8" />
                    <Path Stroke="Black" StrokeThickness="0.3" diagram:GridPattern.Figure="VerticalLine" diagram:GridPattern.Interval="8" />
                </diagram:GridPattern>
            </diagram:Diagram.GridPattern>
        </diagram:Diagram>

And I have used GridLayout in all group templates , the GridLayout definitions are :

go:Group.Layout
<diagramlayout:GridLayout Sorting=“Forward” CellSize=“10 10” Arrangement=“LeftToRight” Alignment=“Position” ConditionFlags=“Standard GroupSizeChanged” ></diagramlayout:GridLayout>
</go:Group.Layout>

walter · March 1, 2012, 2:50pm

I just tried a Diagram and a GroupTemplate (both using a GridLayout with the same Conditions) along with nested groups, including one that is nested three deep. Everything worked just as I believe you would have expected. But let me try some more cases.

walter · March 1, 2012, 4:06pm

I can reproduce the problem. Clearly it has something to do with Groups, and perhaps nested groups.

The problem does not happen if you use a different layout, such as:
<go:TreeLayout Conditions=“Standard GroupSizeChanged” />
However, you probably cannot use this alternative layout because you probably want to have more than one column.

noName_ · March 2, 2012, 12:07am

Yes , you are right , I can not use this layout , my diagram have columns more tha one.
Have you got another solution for this problem?