Specify a RGB color in XAML with Xamarin

Question

I'm creating some application styles in my app and want to define some explicit colors to use by key. In WPF XAML, I would create a SolidColorBrush to define the RGB/ARGB values. In Xamarin XAML, do I need to convert this to hex to define the same color in XAML? The snippet below is from WPF XAML.

<SolidColorBrush
    x:Key="blueColor">
    <SolidColorBrush.Color>
        <Color
            A="255"
            R="50"
            G="150"
            B="225" />
    </SolidColorBrush.Color>
</SolidColorBrush>

Solution 1

Xamarin.Forms provides a cross-platform Color class.

Using from Xaml:

Colors can also be easily referenced in Xaml using the defined color names or the Hex representations shown here:

<Label Text="Sea color" BackgroundColor="Aqua" />
<Label Text="RGB" BackgroundColor="#00FF00" />
<Label Text="Alpha plus RGB" BackgroundColor="#CC00FF00" />
<Label Text="Tiny RGB" BackgroundColor="#0F0" />
<Label Text="Tiny Alpha plus RGB" BackgroundColor="#C0F0" />

The Color class provides a number of methods to build a color instance

• Named Colors - a collection of common named-colors, including Red , Green , and Blue .
• FromHex - string value similar to the syntax used in HTML, eg "00FF00".
• Alpha is can optionally be specified as the first pair of characters ("CC00FF00").
• FromHsla - Hue, saturation and luminosity double values, with optional alpha value (0.0-1.0).
• FromRgb - Red, green, and blue int values (0-255).
• FromRgba - Red, green, blue, and alpha int values (0-255).
• FromUint - set a single double value representing argb .

Ref: Using Colors in Xamarin.Forms

Solution 2

According to Xamarin's WorkingWithColors sample, you can do something like this:

<Color
  x:Key="BlueColor">
  <x:Arguments>
    <x:Double>.4</x:Double> <!-- R/255 -->
    <x:Double>.62</x:Double> <!-- G/255 -->
    <x:Double>.95</x:Double> <!-- B/255 -->
    <x:Double>.2</x:Double> <!-- A: 0.0-1.0 -->
  </x:Arguments>
</Color>

Their example doesn't show the use of the alpha channel, but I just tested it and as of May 30th, 2017, it seems to work just fine.

However, be aware that this doesn't seem to be documented. The Xamarin.Forms "Colors" guide, which goes with the code above, doesn't mention it either, so this may change without notice.

Solution 3

In direct answer to the question, you cannot specify a x:FactoryMethod="FromRgb" in xaml for specifying colours in RGB from resources. In order to work around this you must specify colours using the 'FromHex' approach and converting as appropriate e.g.

<Color x:Key="somethingGreenish" x:FactoryMethod="FromHex">
    <x:Arguments>
        <x:String>#97cd75</x:String>
    </x:Arguments>
</Color>

Comments

[Rasmus Christensen]

Yes I read that part too and the RGB definition seems not to be available. So I'll just need to convert to HEX.

[The Senator]

Could you edit your answer to be explicit? The question that the OP asked is 'Specify a RGB color in xaml with Xamarin' (not quite a question but close enough). Is the answer that 'you cannot' and that you have to convert to hex?

[pollaris]

Using hex value gives an error in visual studio 15.7.1

[SushiHangover]

@pollaris what is the exception/error you are getting?

[pollaris]

it is a syntax error - format not allowed. BTW, I went back to VS15.6.7 and there is no XAML error. There are other problems with 15.7.1 so I am not going to use it till they are fixed. (see Xamarin Forms exception has been thrown by the target of an invocation)

[Sjoerd Pottuit]

I can go around the Visual Studio error by using Build only stackoverflow.com/a/52614369/4815184 . The hex color works.