Refactor: Adaptive Column Width for StaggeredLayout

[Poker-sang]

Fixes

Adaptive Column Width for StaggeredLayout

PR Type

What kind of change does this PR introduce?

• Refactoring (no functional changes, no api changes)

What is the current behavior?

What is the new behavior?

PR Checklist

Please check if your PR fulfills the following requirements:

• Created a feature/dev branch in your fork (vs. submitting directly from a commit on main)
• Based off latest main branch of toolkit
• Tested code with current supported SDKs
• New component
  • Documentation has been added
  • Sample in sample app has been added
  • Analyzers are passing for documentation and samples
  • Icon has been created (if new sample) following the Thumbnail Style Guide and templates
• Tests for the changes have been added (if applicable)
• Header has been added to all new source files
• Contains NO breaking changes

Other information

[Arlodotexe]

Seems like we should maybe put this functionality behind a flag? The current non-adaptive behavior of the StaggeredLayout has likely been accounted for anyone already using it, this would change things under them. @michael-hawker What do you think?

[Poker-sang]

maybe like LineFlowLayout, use ItemsStretch property?

[michael-hawker]

@Poker-sang there's a comment for DesiredColumnWidth here on line 26:

/// The width of columns can exceed the DesiredColumnWidth if the HorizontalAlignment is set to Stretch.

Does the existing setup not allow for this scenario in this case? Otherwise wondering if that'd be the hook to look for?

[Poker-sang]

Which object should I put HorizontalAlignment on? I tried ItemsRepeater and the items, but not work.

[michael-hawker]

Ah, @Poker-sang I see now, it's a comment left over from the StaggeredPanel class here:

Windows/components/Primitives/src/StaggeredPanel/StaggeredPanel.cs

Line 26 in 7c3a552

/// The width of columns can exceed the DesiredColumnWidth if the HorizontalAlignment is set to Stretch.

As it was the original template for the conversion to the Layout. Panels have their own alignment property, but Layouts don't.

So, indeed we need some configuration here for this. ItemsStretch seems like a good name, as that aligns with the UnifomGridLayout. Not sure if we want to re-use that enum though, as I think we only have two behaviors, right? Probably just need our own with None (default) and Fill as options (for this new behavior). Akin to https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.linedflowlayoutitemsstretch

[Poker-sang]

Probably just need our own with None (default) and Fill as options (for this new behavior). Akin to https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.linedflowlayoutitemsstretch

Sounds good. But since it's also unlikely that we'll be able to directly use LinedFlowLayoutItemsStretch, maybe the bool type is enough?

[michael-hawker]

Oh, just make our own enum for use, better future proofing that way, and works better for fitting in with expectations for values for the property since it's similar to other ones.

[Poker-sang]

ItemsStretch property is added

[michael-hawker]

Thanks @Poker-sang, mind just adding a property to the sample page, so that we can show the difference there as well? You can see a similar example for the UnifomGrid here:

Windows/components/Primitives/samples/UniformGridSample.xaml.cs

Line 10 in 674ed5e

[ToolkitSampleMultiChoiceOption("OrientationProperty", "Horizontal", "Vertical", Title = "Orientation")]

Just need to add an x:Bind function (see below in that file) and the binding in the XAML.

(@Arlodotexe looks like no default is selected for these for the ComboBox?)

[Poker-sang]

I've added the example. But I don't know what's wrong with xaml style.

[michael-hawker]

I couldn't see on the CI which files failed, it's only showing the passing ones for some reason. But if you run the PowerShell script in the repo root, it should be able to fix them:

ApplyXamlStyling.ps1 -Main

@Arlodotexe we should ensure we have the notes in the wiki about this script as well as a screenshot about the XAML Styler extension setting to search up the directory path:

[Poker-sang]

ok i will try it

[Arlodotexe]

Code changes look good. Pulled and tested under Uwp, Wasm and Wasdk and found no issues. Let's merge!

[michael-hawker]

🦙 Leaving a marker here for historical record/the future that we had missed the state.ColumnWidth here not being the desired value of columnWidth calculated above, as @Poker-sang called out here: #542 (comment)