[RangeSelector] Add support for vertical orientation #756
Conversation
|
@dotnet-policy-service agree |
There was a problem hiding this comment.
Pull request overview
This PR adds vertical orientation support to the RangeSelector control, allowing it to be displayed vertically in addition to the existing horizontal orientation. The implementation includes proper coordinate inversion for vertical mode (top = maximum value, bottom = minimum value), visual state management, and support for keyboard, pointer, and drag interactions in both orientations.
Key Changes
- Added
Orientationdependency property with horizontal/vertical support - Implemented coordinate inversion logic for vertical mode across all input methods
- Added visual states for orientation with appropriate XAML template adjustments
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| RangeSelector.xaml | Added OrientationStates visual state group with layout adjustments for vertical mode |
| RangeSelector.cs | Added visual state constants, Loaded event handler for initial sync, and orientation-aware SyncThumbs/SyncActiveRectangle methods |
| RangeSelector.Properties.cs | Added Orientation property with change callback that updates visual states and syncs thumbs |
| RangeSelector.Input.Pointer.cs | Updated pointer event handlers to support vertical coordinate system with proper inversion |
| RangeSelector.Input.Key.cs | Added Up/Down key support for vertical mode and refactored keyboard handling |
| RangeSelector.Input.Drag.cs | Added DragThumbVertical method and updated drag handlers for vertical orientation |
| RangeSelector.md | Added documentation section for vertical orientation with sample reference |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Illustar0
changed the title
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 10 out of 10 changed files in this pull request and generated 7 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Illustar0
force-pushed
the
feat/allow-vertical-rangeselector
branch
from
63e4657 to
5968456
Compare
Illustar0
force-pushed
the
feat/allow-vertical-rangeselector
branch
from
5968456 to
fa1323f
Compare
michael-hawker
added
the
preview
Arlodotexe
added
components::controls::rangeselector
Illustar0
force-pushed
the
feat/allow-vertical-rangeselector
branch
from
fa1323f to
8a2c4a4
Compare
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
- Introduced `GetKeyboardChange` helper to correctly handle directional keys (Left/Right) when `FlowDirection` is Right-To-Left. - Refactored duplicate logic between MinThumb and MaxThumb to ensure consistent behavior across both vertical and horizontal orientations. Fixes CommunityToolkit#819
- Add orientation selector to RangeSelectorSample for testing both horizontal and vertical modes - Fix Canvas position property conflicts when switching between orientations by clearing old properties - Change default VerticalAlignment from Stretch to Top to prevent breaking existing horizontal layouts - Vertical mode explicitly sets VerticalAlignment="Stretch" via VisualState - This preserves backward compatibility for existing horizontal RangeSelector usage - Improve vertical mode visual states with explicit sizing and alignment setters for both orientations - Set visual state transition to non-animated (false) to prevent layout glitches during orientation changes - Update documentation with guidance on using VerticalAlignment="Stretch" for vertical orientation
Remove RangeSelectorVerticalSample as vertical orientation is now integrated into the main RangeSelectorSample with an orientation toggle option. This consolidates the samples and provides a better user experience for testing both orientations in one place.
Align Minimum value with RangeStart for configuration consistency.
… code duplication - Add UVPoint struct for abstraction of orientation-dependent coordinates - U represents primary axis (X for horizontal, Y for vertical) - V represents secondary axis - Add UVPointExtensions for Canvas positioning and element sizing - Merge DragThumb and DragThumbVertical into single unified method - Simplify SyncThumbs and SyncActiveRectangle using UVPoint - Refactor pointer event handlers to use UVPoint.FromPoint - Add CalculateNormalizedPosition helper for value conversion
Illustar0
force-pushed
the
feat/allow-vertical-rangeselector
branch
from
ea3bd4d to
9074b65
Compare
There was a problem hiding this comment.
You had the right idea with the UVPoint you'd written, but I had a specific implementation in mind because of a WIP refactor I have for other toolkit components which use the Orientation property. Here's a link to the branch. I should have been more upfront about that.
I've left some more comments showing how it would be used through the control
Your code before was clean though, I was just prepping for the future when I make this use the actual shared system. I recommend you either revert to the code before this change, or use the provided API. Entirely up to you.
- Introduce UVCoord struct that stores coordinates in XY space while providing UV accessors based on orientation - Support construction from Point and Size types - Add implicit conversion operators to Point and Size - Implement arithmetic operators with orientation mismatch validation Co-authored-by: Avishai Dernis <[email protected]> Signed-off-by: Illustar0 <[email protected]>
- Replace UVPoint with UVCoord throughout pointer and drag handling - Use UVCoord for drag delta calculations instead of ternary operators - Add GetCanvasPos helper method to retrieve element positions as UVCoord - Simplify size calculations using UVCoord.U and UVCoord.V properties - Remove dependency on UVPoint extension methods (SetCanvasU, GetCanvasU, etc.) Co-authored-by: Avishai Dernis <[email protected]> Signed-off-by: Illustar0 <[email protected]>
- Delete UVPoint struct and its extension methods - All usages have been migrated to UVCoord Signed-off-by: Illustar0 <[email protected]>
4 participants
Fixes #755 ,Fixes #819
PR Type
What kind of change does this PR introduce?
What is the current behavior?
No vertical orientation support for RangeSelector control.
What is the new behavior?
Add vertical orientation support for RangeSelector control.
PR Checklist
Please check if your PR fulfills the following requirements:
Other information