GradientSlider component creation by Avid29 · Pull Request #769 · CommunityToolkit/Labs-Windows

Avid29 · 2026-01-08T23:19:49Z

Introduces the first draft of the GradientSlider component.

Resolves: #768

GradientSlider.mp4

michael-hawker · 2026-01-09T18:13:20Z

This is so cool! 🦙❤️ Thanks for thinking of this and putting this together, excited to go peek at how you've put it together in a minute.

Did a quick check on the CI, seems like some of the namespaces didn't get globalized properly for WinUI 2:

         D:\a\Labs-Windows\Labs-Windows\components\GradientSlider\src\GradientSlider.cs(5,25): error CS0234: The type or namespace name 'Shapes' does not exist in the namespace 'Microsoft.UI.Xaml' (are you missing an assembly reference?) [D:\a\Labs-Windows\Labs-Windows\components\GradientSlider\src\CommunityToolkit.WinUI.Controls.GradientSlider.csproj::TargetFramework=net9.0-android]
         D:\a\Labs-Windows\Labs-Windows\components\GradientSlider\src\GradientSlider.cs(13,59): error CS0246: The type or namespace name 'Rectangle' could not be found (are you missing a using directive or an assembly reference?) [D:\a\Labs-Windows\Labs-Windows\components\GradientSlider\src\CommunityToolkit.WinUI.Controls.GradientSlider.csproj::TargetFramework=net9.0-android]
         D:\a\Labs-Windows\Labs-Windows\components\GradientSlider\src\GradientSlider.cs(20,13): error CS0246: The type or namespace name 'Rectangle' could not be found (are you missing a using directive or an assembly reference?) [D:\a\Labs-Windows\Labs-Windows\components\GradientSlider\src\CommunityToolkit.WinUI.Controls.GradientSlider.csproj::TargetFramework=net9.0-android]

michael-hawker

Some initial comments, this is an amazing start! Really interesting use of the Canvas. I'll have to pull it down and play with it a bit more directly.

I'm also wondering since I added Thumbs to the ResizeAdorner, and you have them here if there's any commonalities and if we just need a general Thumb base class like I did for the Sizers (which could honestly maybe re-use that as well, I mean I basically took that code and made it two-dimensional for the Adorner thumb).

michael-hawker · 2026-01-09T18:14:51Z

components/GradientSlider/samples/GradientSliderSample.xaml

+            <controls:GradientSlider.GradientStops>
+                <GradientStopCollection>
+                    <GradientStop Offset="0" Color="#FF0000" />
+                    <GradientStop Offset="0.3" Color="#00FF00" />
+                    <GradientStop Offset="0.66" Color="#0000FF" />
+                    <GradientStop Offset="1" Color="#FF0000" />
+                </GradientStopCollection>
+            </controls:GradientSlider.GradientStops>


What happens if the developer doesn't specify any stops at the start? Could be good to have another example where it's bound to a collection (to show binding) but that collection is also empty to start?

Seconded, documenting (and defining if needed) the expected behavior for empty/default properties is a trivial known/expected scenario for any component MVP.

components/GradientSlider/src/CommunityToolkit.WinUI.Controls.GradientSlider.csproj

components/GradientSlider/src/GradientSlider.cs

michael-hawker · 2026-01-09T18:24:16Z

components/GradientSlider/src/GradientSlider.Properties.cs

+        if (slider._isDragging)
+            return;


So if a stop is somehow programmatically added while the slide is in use, the slider will never get updated and be out-of-sync? We probably need to call RefreshThumbs or some other sync method when the drag is completed, eh?

Seconded. This is another known/expected trivial MVP feature, the various properties on this control should support live updates.

We'll likely need to do a sweep to make sure property change updates are wired everywhere.

It's actually worse than that.

There is no event or callback on the GradientStopCollection to detect a stop being added/removed. The actual limitation here is that if the GradientStops property values changes (as in the reference to the GradientStopsCollection object, while the user is dragging then it will become completely out of sync until the next RefreshThumbs() event.

michael-hawker · 2026-01-09T18:28:42Z

components/GradientSlider/src/GradientSliderThumbStyle.xaml

+                        <FlyoutBase.AttachedFlyout>
+                            <Flyout Placement="Bottom">
+                                <muxc:ColorPicker x:Name="PART_ColorPicker" />
+                            </Flyout>
+                        </FlyoutBase.AttachedFlyout>


I'm always leery of adding intertwined children/parents, but I think in this case, it'd be nice if there was a single attachedflyout was part of the parent control and the child invoked that atop itself? Obviously, requires a bit more coordination, but...

Then I think it gets easier to expose the properties of the ColorPicker itself in one place on the GradientSlider. i.e. if they want to show a specific color palette or other things instead, they just have to restyle the parent control which is much simpler than the thumb.

Should we also use the WCT ColorPicker by default instead? Or should we expose a ColorPicker property on the slider so the developer themselves provide the picker they want to use configured exactly how they want (we can have a style value set with a default basic one in case they don't provide one)?

Just to make sure I understand what you're saying, we shouldn't have to retemplate the entire control to swap out the color picker or add any custom content around it? That instead, we could pass it in via a DP deriving ColorPicker, or if we wanted to allow custom content, a Control instance or DataTemplate?

@Arlodotexe Yes, but as a result the GradientSlider would own the ColorPicker. This has a cost of higher control coupling, but it is more layout optimized and makes this control more easily extensible (even though its components become less extensible).

michael-hawker · 2026-01-09T18:30:50Z

components/GradientSlider/src/GradientSlider.cs

I would think, double-tapping on the slider should be the mechanism to add a new stop, eh? @niels9001 any suggestions on input here?

I'm trying to think of how you'd remove a stop, would it be dragging it further off some amount the end of the slider?

The only other scenario I'm thinking of here that'd be more complex to add is if you wanted a specific input box for the offset vs. drag input. (It could be nice in either case as you're dragging to see the offset value as a float [0-1] and/or percentage maybe?) Maybe it's not something we provide by default out-of-the-box, but something we should have a sample on how to extend the control to enable. i.e. could the flyout be customized to contain more than just a colorpicker, would we have to search the flyout for the colorpicker instance then?

I've added a "Placeholder Thumb" that shows under a hovering mouse. My idea is that clicking there will add a stop in that position.

I'm a fan of the hover-to-add interaction method, though it doesn't cover removal. We can defer addressing both of these until later, but let's track it in a new ticket after closing this PR.

Currently you can right-click to remove a stop. Not the most intuitive solution, but just making clear that there is a way to remove stops right now.

…tArgs

Co-authored-by: Michael Hawker MSFT (XAML Llama) <24302614+michael-hawker@users.noreply.github.com>

into gradient_slider

components/GradientSlider/samples/GradientSlider.md

Arlodotexe · 2026-04-10T03:59:02Z

components/GradientSlider/samples/GradientSliderSample.xaml.cs

+/// An example sample page of a custom control inheriting from Panel.
+/// </summary>
+
+[ToolkitSample(id: nameof(GradientSliderSample), "Custom control", description: $"A sample for showing how to create and use a {nameof(GradientSlider)} custom control.")]


Default text (name/description) should be replaced so it's displayed properly in the sample app.

Arlodotexe

Reviewed and approved, there are improvements to make but nothing we can't defer. Let's take the lingering review comments and turn them into tracking issues, once we've resolved the review threads by deferring them to issues, we can merge the code and close the PR.

Co-authored-by: Michael Hawker MSFT (XAML Llama) <24302614+michael-hawker@users.noreply.github.com>

Avid29 · 2026-04-10T09:46:17Z

I've taken care of the simpler problems (default strings and metadata)

michael-hawker · 2026-04-10T18:52:16Z

@Arlodotexe seems like WIP is stuck again... 🤔 I confirmed our installation is this repo: https://github.com/wip/action - they have a status here which shows it's been up: https://stats.uptimerobot.com/Dq46zf6PY - maybe we should file an issue anyway? I'm not sure how we get more details about what's holding it up though (it's a simple action and it hasn't changed).

Avid29 added 10 commits January 8, 2026 17:24

Create GradientSlider component

e9927d5

Cut template code to basics

2c608e4

Added thumb and background population

1028e20

Styled GradientSliderThumb and added dragging events

a1f814f

Added comments to GradientSlider public members

b6cb853

GradientSlider thumb drag handling

3fe66b5

Refined event subscriptions

f3552f4

Added color selection flyout to GradientSliderThumb

219be4c

Applied XAML styling

3f01d0a

Set explicitly MUXC ColorPicker

9b7756a

michael-hawker reviewed Jan 9, 2026

View reviewed changes

Avid29 marked this pull request as draft January 9, 2026 18:37

Avid29 and others added 17 commits January 10, 2026 01:34

Fixed Rectangle namespace in WinUI2

22871b7

Changed GradientSliderThumb to use explicit MUXC for ColorChangedEven…

fb8175a

…tArgs

Merge branch 'main' into gradient_slider

3c8cfdc

Update components/GradientSlider/src/GradientSlider.cs

ecc79f2

Co-authored-by: Michael Hawker MSFT (XAML Llama) <24302614+michael-hawker@users.noreply.github.com>

Added placeholder thumb for add position indicator

3a68bb0

XAML Styles

ca021d1

Added disabled regions for the placeholder thumb

29246b4

Add stop on pointer press

a9ee9af

Thumb drag-on-creation for GradientSlider

bfd18cf

XAML

633a05f

Changed default value of GradientStops

9e0f37c

Added property to enabled/disable adding gradient stops

60108d4

Added FlowDirection override on default GradientSliderStyle

a1307b8

Do the thing (XAML Styles)

4d7e543

Fixed Colors namespace in WinUI2

aa83779

Changed GradientSlider to track position as Point with Y axis

b40b727

Added Keydown adjustments to GradientSlider

11bec84

Avid29 and others added 4 commits February 5, 2026 20:04

Added right-tap to remove stop in GradientSlider

043c0dc

Merge branch 'main' into gradient_slider

589314f

Added check to prevent removing the last gradient stop

401bb64

Merge branch 'gradient_slider' of https://github.com/Avid29/Labs-Windows

98e305c

into gradient_slider

Avid29 requested a review from michael-hawker February 5, 2026 20:55

Avid29 marked this pull request as ready for review February 5, 2026 20:55

michael-hawker approved these changes Feb 5, 2026

View reviewed changes

Avid29 added 2 commits February 9, 2026 14:47

Merge branch 'main' into gradient_slider

b254ec5

Merge branch 'main' into gradient_slider

6963917

Arlodotexe self-requested a review April 10, 2026 03:23

Arlodotexe reviewed Apr 10, 2026

View reviewed changes

components/GradientSlider/samples/GradientSlider.md Outdated Show resolved Hide resolved

Arlodotexe reviewed Apr 10, 2026

View reviewed changes

Arlodotexe approved these changes Apr 10, 2026

View reviewed changes

Avid29 and others added 4 commits April 10, 2026 12:41

Update GradientSlider.md

31f587f

Update GradientSliderSample.xaml.cs

d6ec7e2

Apply suggestions from code review

596c65d

Co-authored-by: Michael Hawker MSFT (XAML Llama) <24302614+michael-hawker@users.noreply.github.com>

Merge branch 'main' into gradient_slider

6240b09

Conversation

Avid29 commented Jan 8, 2026

Uh oh!

michael-hawker commented Jan 9, 2026

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!

Uh oh!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Arlodotexe 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 Apr 10, 2026

Uh oh!

michael-hawker commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Arlodotexe left a comment •

edited

Loading

michael-hawker commented Apr 10, 2026 •

edited

Loading