The Planogram sample is primarily a demonstration of different ways to use GridPatterns and Group nodes. There are two main templates for groups. The first one is called a Rack (see "RackNodeTemplate" in Planogram.xaml). The purpose of a Rack node is to provide an area where you can "hang" boxes in an idealized store. The key part of this template is the GridPattern, as you can see in the XAML.

Notice there are separate Paths for each kind of line. This provides great flexibility in how grids are drawn. Each Path has the go:GridPattern.Figure, a Stroke, and an Interval property. This will draw the desired figure every [Interval] units in the grid. For example, if Interval="2", Figure="HorizontalLine", and Stroke="Black" then a black horizontal line would be drawn every two units in the grid.

An important note is that only visual appearances are defined in the GridPattern. The snapping behavior of the grid must be defined in the root visual element of the node using attached properties.

There are several properties for setting the snapping behavior of the grid. go:Part.DragOverSnapEnabled simply enables the snapping functionality by the DraggingTool. go:Part.DragOverSnapCellSize describes how big each individual cell is in the grid and is the unit used by the Interval property in the GridPattern class. go:Part.DragOverSnapCellSpot defines what spot in the cell the dragging node should snap to. Finally, go:Part.DragOverSnapOrigin is a point relative to the current element specifying where the origin of the grid is. This is necessary because the element that these properties are being set on does not have to be a GridPattern.

All of the bindings in this sample are there to make the properties modifiable within the application. For example, toggling the checkboxes next to "Major Gridlines" and "Minor Gridlines" toggles the go:GridPattern.Figure of the rack's GridPattern between "None" and "HorizontalLine"/"VerticalLine". Changing the go:GridPattern.Figure to "None" is a way of hiding that line, forcing the grid to treat it as if it doesn't exist.

The second main template is for "shelves" (see "ShelfNodeTemplate" in Planogram.xaml). The purpose of a Shelf is to force dragged over nodes to sit on it. This is accomplished by making the grid snap cell height the same as the height of that rectangle, and having the node's LocationSpot be at the bottom of the node.

A few other interesting things are demonstrated in this sample such as how to change the default adornments. Notice that the racks and shelves are outlined in red instead of blue when selected. This is defined in the "BoxNodeAdornmentTemplate". You can then define which nodes use this template by setting the go:Part.SelectionAdornmentTemplate property on the node's template.

A similar procedure is followed to change other adornment templates such as go:Part.ResizeAdornmentTemplate, which is also modified in this sample. See the "GroupResizeAdornmentTemplate" in Planogram.xaml for an example of this.

The last thing to notice in this sample is that there are two different templates for Rack nodes and Shelf nodes. One is for the palette, the other is for the actual diagram. This is so there can be drastically different behavior or appearance for nodes in the palette versus nodes in the diagram of the same category. In this case, racks and shelves in the palette don't respond the same way to the checkboxes as do the racks and shelves in the diagram. The palette racks and shelves are also adorned differently.