Show the Grid over all Nodes

Hi Walter,
is it possible to change the Appearance of the GridPattern so that it is visible over all other Nodes.
The customer inserts a very big Node as some kind of Backgroundimage and after that isn’t able to position new Nodes because the Gridpattern is overlayed by this big Node.

I think if you look at the Children of the DiagramPanel, you will see that one of them is a GridPattern. I believe you can re-order the list of Children to suit your needs.

Hi Walter, I removed it from the beginning of the children-List and added it again to the end, but the visual doesn’t change. It’s still behind all.

Aren’t the other elements of the DiagramPanel all of the Layers in your Diagram?

Sure, they are all in the 2nd NodeLayer from above and the GridPattern is the last after my modification.
Screenshot 2024-02-01 173256

Then I don’t understand why the GridPattern isn’t drawn after those other layers.
Hmmm, I had forgotten about Panel.ZIndex. Maybe there’s some setting of Panel.ZIndex?

I’m still using Version 2.2.3. I just use go:Node.ZOrder. But this is all in the 2nd NodeLayer.

The Part.ZOrder property will affect the order within a Layer. It will not affect the order of the Layers themselves. Nor the GridPattern, along with the Layers.

Yes I know that. I just want to make it clear here what I’m using.
Any idea for the real problem?

Try executing this call to DiagramPanel.Unsupported:

      myDiagram.TemplateApplied += (s, e) => myDiagram.Panel.Unsupported(24, false);

That will disable the caching of the background grid.

Hi Walter,
thank you - this is working.
Do you have a suggestion for the optimal place to do the reorder of the children-list?
For now I do this when changing to what I call “EditMode”, where the user is able to move the nodes. But I think there must be a better place.

P.S. Now I see there’s still a problem. The GridPattern doesn’t go away when not in EditMode. I remains visible, even if GridVisible is set to False.

Even if you set its Visibility?

Yes, it remains visible even if I set the GridPattern itself and the Paths inside the GridPattern to “Hidden”.

Have you called Unsupported(24, true)?

(I’ll look into this when I get a chance.)

That would be nice - thank you.

Here’s what I tried in a random sample that I had lying around. Ignore the all of the templates, since they don’t matter to this issue.

The buttons to toggle the ZIndex between 3 and -3 and to toggle the Visibility property work well.

<!-- Copyright © Northwoods Software Corporation, 2008-2024. All Rights Reserved. -->

<UserControl x:Class="LDLbug.LDLbug"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:go="http://schemas.nwoods.com/GoXam">

  <UserControl.Resources>
    <!-- show either a "+" or a "-" as the Button content -->
    <go:BooleanStringConverter x:Key="theButtonConverter" TrueString="-" FalseString="+" />

    <DataTemplate x:Key="NodeTemplate">
      <go:NodePanel Sizing="Auto" go:Part.SelectionAdorned="True">
        <go:NodeShape go:NodePanel.Figure="Ellipse" Stroke="Black" StrokeThickness="1"
                      go:Node.PortId="" go:Node.LinkableFrom="True" go:Node.LinkableTo="True" Cursor="Arrow" />
        <TextBlock Text="{Binding Path=Data.Text}" />
      </go:NodePanel>
    </DataTemplate>
    
    <DataTemplate x:Key="GroupTemplate">
      <Border BorderThickness="1" BorderBrush="Gray"
              go:Part.SelectionAdorned="True"
              go:Node.LocationElementName="myGroupPanel"
              Background="LightYellow">
        <StackPanel>
          <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Background="Yellow">
            <Button x:Name="myCollapseExpandButton" Click="CollapseExpandButton_Click"
                Content="{Binding Path=Group.IsExpandedSubGraph, Converter={StaticResource theButtonConverter}}"
                Width="20" Margin="0 0 5 0" />
            <Button x:Name="recomputeLayout"
                    Content="X"
                    Width="20" Margin="0 0 5 0" />
            <TextBlock Text="{Binding Path=Data.Text}" FontWeight="Bold" />
          </StackPanel>
          <go:GroupPanel x:Name="myGroupPanel" Padding="5" />
        </StackPanel>
        <go:Group.Layout>
          <go:LayeredDigraphLayout Direction="90" />
        </go:Group.Layout>
      </Border>
    </DataTemplate>
  </UserControl.Resources>

  <StackPanel>
    <go:Diagram x:Name="myDiagram" Padding="10"
                NodeTemplate="{StaticResource NodeTemplate}"
                GroupTemplate="{StaticResource GroupTemplate}"
                GridVisible="True">
      <go:Diagram.Layout>
        <go:LayeredDigraphLayout Direction="90" />
      </go:Diagram.Layout>
      <go:Diagram.GridPattern>
        <go:GridPattern CellSize="10 10" IsHitTestVisible="False" Panel.ZIndex="-3">
          <Path Stroke="LightBlue" StrokeThickness="1"
go:GridPattern.Figure="HorizontalLine" />
          <Path Stroke="LightGreen" StrokeThickness="1"
go:GridPattern.Figure="VerticalLine" />
        </go:GridPattern>
      </go:Diagram.GridPattern>
    </go:Diagram>
    <StackPanel Orientation="Horizontal">
      <Button Grid.Row="2" Click="Button_ZIndex">Toggle ZIndex</Button>
      <Button Grid.Row="3" Click="Button_Visibility">Toggle Visibility</Button>
    </StackPanel>
  </StackPanel>
</UserControl>
/* Copyright © Northwoods Software Corporation, 2008-2023. All Rights Reserved. */

using System;
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Controls;
using Northwoods.GoXam;
using Northwoods.GoXam.Model;

namespace LDLbug {
  public partial class LDLbug : UserControl {
    public LDLbug() {
      InitializeComponent();
      myDiagram.TemplateApplied += (s, e) => myDiagram.Panel.Unsupported(24, false);

      var model = new GraphLinksModel<NodeData, String, String, LinkData>();
      model.NodesSource = new ObservableCollection<NodeData>() {
        new NodeData() { Key = "0", Text = "root", IsSubGraph = true },
        new NodeData() { Key = "1", Text = "Alpha Alpha Alpha", IsSubGraph = true, SubGraphKey = "0" },
        new NodeData() { Key = "2", Text = "Beta", SubGraphKey = "1" },
        new NodeData() { Key = "3", Text = "Gamma Gamma Gamma", IsSubGraph = true, SubGraphKey = "0" },
        new NodeData() { Key = "4", Text = "Delta", SubGraphKey = "3"  },
      };
      model.LinksSource = new ObservableCollection<LinkData>() {
        new LinkData() { From = "1", To = "3" },
        new LinkData() { From = "2", To = "4" },
      };
      model.Modifiable = true;
      myDiagram.Model = model;
    }

    private void CollapseExpandButton_Click(object sender, RoutedEventArgs e) {
      // the Button is in the visual tree of a Node
      Button button = (Button)sender;
      Group sg = Part.FindAncestor<Group>(button);
      if (sg != null) {
        NodeData subgraphdata = (NodeData)sg.Data;
        if (!subgraphdata.IsSubGraph) return;
        // always make changes within a transaction
        myDiagram.StartTransaction("CollapseExpand");
        // toggle whether this node is expanded or collapsed
        sg.IsExpandedSubGraph = !sg.IsExpandedSubGraph;
        myDiagram.CommitTransaction("CollapseExpand");
      }
    }

    private void Button_ZIndex(object sender, RoutedEventArgs e) {
      var grid = myDiagram.GridPattern;
      Panel.SetZIndex(grid, (Panel.GetZIndex(grid) > 0) ? -3 : 3);
    }

    private void Button_Visibility(object sender, RoutedEventArgs e) {
      var grid = myDiagram.GridPattern;
      grid.Visibility = (grid.Visibility == Visibility.Visible) ? Visibility.Hidden : Visibility.Visible;
    }
  }

  public class NodeData : GraphLinksModelNodeData<String> {
  }

  public class LinkData : GraphLinksModelLinkData<String, String> {
  }
}

Thank you, it’s fully working now.