Hello!
I've been experimenting a bit with Custom Controls and extending Noesis Studio.
I created this CustomGrid that had the added functionality of spacing between the columns/rows, similar to how stackpanel does its spacing

But one problem I encountered was that (of course) the spacing sort of broke Noesis Studios nice grid representation lines. Which leads to it being a bit of a cumbersome control to use.
So instead I just wanted to share it here as a possible nice feature upgrade to the existing Grid, which would lead to it probably being handled more correctly in Noesis Studio.

Hey Aggro, Dorian here!

Very cool extension of the Grid Element, I like the idea of what you've made.

I totally agree that the StackPanel's 'Spacing' has been super handy since it was introduced; and it would indeed be quite interesting to see if the same could be applied to a Grid, or perhaps even more fittingly, to the UniformGrid, which in a lot of ways, is somewhat like a StackPanel that goes in multiple directions instead of one. I've logged a Ticket about all this into our system as a conversation starter and to have on-record as something for us to consider (#5258)

----------

On a slightly tangent subject; I was curious reading your post this morning about how I could create similar functionality using XAML only.

OPTION 1: GRID 'GUTTERS'

Probably the most straightforward way to approach this would be to simply create Columns and Rows within the Grid to represent the 'Gutters' between each panel in the Grid, with their width and heights set in pixels.

OPTION 2: DYNAMIC COLUMNS & ROWS

For this approach, what I really wanted to achieve was:
1) Being able to dynamically change the Column Spacing and Row Spacing exactly like in your example, from the Element itself.
2) Being able to change the Layout independently, so for example, be able to have a 3x3, or a 4x2, grid etc...

So what I ended up doing was:

1) Picking a ListBox as the Parent Element driving the entire system for the following reasons:
a) Ability to create two Custom Properties in its Template of 'Column Spacing' and 'Row Spacing'
b) I can use the ListBox's ability to populate its ItemsPresenter automatically using the layout in its ItemsPanel sub-Template to automatically be able to support n-amount of Elements placed into it at the Page-level. (this gives the ability to, for example, to have this grid only contain 2 rectangles instead of 9 if desired)

2) Setting the ListBox's ItemsPanel sub-Template to use a UniformGrid instead of a StackPanel, for a couple reasons:
a) It can lay out all of the dynamically-introduced 'children' Elements in a grid-like-layout where it will automatically fill per the amount of 'children' put into the ListBox on the Page
b) Allows to easily change between Grid Layouts (3x3 vs 4x2 using its built-in 'Columns' and 'Rows' Properties.

3) Setting the 'Gutters' as part of the ListBox ItemContainer, by creating a 3x3 Grid within it where:
a) The ContentPresenter (in this case, the red rectangle) is set to the Middle Column/Row, at a measurement of Height=1*, and Width=1*.
b) Creating 4 'Spacer' Border Elements that are each assigned to each external Column and Row of the Grid, whose Columns and Rows are set to 'Auto', to allow them to scale in Height and Width. Then Binding the Width and Height of each of these to either the 'Column Spacing' or 'Row Spacing' Custom Properties created on the ListBox itself. This by extension, allows the 'spacing' around each rectangle to grow or shrink based on the ListBox's 'Column Spacing' and 'Row Spacing' Custom Property values. (For each of these, I've set a MathConverter to divide the spacing number by 2, because otherwise two edges together would result in a doubling of the Spacing values.)

Sample attached if anyone wants to check it out, and here it is here in action too:



Thanks for dropping by and bringing this up, Aggro!

- Dorian

Hey Dorian!

Very interesting takes on the same problem!
The Grid gutter option is the one we are going with for now, the function of it would be exactly the same as how the spacing would work.
The UX problem I've encountered with this approach is that these gutters will be part of the selection of which column/row number the controls should be in and if I have a grid with 3 columns and no gutters and I want to add the gutters between them I need to modify all my controls that are put in column 1 and 2 so they don't end up in a gutter.
It's of course manageable, just a bit tedious.
This will of course add some more arrange logic to the Grid that might make it slightly more expensive, and I'm not sure if you guys want to keep it as light and fast as possible.

One thing with the spacing option as well is that it doesn't modify the grids outer shell, that is still controlled by margins while it just affects the padding between each cell in the grid. So it still keeps it's total size intact.

Hey Aggro,

I totally understand the layout challenge you're mentioning about having to systematically adjust your Columns/Rows and ColumnSpans/RowSpans --- it definitely is something that adds a bit of friction to the experience. This is probably to some extent one of the advantages of using a ListBox + UniformGrid approach; in that it is fully dynamic, and you don't really need to worry about manually placing any Element within a specific cell; just add or remove Elements into the array of those displayed by the ListBox, and it does the rest automatically.

But if you wanted to use a Grid Element layout specifically to drive this however, to say, have Elements span over multiple calls; one thing you could do, is to store these different varieties of Grid layouts inside of a ContentControl's 'Content' Template, and have different Templates for different use-cases, each with their own Elements setup within them.

Then, you create a few 'standard' layouts and standard content inside of these, and just duplicate these Content Templates to create variants pretty easily. Doesn't necesarily solve the need to adjust spans and assignments, but does somewhat 'frontload' it.

And all you'd have to do after that, is just to place a ContentControl Element on the Page, and swap 'Grid Layout' by simply changing the Content Template of the ContentControl (This is something you can even do on-the-fly as a result of a user interaction using Triggers).

And on another note; completely agreed with the desire to not have 'Spacing' impact the 'exterior' shell in an ideal implementation; it's an aspect of the StackPanel's 'Spacing' that I love, and gives it more differentiation power to simply using Margins, as you say. (I included a note in the ticket that this aspect in particular is something that should be conserved in a potential Grid/UniformGrid extension).

(In my DynamicGrid sample, I had to somewhat artificially 'counter' this aspect by Binding my ListBox's Margin to use a MathConverter to take the 'Spacing' value, and make it negative, in order to, as far as the viewer sees, hide this 'shell'.)

- Dorian