Creating a semi-transparent background with Xamarin.Forms

I picked up a really cool tip from Rui Marinho and @DhirendraKumar in answer to a forum post last month.

Suppose you want to add a view with a semi-transparent background, like this:

image

 

I personally really like this look at you can see it in many different applications.

Here is all it takes:

var slTitleBlock = new StackLayout
{
    Padding = new Thickness(6, 5, 6, 5),
    BackgroundColor = new Color(0, 0, 0, 0.5), 
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.End,
    Spacing = 0,
    Children = { lblTitle, lblSubtitle }
};

 

Oone of the Color constructors allows you to set the Alpha Channel value, which controls the opacity of the color.  By setting it to 0.5, you get the semi-transparent color.

Leave a Reply 3 comments