st.AutoGrid MarginBetweenChildren

[xmedeko]

I like the new st:StackPanel MarginBetweenChildren property. I would like to add it to the st.AutoGrid, too. The st.AutoGrid has ChildMargin property already. It can be overridden, when an element specify it's own 'Margin'. I would like the MarginBetweenChildren behave the same way for the st:StackPanel and st.AutoGrid, too.

[kmcginnes]

Thanks! I really like the MarginBetweenChildren too. It's the main reason I wrote StackPanel. I would love to see it in AutoGrid as well, but it would be fairly difficult. The main problem is that it's derived from Grid.

It's definitely possible though. Maybe I'll get to it at some point. I'd gladly take pull requests. :)

[xmedeko]

My idea is to make MarginBetweenChildren as ChildMargin. E.g. if you set MarginBetweenChildren = 3 and have a grid 3x3, then the elements will have margins:

0,0,3,3	3,0,3,3	3,0,0,3
0,3,3,3	3,3,3,3	3,3,0,3
0,3,3,0	3,3,3,0	3,3,0,0

[kmcginnes]

That is one way to implement it. However, the problem with that approach is what do you do if the consumer chooses both MarginBetweenChildren and ChildMargin. And to add more of a wrinkle, what if they include an explicit Margin on a child element. For example:

<st:AutoGrid Columns="Auto,*" MarginBetweenChildren="10" ChildMargin="0,5">
  <TextBlock Text="First Name"/>
  <TextBox/>
  <TextBlock Text="Last Name"/>
  <TextBox/>
  <TextBlock Text="Gender"/>
  <st:StackPanel MarginBetweenChildren="10" Margin="20,0">
    <RadioButton Content="Female"/>
    <RadioButton Content="Male"/>
    <RadioButton Content="Other"/>
  </StackPanel>
</st:AutoGrid>

What should everything calculate out to? In the current version, AutoGrid would let the children override the parent's choice (as it should). In StackPanel, MarginBetweenChildren lives outside of the child's Margin. So it is applied regardless of the child's choice. Using ChildMargin to implement MarginBetweenChildren would change one side or the other.

There's also other issues. As a consumer, I'd love to chose a different margin horizontally vs vertically. Things get complicated quickly.

I'm open to suggestions, though.

[xmedeko]

I like AutoGrid behaviour that a child may override the ChildMargin settings. IMO same should be for the st:StackPanel.MarginBetweenChildren.

The MarginBetweenChildren could be the Thickness, then MarginBetweenChildren = 1,2,3,4 will result in

0,0,3,4	1,0,3,4	1,0,0,4
0,2,3,4	1,2,3,4	1,2,0,4
0,2,3,0	1,2,3,0	1,2,0,0

To set the different horizontal and vertical margins, one would just set MarginBetweenChildren = 5,10.

Maybe better name would be InnerChildMargin. It could be also possible to have OuterChildMargin, but that would be the same as Padding? Maybe useless then.

[kmcginnes]

I like where your head is at, however, if I was to implement it in that manner, I believe MarginBetweenChildren would lose some its luster. The idea was two fold. First, stop applying a trailing margin to all children except the last. And second, stop trying to calculate a magical number that would give you the margin between children you want, as well as the margin around the container.

With the last UX designer I worked with, the margins were simple: 10px between each element and 10px around the container. That meant that everything could have a margin of 5px and it would all add up to the 10px we wanted. Simple and magical.

But when you start wanting the margin around your container to be different from the margin between the children, things get complicated. In order to get 10px between the children and 20px around the left and right side of the container you have to set your children's margin to 5 and your parent's margin to "10,0". And even then you are left with 5 extra margin on the top and bottom. Not ideal.

Your solution fixes part of the problem. You can apply zero margin to the outside edge of children not in the center. But you still have to cognitively calculate the additive margin of children next to each other. I think this is good, but not great.

In order to do what I would really want, which is space elements out and then apply the child's margin after that, would require me to take full control over the child's sizing and positioning. That would mean replacing the entire grid's functionality. That is something that I am not ready to tackle.

The Grid is complicated. The StackPanel is simple. That's why I went with the StackPanel. I was able to get my idea working in a few hours. Also, I found myself using AutoGrid as a very expensive StackPanel in order to get the fill capability.

I honestly don't use a true multicolumn & multirow Grid very often. In fact, the typical use case is for forms controls. Instead, what I do is create a custom ContentControl called FormControl with a Label dependency property. Then I style that to my heart's content. And I use that in a stack panel. If I need two columns then it is a stack panel of stack panels. This simplifies my UI immensely.

[xmedeko]

Now I see the point of the MarginBetweenChildren. It's true I use st:AutoGrid instead of StackPanel often, so I can switch to the st:StackPanel instead. But for the complicated form layouts the Grid is unreplaceable for me. (E.g. stack panel of stack panels cannot do RowSpan.) I often need to set AutoGrid innerspacing only, so I set ChildMargin and then Margins of the outer elements as I have described. So any solution, which would help me with this task will be helpful.