[RangeSelector] Add support for vertical orientation #756
+665
−89
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Author
|
@dotnet-policy-service agree |
Contributor
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.
Contributor
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.
Contributor
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.
63e4657 to
5968456
Compare
11 tasks
5968456 to
fa1323f
Compare
Avid29
reviewed
Jan 9, 2026
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
ea3bd4d to
9074b65
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #755
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