How can I define a Silverlight Color by color component in XAML?

Question

I'm trying to set the color of my Silverlight control as a slightly transparent version of a color defined in my ResourceDictionary used by my application.

To do this, my strategy was to break the color into components, such that I could grab the RGB values, then set my own alpha value on top of that to get my semi-transparent color.

The ResourceDictionary looks something like:

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib">

<system:Byte x:Key="PrimaryLightColorAlphaValue">#FF</system:Byte>
<system:Byte x:Key="PrimaryLightColorRedValue">#DB</system:Byte>
<system:Byte x:Key="PrimaryLightColorGreenValue">#E5</system:Byte>
<system:Byte x:Key="PrimaryLightColorBlueValue">#F1</system:Byte>
<Color x:Name="PrimaryLightColor"   A="{StaticResource PrimaryLightColorAlphaValue}"
                                    R="{StaticResource PrimaryLightColorRedValue}"
                                    G="{StaticResource PrimaryLightColorGreenValue}"
                                    B="{StaticResource PrimaryLightColorBlueValue}" />
<SolidColorBrush x:Name="PrimaryLightColorBrush" Color="{StaticResource PrimaryLightColor}" />

....

Then my color would be used in my application by referencing the color or it's components.

....

<Border Background="{StaticResource PrimaryLightColorBrush}" />

....

<LinearColorKeyFrame KeyTime="00:00:00">
  <LinearColorKeyFrame.Value>
    <Color A="#CC"
           R="{StaticResource PrimaryLightColorBrushRedValue}"
           G="{StaticResource PrimaryLightColorBrushGreenValue}"
           B="{StaticResource PrimaryLightColorBrushBlueValue}" />
  </LinearColorKeyFrame.Value>
</LinearColorKeyFrame>

....

My Problem:

Silverlight XAML apparently doesn't natively support the Byte type: thus my color parts defined in the ResourceDictionary never loads and throws a "type 'Byte' not found" error.

So how can I achieve the equivalent of breaking up those A, R, G, B color values into bytes, except not using bytes? (Using string & type conversion?) Or perhaps theres a better way of defining a color, inheriting/using it, then overriding its alpha value? The catch is I need to achieve this exclusively via XAML.

Any ideas?

Answer 1

Here's how you could do it with a converter that changes alpha.

This is the converter:

public class ChangeAlphaConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var color = (Color) value;
        color.A = byte.Parse((string) parameter);
        return color;
    }
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

This is how you would use it:

<UserControl.Resources>
    <Color x:Key="BaseColor">#fff</Color>
    <SilverlightTests:ChangeAlphaConverter x:Key="ChangeAlpha"/>
</UserControl.Resources>
...
    <Border>
        <Border.Background>
            <SolidColorBrush Color="{Binding Source={StaticResource BaseColor}, Converter={StaticResource ChangeAlpha}, ConverterParameter=100}"/>
        </Border.Background>
    </Border>

In the example we set the border's background to solid white (from BaseColor ) and set the color's alpha to 100 (decimal)