Xamarin.Forms Brushes: Solid colors

Download the sample

The SolidColorBrush class derives from the Brush class, and is used to paint an area with a solid color. There are a variety of approaches to specifying the color of a SolidColorBrush. For example, you can specify its color with a Color value or by using one of the predefined SolidColorBrush objects provided by the Brush class.

The SolidColorBrush class defines the Color property, of type Color, which represents the color of the brush. This property is backed by a BindableProperty object, which means that it can be the target of data bindings, and styled.

The SolidColorBrush class also has an IsEmpty method that returns a bool that represents whether the brush has been assigned a color.

Create a SolidColorBrush

There are three main techniques for creating a SolidColorBrush. You can create a SolidColorBrush from a Color, use a predefined brush, or create a SolidColorBrush using hexadecimal notation.

Use a predefined Color

Xamarin.Forms includes a type converter that creates a SolidColorBrush from a Color value. In XAML, this enables a SolidColorBrush to be created from a predefined Color value:

<Frame Background="DarkBlue"
       BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120" />

In this example, the background of the Frame is painted with a dark blue SolidColorBrush:

Alternatively, the Color value can be specified using property tag syntax:

<Frame BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
       <Frame.Background>
           <SolidColorBrush Color="DarkBlue" />
       </Frame.Background>
</Frame>

In this example, the background of the Frame is painted with a SolidColorBrush whose color is specified by setting the SolidColorBrush.Color property.

Use a predefined Brush

The Brush class defines a set of commonly used SolidColorBrush objects. The following example uses one of these predefined SolidColorBrush objects:

<Frame Background="{x:Static Brush.Indigo}"
       BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120" />       

The equivalent C# code is:

Frame frame = new Frame
{
    Background = Brush.Indigo,
    BorderColor = Color.LightGray,
    // ...
};

In this example, the background of the Frame is painted with an indigo SolidColorBrush:

For a list of predefined SolidColorBrush objects provided by the Brush class, see Solid color brushes.

Use hexadecimal notation

SolidColorBrush objects can also be created using hexadecimal notation. With this approach, a color is specified in terms of the amount of red, green, and blue to combine into a single color. The main format for specifying a color using hexadecimal notation is #rrggbb, where:

• rr is a two-digit hexadecimal number specifying the relative amount of red.
• gg is a two-digit hexadecimal number specifying the relative amount of green.
• bb is a two-digit hexadecimal number specifying the relative amount of blue.

In addition, a color can be specified as #aarrggbb where aa specifies the alpha value, or transparency, of the color. This approach enables you to create colors that are partially transparent.

The following example sets the color value of a SolidColorBrush using hexadecimal notation:

<Frame Background="#FF9988"
       BorderColor="LightGray"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120" />

In this example, the background of the Frame is painted with a salmon-colored SolidColorBrush:

For other ways of describing color, see Colors in Xamarin.Forms.

Solid color brushes

For convenience, the Brush class provides a set of commonly used SolidColorBrush objects, such as AliceBlue and YellowGreen. The following image shows the color of each predefined brush, its name, and its hexadecimal value:

Related links

• BrushesDemos (sample)
• Colors in Xamarin.Forms