Orientation option for Segmented #747

Avid29 · 2025-11-17T15:12:59Z

Fixes #746

PR Type

What kind of change does this PR introduce?

What is the current behavior?

There is not orientation options for the Segmented control

What is the new behavior?

Add customization options for a vertical Segmented control

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
Tests for the changes have been added (if applicable)
Header has been added to all new source files
Contains NO breaking changes

Other information

Avid29 · 2025-11-17T15:19:58Z

So far I've added an Orientation property to the EqualPanel. I tested it (see below), but it's not actually implemented anywhere yet.

Avid29 · 2025-11-17T17:28:11Z

Here's an update.

Though this does have a slight change in the horizontal style, namely the selected indicator is centered on the full SegmentedItem rather than just the content. Here's what that difference looks like in practice.

Before:

After:

michael-hawker · 2025-11-18T06:02:31Z

@niels9001 was there a reason the indicator was centered under the content only vs. the entire content? That'll only matter in Icon + Text Horizontal mode.

michael-hawker · 2025-11-18T07:14:16Z

@Avid29 this works perfect!

Just slotted right into my VSM with changing the orientation and I was done! 🦙❤️ I'll take a look through the code itself in a bit.

michael-hawker

Looks pretty clean to me. @niels9001 @Arlodotexe let me know your thoughts.

michael-hawker · 2025-11-18T07:29:39Z

components/Segmented/src/Segmented/Segmented.cs

+            var container = ContainerFromIndex(i) as SegmentedItem;
+            if (container is null)
+                continue;
+
+            container.UpdateOrientation(Orientation);


Suggested change

var container = ContainerFromIndex(i) as SegmentedItem;

if (container is null)

continue;

container.UpdateOrientation(Orientation);

if (ContainerFromIndex(i) is SegmentedItem item)

{

item.UpdateOrientation(Orientation);

}

Would this be simpler?

Yeah. I have a tendency to over user guard checks...

michael-hawker · 2025-11-18T07:30:38Z

components/Segmented/src/SegmentedItem/SegmentedItem.cs

+using Windows.Media.Devices;
+


Accidental namespace add?

Yeah. Visual Studio really just adds whatever as I type and I often forget to even check 🤷

Yeah, I wonder if it's better in VS 2026, I'll have to see as I use it more. It's definitely been a bigger problem in the last year or so than it was in the past.

…hanged logic

AndrewKeepCoding · 2025-11-19T00:33:25Z

components/Segmented/src/Segmented/Segmented.cs

        RegisterPropertyChangedCallback(SelectedIndexProperty, OnSelectedIndexChanged);
+        RegisterPropertyChangedCallback(OrientationProperty, OnSelectedIndexChanged);


Would it make sense to extract the logic in OnSelectedIndexChanged into a SaveInitialIndex method then call it from OnSelectedIndexChanged and OnOrientationChanged?

Oh, wait a minute. That's supposed to call OnOrientationChanged... Yet it does work. Why is that?

Oh, I see. Because I moved the callback to the DependencyProperty declaration. This line is entirely unnecessary.

components/Segmented/src/SegmentedItem/SegmentedItem.cs

components/Segmented/src/EqualPanel.cs

Co-authored-by: Andrew KeepCoding <andrewkeepcoding@gmail.com>

Avid29 · 2025-11-26T13:59:38Z

This is now blocking for #752

niels9001 · 2025-11-26T14:41:10Z

Horizontal center alignment of the pill under the label is per design spec. But I'm fine with this change as this would align it with NavigationView too.

Avid29 · 2025-11-26T14:51:36Z

@niels9001 I believe I could get the pill back under the content by finagling the column layout and visual state setters, but as is now I believe it makes the default style's layout more predictable. It might even be simpler if I adjust the default VisualState (though they're always set, so it wouldn't change any behavior).

niels9001

This is looking great - and will be really helpful in creating selectable cards or things like a Store-like NavView :)!

Three things that come to mind:

Long text labels don't fit.. Maybe we should use texttrimming for this so it just ... for the chars that no longer fit?
It feels like we need a bit more spacing vertically (maybe 4 instead of 1) by default to better differentiate what icon belongs to what label. Should we introduce a HorizontalSegmentedItemSpacing and VerticalSegmentedItemSpacing?
Have we tested the vertical orientation with the built-in styles too? Could we add an orientation dropdown to this sample too so it's easier to validate any changes in the future?

Avid29 · 2025-11-26T15:08:32Z

@niels9001 I believe I could get the pill back under the content by finagling the column layout and visual state setters, but as is now I believe it makes the default style's layout more predictable. It might even be simpler if I adjust the default VisualState (though they're always set, so it wouldn't change any behavior).

I looked into it. I'd forgotten that to get the pill to left align properly I had to move it outside of the ContentHolder. This makes it much much harder, since it's no longer a child of the grid separating the icon from the content.

niels9001 · 2025-11-26T15:09:24Z

This also happened.. I think it's expected, and probably up to the developer to not use Stretch in vertical mode, right?

Avid29 · 2025-11-26T15:12:07Z

Hmm. Yeah, idk what expected behavior is there. You're definitely right that I should add options to more of the samples though.

Avid29 · 2025-11-26T15:17:45Z

Have we tested the vertical orientation with the built-in styles too? Could we add an orientation dropdown to this sample too so it's easier to validate any changes in the future?

Yes, I did think about this. I explcitly decided that the PivotSegmentedStyle ignores the property, though to be honest it would be quite harmless to make it stack, same as ButtonSegmentedStyle. Here's a screenshot with that sample option added.

Avid29 · 2025-11-26T15:34:29Z

Long text labels don't fit.. Maybe we should use texttrimming for this so it just ... for the chars that no longer fit?

I'd noticed this, and looked into that. The issue is TextTrimming is a TextBlock property not found on the ContentPresenter. I'm not sure how this can be added.

michael-hawker · 2025-11-26T18:46:40Z

Have we tested the vertical orientation with the built-in styles too? Could we add an orientation dropdown to this sample too so it's easier to validate any changes in the future?

Yes, I did think about this. I explcitly decided that the PivotSegmentedStyle ignores the property, though to be honest it would be quite harmless to make it stack, same as ButtonSegmentedStyle. Here's a screenshot with that sample option added.

Might as well update Pivot Style for completeness? I assume the pill would also go to the left like it does with the default style?

CI failure is due to the failing test (which I think is an external issue, needs confirmation).

niels9001 · 2025-11-26T18:53:28Z

It feels like we need a bit more spacing vertically (maybe 4 instead of 1) by default to better differentiate what icon belongs to what label. Should we introduce a HorizontalSegmentedItemSpacing and VerticalSegmentedItemSpacing?

I fiddled with the margins a bit more, and adjusted which UIElements contain the margins to be more sensible. This is the results. Thoughts? It also fixes the long item's text being cutoff on the left.

Looking at your screenshot, it looks like the icon/text label are not correctly center aligned?

Avid29 · 2025-11-26T21:07:54Z

It feels like we need a bit more spacing vertically (maybe 4 instead of 1) by default to better differentiate what icon belongs to what label. Should we introduce a HorizontalSegmentedItemSpacing and VerticalSegmentedItemSpacing?

I fiddled with the margins a bit more, and adjusted which UIElements contain the margins to be more sensible. This is the results. Thoughts? It also fixes the long item's text being cutoff on the left.

Looking at your screenshot, it looks like the icon/text label are not correctly center aligned?

Hmm... This is actually really affirming to hear because I had noticed it felt off, but by all means it appears it should be symmetrical according to the code so I assumed I was just wrong. I'll look closer now and see what I can do.

Avid29 · 2025-11-26T21:52:10Z

Fixed the alignment issues. It was caused by centering the grid on the content, which would misalign the icon by 1 pixel if the content had an odd with.

I also overrode the hover margins when in the vertical state, which I has missed before.

…nates

…hanged logic

Co-authored-by: Andrew KeepCoding <andrewkeepcoding@gmail.com>

…nates

michael-hawker · 2025-12-03T19:42:27Z

Sorry @Avid29 I should have merged maybe for the main update vs. rebase as you're working on this. Wanted to pick up the fixes for the tests to be more reliable for the CI.

Avid29 · 2025-12-03T19:50:38Z

No problem 👍

Added Orientation property to EqualPanel

25106dc

Avid29 marked this pull request as draft November 17, 2025 15:13

Added orientation to default Segmented style

4d35ca1

Avid29 force-pushed the Segmented/VerticalOrientation branch from 24309cb to 4d35ca1 Compare November 17, 2025 17:30

Avid29 added 2 commits November 17, 2025 23:10

Fixed orientation binding issue in ButtonSegmentedStyle

99738b1

Refined default SegmentedItem style

c4e0ae3

michael-hawker reviewed Nov 18, 2025

View reviewed changes

Removed unnecessary namespace reference and simplified OnOrientationC…

093c4b2

…hanged logic

AndrewKeepCoding reviewed Nov 19, 2025

View reviewed changes

components/Segmented/src/SegmentedItem/SegmentedItem.cs Outdated Show resolved Hide resolved

AndrewKeepCoding reviewed Nov 19, 2025

View reviewed changes

components/Segmented/src/EqualPanel.cs Outdated Show resolved Hide resolved

Avid29 and others added 2 commits November 19, 2025 02:41

Apply typo fixes from code review

9924e89

Co-authored-by: Andrew KeepCoding <andrewkeepcoding@gmail.com>

Removed unneccesary callback registration EqualPanel constructor

00de4bc

michael-hawker requested a review from niels9001 November 20, 2025 19:10

Arlodotexe self-requested a review November 24, 2025 17:28

Avid29 marked this pull request as ready for review November 26, 2025 13:57

niels9001 requested changes Nov 26, 2025

View reviewed changes

Added orientation option to styles sample

fccfc84

Fixed alignment issues in SegmentedItem IconTop VisualState

aa68ff5

Avid29 added 3 commits November 27, 2025 00:00

Added vertical behavior for the PivotSegmentedStyle

fe533f5

Addressed simple code style suggestions from Arlo

4b3fb0e

Replaced SelectAxis method with UVCoord ref struct for mapping coordi…

05c7684

…nates

Avid29 requested review from Arlodotexe and niels9001 November 27, 2025 19:43

Avid29 and others added 15 commits November 28, 2025 10:06

Removed X/Y coords from UVCoord and changed U/V refs to precalculate

bb11f05

Added Orientation property to EqualPanel

da9651d

Added orientation to default Segmented style

59211cd

Fixed orientation binding issue in ButtonSegmentedStyle

6608ac4

Refined default SegmentedItem style

262b9ce

Removed unnecessary namespace reference and simplified OnOrientationC…

ad01937

…hanged logic

Apply typo fixes from code review

8e06bb9

Co-authored-by: Andrew KeepCoding <andrewkeepcoding@gmail.com>

Removed unneccesary callback registration EqualPanel constructor

c4013af

Added orientation option to styles sample

74a7c07

Adjusted DefaultSegmentedStyle IconTop style

21614d6

Fixed alignment issues in SegmentedItem IconTop VisualState

6f045eb

Added vertical behavior for the PivotSegmentedStyle

70348bb

Addressed simple code style suggestions from Arlo

702d026

Replaced SelectAxis method with UVCoord ref struct for mapping coordi…

7d38879

…nates

Removed X/Y coords from UVCoord and changed U/V refs to precalculate

b2bf5af

michael-hawker force-pushed the Segmented/VerticalOrientation branch from bb11f05 to b2bf5af Compare December 3, 2025 19:41

Avid29 added 2 commits December 4, 2025 02:05

Renamed OnPropertyChanged to OnEqualPanelPropertyChanged

0d72bac

Merge

1c131f6

		RegisterPropertyChangedCallback(SelectedIndexProperty, OnSelectedIndexChanged);
		RegisterPropertyChangedCallback(OrientationProperty, OnSelectedIndexChanged);

		using Windows.Media.Devices;

Orientation option for Segmented #747

Are you sure you want to change the base?

Orientation option for Segmented #747

Uh oh!

Conversation

Avid29 commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixes #746

PR Type

What is the current behavior?

What is the new behavior?

PR Checklist

Other information

Uh oh!

Avid29 commented Nov 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Avid29 commented Nov 17, 2025

Uh oh!

michael-hawker commented Nov 18, 2025

Uh oh!

michael-hawker commented Nov 18, 2025

Uh oh!

michael-hawker left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Avid29 commented Nov 26, 2025

Uh oh!

niels9001 commented Nov 26, 2025

Uh oh!

Avid29 commented Nov 26, 2025

Uh oh!

niels9001 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Avid29 commented Nov 26, 2025

Uh oh!

niels9001 commented Nov 26, 2025

Uh oh!

Avid29 commented Nov 26, 2025

Uh oh!

Avid29 commented Nov 26, 2025

Uh oh!

Avid29 commented Nov 26, 2025

Uh oh!

michael-hawker commented Nov 26, 2025

Uh oh!

niels9001 commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Avid29 commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Avid29 commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

michael-hawker commented Dec 3, 2025

Uh oh!

Avid29 commented Dec 3, 2025

Uh oh!

Reviewers

Avid29 commented Nov 17, 2025 •

edited

Loading

Avid29 commented Nov 17, 2025 •

edited

Loading

niels9001 left a comment •

edited

Loading

niels9001 commented Nov 26, 2025 •

edited

Loading

Avid29 commented Nov 26, 2025 •

edited

Loading

Avid29 commented Nov 26, 2025 •

edited

Loading