CODEWITHSUNDEEP
xamlxamarinxamarin.forms
Rasmus Christensen
Rasmus Christensen

Reputation: 8531

Specify a RGB color in XAML with Xamarin

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>

Upvotes: 13

Views: 43366

Answers (4)

David Morrow
David Morrow

Reputation: 294

         <?xml version="1.0" encoding="utf-8" ?>
         <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="ListViewDemo.MainPage"
         Title="BoxView using Color in XAML">


         <StackLayout>
         <Label Text="My Box View" FontSize="Large" BackgroundColor="LightBlue" />
    <BoxView HeightRequest="50" WidthRequest="50" HorizontalOptions="Center">
        <BoxView.Color>
            <Color x:FactoryMethod="FromRgb">
                <x:Arguments>
                    <x:Int32>192</x:Int32>
                    <x:Int32>75</x:Int32>
                    <x:Int32>150</x:Int32>
                </x:Arguments>
            </Color>
        </BoxView.Color>
    </BoxView>
</StackLayout>

Upvotes: 0

j.f.
j.f.

Reputation: 3939

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.

Upvotes: 6

The Senator
The Senator

Reputation: 5391

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>

Upvotes: 2

SushiHangover
SushiHangover

Reputation: 74094

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

Upvotes: 17

Related Questions