The color picker does not support Alpha in ARGB

[paul1956]

Environment

Version 17.4.0 Preview 2.0

.NET version

N/A

Did this work in a previous version of Visual Studio and/or previous .NET release?

Don't know but I don't think so.

Issue description

The color picker only supports Red, Green and Blue but the underlying designer supports the Alpla Channel.

Steps to reproduce

Select any design item that is of type Color, select custom and there is no option to add Alpha.

Diagnostics

No response

[merriemcgaw]

Can you clarify what you mean by the underlying designer supports the alpha channel? There may be some additions to the runtime where we can enhance the runtime control and bring the same into Visual Studio, but it's not 100% clear what you're hoping to see and precisely where. Do note that ColorPicker in general is not on our radar for updates in the next few releases, so we may need to rely on the community to help us with this issue.

[paul1956]

@merriemcgaw The runtime and Visual Studio has no issue with and uses Color.argb as shown below.

Me.HomeTabChart.BorderlineColor = System.Drawing.Color.FromArgb(CType(CType(26, Byte), Integer), CType(CType(59, Byte), Integer), CType(CType(105, Byte), Integer))
ChartArea1.BorderlineColor = System.Drawing.Color.FromArgb(CType(CType(180, Byte), Integer), CType(CType(CType(47, Byte), Integer), CType(CType(19, Byte), Integer))

But the Visual Studio Color Picketer shown below will not allow you to set the Alpha color in designer. The Me.HomeTabChart.BorderlineColor color was set in designer (no Alpha value specified) but the 180 in ChartArea1.BorderlineColor was set by editing the Designer file in Visual Studio. Once set nothing changes it which is great.

I have seen some answers on the web that reference using the scrollbar for Alpha and maybe in theory that is how it should work but in Visual Studio that just changes the color and the Alpha channel stays the same. That might actually be the bug, the scrollbar is not working as intended.

[paul1956]

Ping

[merriemcgaw]

Thanks for the clarification @paul1956. Do you know if this has ever worked for either .NET Framework or .NET Core?

[paul1956]

@merriemcgaw sorry I don't. I only started using Alpha Channel since .NET Core. There is a lot of discussion on internet/stack overflow.. around incorrect usage of color picker scrollbar some apps use it for Alpha Channel, but VS uses it for nothing useful that I can figure. If there were 2 scroll bars you could hit all RGB colors but with 1 its odd and why white to black when moving it changes colors. .NET and .NET Core both support Alpha Channel in the designer file but no UI to set it in Visual Studio.

[merriemcgaw]

We can put this on our backlog, but I do have to warn that it's not going to be at the top of our priority list. @Olina-Zhang can you copy this issue over to the designer and we will see what can be done. We'll also search for other indicators around customer feedback to see where we need to prioritize this issue.

[paul1956]

I don't think it is high priority but I do believe current behavior of slider is wrong and not sure why Alpha is not displayed when it's supported in the designer file.

[elachlan]

I mean, adding an "alpha" text box at least would be an improvement. Maybe to the left of Hue?

[Olina-Zhang]

@Olina-Zhang can you copy this issue over to the designer and we will see what can be done.

Opened GH designer issue: https://github.com/microsoft/winforms-designer/issues/4731, which has been closed as not planned, will take a look at it in the future if we have any additional customer asks.

[paul1956]

@merriemcgaw

I just was going through the Windows API and it supports "IsAlphaEnabled' and if set to true you get the desired ability to adjust the Alpha channel as shown in the image,

In this example, you enable an opacity slider and textbox on the color picker.

<ColorPicker x:Name="myColorPicker"
             IsAlphaEnabled="True"/>

[merriemcgaw]

Thanks @paul1956 this is definitely something to consider, exposing the appropriate APIs. We're getting a bit late in the .NET 8 timeframe to create said APIs, but it's certainly something to keep in mind for .NET 9. That said, the picker you see in VS is in the Visual Studio process, and that is based on .NET Framework. @dreddy-work do you know where this API comes from? If it's System.Design there's a chance we can do something after .NET 8.

[paul1956]

@merriemcgaw Its in the designer that I think it is needed first. the designer supports the Alpha channel only if you hand edit the Designer file which I know is being discouraged because it has all kinds of side effects.

FullNameLabel.BackColor = Color.FromArgb(CByte(0), CByte(255), CByte(255), CByte(255))

[paul1956]

@merriemcgaw https://learn.microsoft.com/en-us/windows/apps/design/controls/color-picker#Configure%20The%20Color%20Picker

[merriemcgaw]

@paul1956 that's the WinUI based Color picker, not the Win32 one which is what we generally use. I'm sure there'd be a way to include it in the end user apps, but I don't think it will work right in VS. This is the Win32 one I believe: https://learn.microsoft.com/en-us/windows/win32/dlgbox/color-dialog-box#Full%20and%20Partial%20Color%20Dialog%20Boxes

[paul1956]

@merriemcgaw

That does not support the Alpha channel, from what I read, and the comment seems to agree. "The low-order byte contains a value for the relative intensity of red; the second byte contains a value for green; and the third byte contains a value for blue. The high-order byte must be zero."

I would be happy with a separate Alpha property that just took a value from 0 to 255. Everything in the designer file supports the Alpha Channel and if the file is inherited from Framework everything just works. The problem is you can't set it from UI if it doesn't exit, hand editing of the designer file is required to add it, changing it is supported.

[merriemcgaw]

Thanks @paul1956. Unfortunately, this would be controlled by VS UI (PropertyBrowser is VS UI and therefore is .NET Framework based) so it would require a .NET Framework change. New surface area in .NET Framework is forbidden. If we get more feedback from others that this is something they really need, I think we'd need to build the color picker purely in VS, not get it from .NET Framework and that would be a big undertaking.

[elachlan]

Could we create out own editor in the Design namespace similar to the other editors? Or is that overkill? It could then be used at runtime as well.

[paul1956]

@merriemcgaw what about just adding an Alpha Property wherever color is used, I don't see to see because that would depend on the current background anyway? It looks like it's the only property supported in the Designer file that can't change in the UI. As you can see in the example below the designer outputs the Alpha channel but it's always 0.

FullNameLabel.BackColor = Color.FromArgb(CByte(0), CByte(255), CByte(255), CByte(254))

You can change any of the 25x's to any value you want in the UI.

[paul1956]

@elachlan two different issues, having a color picker at runtime that supports the Alpha channel would be great. The problem I am trying to solve is to be able to select a Color (Color.Red for example) in the color picker and then set its Alpha to 20 without hand editing the Designer file which for me causes many issues that are separately reported. Below is supported today but there is no way to create it in UI. Once it is created it can be edited.

CurrentBGLabel.ForeColor = Color.FromArgb(CByte(20), CByte(255), CByte(0), CByte(0))

The UI even shows the color with the correct Alpha

One option would be after picking a color would be to just include an Alpha of 0. Then the UI would just support it.

[paul1956]

@merriemcgaw after more research the solution is even easier. When the Designer writes out the value to Designer file all that is required is to write out as below

Control1.ForeColor =  Color.FromAGRB(CByte(0), Color.Red) ' The CByte currently used is really unnecessary.

This format is already supported and used as shown above.

After that the designer fully supports the Alpha channel and even displays it correctly as shown above. You could put it behind an Experimental Flag if there is any concern for people that don't want to use it.

[merriemcgaw]

@paul1956 that's interesting. I can check with @KlausLoeffelmann if that's something that can be easily accomplished in his current work, but we're rather under water so there will likely be a delay to getting something like this into VS.

[KlausLoeffelmann]

I didn't have the time to read the whole thread, though...doesn't entering the alpha value work with the property browser today by entering the values like a,r,g,b? When you are then getting an invalid property value exception, the problem is more that at that point you cannot have a transparent color rather than the converter not being able to parse it correctly - or am I am missing something?

[paul1956]

@KlausLoeffelmann I am not getting an exception. If I manually edit the Designer file, I can add the Alpha channel either

Control1.ForeColor =  Color.FromAGRB(CByte(0), Color.Red)

Or

CurrentBGLabel.ForeColor = Color.FromArgb(CByte(20), CByte(255), CByte(0), CByte(0))

and once its there I can edit the number and the correct color including the Alpha channel is displayed in the property window.

This only remaining issue is how to do that WITHOUT editing the Designer file which causes all kinds of stuff to reformat and makes git changes extensive, when the form reformats.

Unless I am missing something the editor only allows this

Manually editing of designer file allows this

[paul1956]

@KlausLoeffelmann I just tried clicking and typing into the color box. If you do that you can type the required 4 values. without editing the Designer file. So the urgency of this issue goes way down.

I think eventually it would be nice to have the color picker support the Alpha Channel.

[KlausLoeffelmann]

doesn't entering the alpha value work with the property browser today by >>entering<< the values like a,r,g,b?

That's what I meant when I wrote this! 😸

[paul1956]

@KlausLoeffelmann I knew it worked when I started from a,r,g,b it was not obvious that you could type a number when the field looked like this with the cursor after "yellow" by erasing the word "yellow" and then just typing 4 numbers.

[KlausLoeffelmann]

Yeah, true. That's really not that obvious. BTW: A good trick is also to search for a TypeConverter for that particular type in the runtime. There you can see what string conversions that thing supports.

This...

https://source.dot.net/#System.ComponentModel.TypeConverter/System/Drawing/ColorConverter.cs,42

leads here:

https://source.dot.net/#System.ComponentModel.TypeConverter/src/libraries/Common/src/System/Drawing/ColorConverterCommon.cs,59

[paul1956]

@KlausLoeffelmann thanks very useful. @merriemcgaw All of the discussion was really outside the original issue which is lack of color picker that supports ARGB. If you don't plan on it, closing this issue is OK. The designer supports and displays ARGB values correctly, you can change the Alpha (or any color) values and see them in the UI by changing the numeric value(s). Maybe all that is required is to update documentation (or what's New, yes, its old but not discoverable) to explain how to change Alpha values. Or a short article that talks about the designer TypeConverter's and explains how to do all operations of this kind.

[merriemcgaw]

Thanks for the great discussion @paul1956! I don't think it's something we can do in the designer in the foreseeable future though, so I will close the issue. I'm glad you raised it though!