Trying to display elements over a semi translucent background

I have a page with a background image on which I'd like to display elements with a semi-transparent background. For example, a StackLayout with some labels that has a white, but semi-transparent, background so the page's background image shows partially through. I had hoped this could be achieved by simply setting opacity on the VisualElement, but unfortunately setting opacity affects both foreground and background, so the text in the labels is dimmed. Not the effect I'm going after - I want the text bright and fully opaque.

How can I achieve this effect without dimming the foreground of the elements inside the stacklayout?

Posts

  • MitchMilamMitchMilam USMember ✭✭✭

    @DavidJohnson.1675, silly question, but where did you set the Opacity? On the StackLayout?

    I was playing around with Opacity with a project of my own yesterday and I ran into this in the documentation.

  • rmarinhormarinho PTMember, Insider, Beta Xamurai

    A good way is to set the BackgroundColor for your Element with a color with alpha, other way you can achieve is overlapping a stack layout on top of a box view for example, and set color and opacity on the box view .

  • Sweet! I was unaware that I could set alpha on the colors. I haven't had a chance to try it yet, but I think that will do the trick. Thanks!

  • CraigDunnCraigDunn USXamarin Team Xamurai

    Just FYI there is a page on working with colors.

  • AppDev01AppDev01 Member ✭✭✭

    Hello @DhirendraKumar

    Can you share where this code goes and how you call it so it can be used in the xaml?

    @DhirendraKumar said:
    Easiest way is to set the background color of the layout

    var semiTransparentColor = new Color (0, 0, 0, 0.5);
    var labelLayout = new StackLayout{ 
                  BackgroundColor = semiTransparentColor,
                  Children = {a, b, c},
              };
    
Sign In or Register to comment.