question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ColorPicker with ColorSlider

See original GitHub issue

Hi,

The ColorSlider of a ColorPicker is working strange and makes the control useless.

Describe the bug

I have tried to use the the Microsoft.UI.Xaml ColorPicker (and also the UWP one) with the ColorSpectrumComponents value set to “SaturationValue”.

<ColorPicker ColorSpectrumShape="Box"
             Color="Red"
             Width="312"
             IsColorChannelTextInputVisible="False"
             IsColorSliderVisible="True"
             IsAlphaEnabled="False"
             IsHexInputVisible="False"
             RenderTransformOrigin="0.5,0.5"
             ColorSpectrumComponents="SaturationValue" />

The Xaml above renders this output which really looks great. You can use the slider to pick another color.

image

The problem starts when you set the Color to Black or White.

<ColorPicker ColorSpectrumShape="Box"
             Color="Black"
             Width="312"
             IsColorChannelTextInputVisible="False"
             IsColorSliderVisible="True"
             IsAlphaEnabled="False"
             IsHexInputVisible="False"
             RenderTransformOrigin="0.5,0.5"
             ColorSpectrumComponents="SaturationValue" />

The color slider becomes completely Black and with White it ‘disappears’. I expected the rainbow color which I had when the color was set to Red. Is this a bug?

image

Maybe I shouldn’t use the ColorSpectrumComponents, so I set it back to the default (HueSaturation) and set the Color to Black.

<ColorPicker ColorSpectrumShape="Box"
             Color="Black"
             Width="312"
             IsColorChannelTextInputVisible="False"
             IsColorSliderVisible="True"
             IsAlphaEnabled="False"
             IsHexInputVisible="False"
             RenderTransformOrigin="0.5,0.5"
             ColorSpectrumComponents="HueSaturation" />

Does this look like a ColorPicker? I don’t think so. Is this a bug?   image

For me the Color Picker with a Color Slider is useless. Or am I stupid and doing something wrong?

Expected behavior The ColorPicker in the Paint 3D app is doing what I want. Does anybody know if the ColorPicker which is in the Paint 3D app is available as a component?

image

Version Info Windows 10 Desktop, 1809, 17763, WinUI NuGet 2.0.181018003

NuGet package version: Microsoft.UI.Xaml 2.0.181018003

Windows 10 version:

  • Insider Build (xxxxx)
  • October 2018 Update (17763)
  • April 2018 Update (17134)
  • Fall Creators Update (16299)
  • Creators Update (15063)
  • Anniversary Update (14393)

Device form factor:

  • Desktop
  • Mobile
  • Xbox
  • Surface Hub
  • IoT

Additional context

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:5 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
jevansakscommented, Dec 14, 2018

This sounds like an issue that @kikisaints and @llongley might have addressed with a behavior change recently. I don’t believe that update is in a package on the feed yet however. Would you be able to try the nupkg from the latest CI build? You can click the “Artifacts” button to download it. Here’s the description from the PR before we went open:

The motivation behind this task was to remove the possibility that the user can interact with the ColorPicker in such a way as to create a case where either the color spectrum or the color slider are just displaying one solid color rather than a gradient. In the case of the spectrum, this can happen when value = 0 - in that case, you get black, regardless of any other component. In the case of the slider, this can additionally happen when the slider is tracking hue and saturation = 0, which will make the entire slider white. In those cases, we want to not update the visuals, since otherwise we aren’t displaying meaningful, helpful information to the user.

I don’t know the answer for what control Paint3D is using, Kiki might know. I suspect they wrote something custom.

0reactions
sonnemafcommented, Dec 19, 2018

Yeah, it also works in the 2.1.181217001-prerelease. Thanks and a Merry Christmas.

Read more comments on GitHub >

github_iconTop Results From Across the Web

gizmosachin/ColorSlider: 🎨 Snapchat-style color picker in ...
ColorSlider is an iOS color picker with live preview written in Swift. Build Status Pod Version Swift Version GitHub license. Features., " ...
Read more >
How to make a custom RGB color slider in Flutter
How I made a custom color picker slider using Flutter and Dart · The finalized color slider layout · RGB color codes chart...
Read more >
HTML Color Picker
HTML Color Picker · Pick a Color: · Or Enter a Color: · Or Use HTML5: · Selected Color: · Lighter / Darker:...
Read more >
ColorSlider - React Spectrum - Adobe
Documentation for ColorSlider in the React Spectrum package. ... This example shows how you could build an RGBA color picker using four color...
Read more >
Download ColorPicker V2
The Sims 4 ColorPicker V2 is an evolution of my original build make-over tool, that introduces the ability to select colors and tint...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found