Investigate: Default WrapPanel behavior Changed?

[michael-hawker]

Originally Reported by Spyromaniac on the UWP Community Discord Server

Originally posted by @michael-hawker in #3471 (comment)

#3471 may have changed the default behavior for WrapPanel? We had a user expecting to see Sample App behavior (6.1.x):

But saw their items centered in the rows instead (vs. top aligned) w/ 8.0.0-preview3 (based off our 7.0.0 code):

We should investigate if this default behavior has changed, and if anything document the behavior update. This should only effect scenarios of different sized items and is resolved by setting the VerticalContentAlignment property.

FYI @vgromfeld

[ghost]

Hello michael-hawker, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[skendrot]

@michael-hawker This seems like a stackoverflow issue. I'm guessing the content they are using has a VerticalAlignment of center

[michael-hawker]

@skendrot could be, it was resolved for them in chat, but I just wanted to double-check and validate that we're not accidently changing the default behavior between v6 and v7. Figured it'd be a good testing intro for someone to pick-up if they're looking for something simpler to get their feet wet with the Toolkit.

[vgromfeld]

The default value for the VerticalAlignment is Stretch (MSDN).
This is what is changing the behavior. Now that we are using the row height to arrange all the items, the default Stretch alignment is centering them if they height is smaller than the row height.
We can add a note in the documentation.

[michael-hawker]

@vgromfeld so it's great we have more flexibility here, but also want to make sure we can preserve the ability of the old scenario as well.

Looks like by default now the container around the item fills up the entire space (which is a bit odd here):

Compared to the 6.1 behavior where the reveal/container surrounded the item:

We basically want the ability for the container to still be able to be centered within the defined bounds?

---

Also to the original question posed by the developer who found the issue. It appears we center with the VerticalAlignment Stretch, but even though HorizontalAlignment default is also Stretch they're left-aligned:

This seems counter-intuitive that they would behave differently here?

---

(I also noticed the style here is duplicated above here, we should only have a single copy.)

[vgromfeld]

Also to the original question posed by the developer who found the issue. It appears we center with the VerticalAlignment Stretch, but even though HorizontalAlignment default is also Stretch they're left-aligned:

It is not something that we're doing inside the WrapPanel but more a side effect on how the XAML layout/children elements are drawing themselves.

The change done in the WrapPanel is to always give the full row height/column width to the children. Unfortunately, we do not have any HorizontalContentAlignment/VerticalContentAlignment on the control (like Control.HorizontalContentAlignment) so each child item must be explicitly configured with the required alignment.

[michael-hawker]

Alright, I've validated that the boxing behavior with the item border is the same as WPF:

So, I think we should be fine here to leave as is and just make a note about the behavior change.

I'm still not sure how we'd get mimic the old behavior with the new code, but I'm not sure it's possible in WPF either.

Sound good @vgromfeld?

[vgromfeld]

Yes, sounds good 👍