[Segmented] Proportional SegmentItem sizing

[Avid29]

Describe the bug

Allow developers to easily adjust the sizing of segmented items relative to one another.

Steps to reproduce

N/A

Expected behavior

Certain segmented items would be proportionally larger than others.

Screenshots

Code Platform

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 10 21H2 (Build 19044)
• Windows 10 22H2 (Build 19045)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Windows 10, version 2104 (Build 20348)
• Windows 11, version 22H2 (Build 22000)
• Other (specify)

Other SDK version

No response

Visual Studio Version

No response

Visual Studio Build Number

No response

Device form factor

No response

Additional context

No response

Help us help you

Yes, I'd like to be assigned to work on this item.

[niels9001]

Would we allow setting a Width, or what is the proposal here? I think this could be useful indeed, we just need to make sure the defaults stay the way they are to not break default behavior in apps that use this control! But yeah, having the flexibility to override the default widths would be helpful!

[Avid29]

@niels9001 I added an attached property to the EqualPanel which allows you to adjust a child proportionally to the other children.

Here's the xaml from the samples above

Notice the controls:EqualPanel.Factor="1.5" This tells the EqualPanel to make that item 1.5 times as large as the rest. My implementation ensures that this proportionality is respected, and that the minimum item is at least as wide as its desired with (unless the finalSize is smaller, in which case every item is shrunk).

The default Factor value is 1, so default behavior is maintained.

[Avid29]

The demo code above is outdated as a potential solution

The ideal behavior would be to change the default Segmented template to a WrapPanel2

The default SegmentedItemStyle would then contain

<Setter Value="(primitives:WrapPanel2).(LayoutLength)" Value="1*"/>

This would perverse the default behavior as equivalent to the EqualPanel and allow the LayoutLength to be overridden to any GridLength value creating far greater customizability.