Specify transparency level of a named color in XAML

Question

Is there a way in XAML to create a color object from a named color with different custom transparency level? e.g.

<Label Background="{SkyBlue;220}" />

I know this doesn't work, but just wanted to quote an example.

Solution 1

One of those times when you find the answer yourself. Here's the correct way for any future reader:

<Label.Background>
    <SolidColorBrush Color="SkyBlue" Opacity=".9" />
</Label.Background>

Opacity ranges between 0 and 1, 1 being full opaque (non-transparent).

Edit

Regarding @Dai's comment, this method indeed doesn't reset or override the transparency level of the specified color in case you're referencing a color resource that already has set some transparency. For example if your resource color is SkyBlue with transparency set to 0.5, and now you want to set it to 0.7 instead, the above method won't work directly.

To handle that situation, all you need to do is to create a little Converter that resets the alpha component of the input color. Something like this:

public class NoTransparencyConverter : IValueConverter
{
  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
  {
    var C = ((Color)value);
    return Color.FromArgb(0xFF, C.R, C.G, C.B);
  }

  public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
  {
    throw new NotSupportedException();
  }
}

and then use it in your XAML:

<SolidColorBrush Color="{Binding Path="YOUR_COLOR_RESOURCE" Converter={x:Static NoTransparencyConverter}}" Opacity=".9" />

Solution 2

Just to add a little to this one. Yes, you can absolutely set the Opacity via declarative as you showed in your answer but you don't even need the Dependency Property set, you can do it straight in the hex for the color by utilizing the Alpha on top of your RGB values (which by the way offers better performance than opacity). Where as, say you have the value for Black and you want to give it some opacity. The first 2 octets of that value can be added to accomplish the same thing.

As example;

"#000000" = Black (SOLID)

where as;

"#33000000" = Black (With 20% Opacity)

"#77000000" = Black (With 47% Opacity)

"#E5000000" = Black (With 90% Opacity)

Just to throw some elaboration out there and potentially help you in the future when the Opacity property may not be so readily available or is set as immutable. Hope this helps.

ADDENDUM: It's also worth noting that a setting to a property like alpha will always be more performant than setting an opacity to an entire element. This also applies to HTML/CSS scenarios where in something like background-color: rgba(0,0,0,.5) is better practice than say a <div style="background: black;opacity: .5)

Comments

[dotNET]

Thanks Chris. That would certainly be helpful for someone reading this in the future. The point you may have missed here is that I want to change the opacity of "named" colors, as mentioned in the question title. So for example i have no clue as to what is the hex value of SkyBlue.

[Chris W.]

It's #6698FF for future reference. All named colors come from hex originally and are easily found with a quick trip to the google machine. :) Cheers

[Mark A. Donohoe]

Just out of curiosity, how would you do this for system-defined brushes? In this case you're creating a SolidColorBrush, but if you wanted to apply an opacity to a system brush, you don't necessarily know if it's a SolidColorBrush, GradientBrush, etc., and if the latter, you'd have to replicate the color stops and everything else. Only thing I can think of is to somehow create a brush converter.

[dotNET]

@MarqueIV: Do you know of any system brush that is not SolidColorBrush?

[Mark A. Donohoe]

The background brush for toolbars. They have a gradient. I'm actually working on a solution now. I think I've found one. It involves a markup extension, a proxy object and a regular IValueConverter interface! :)

[Mark A. Donohoe]

Even better... here's exactly what I wanted to achieve! stackoverflow.com/a/24227295/168179 I just created a BrushOpacityConverter which clones the passed-in brush and changes its opacity. Bingo!

[Dai]

Unfortunately this doesn't reset or override the opacity of the color itself - I'm trying to reuse a <Color> in an imported ResourceDictionary that is already at 0.5 opacity, and setting Opacity="0.5" means the actual rendered opacity is now 0.25.

[dotNET]

@Dai: A little Converter might be all you need. Just take the input color, change alpha to FF and return. Color property fortunately supports binding.

[person27]

All named colors have hex values specified in intellisense for code behind as well if you're in VS