Overlapping layouts with different colors affects the color

dinobdinob USUniversity ✭✭✭
edited June 2 in Xamarin.Forms

I have a strange situation that I cannot explain

I have a page with 2 relative layouts, one is visible and has white background and the other is hidden and has black background with 0.6 opacity, so it is partially transparent if it is shown. Both take entire page, something like:

<RelativeLayout>  //parent container taking entire page
   <RelativeLayout x:Name="A" Color="White">  //this relative layout is visible, takes entire parent layout space
   </RelativeLayout>

   <RelativeLayout x:Name="B" Color="Black" Opacity="0.6" IsVisible="False">  //this relative layout is hidden, takes entire parent layout space
   </RelativeLayout>
</RelativeLayout>

If I run my app, my page shows A layout with white color, that is all great.
On a button tap, I set layout B to be visible. This now shows my B layout and semi transparent black, this is also great.
But if I tap on button again to set layout B to invisible again, my layout A shows again but its color is not entirely white but bit darker. It looks like the semi transparent black color from layout B somehow affected white color of layout A.

Any idea what is wrong and thanks?

Answers

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    Suggestion: Don't use Opacity. Its never been reliable and Xamarin's own people (At Evolve 2016 conference) said it slows down rendering.

    Instead define a black with partial opacity as the color
    Color GhostBlack = Color.FromHex("@66000000"); //AARRGGBB

  • LucasZhangLucasZhang Member, Xamarin Team Xamurai

    Can you share your sample , I use the following code and it works fine on my side.

    <RelativeLayout>
            <RelativeLayout x:Name="A" WidthRequest="300" HeightRequest="150" BackgroundColor="White">
            </RelativeLayout>
    
            <RelativeLayout x:Name="B" WidthRequest="300" HeightRequest="150" BackgroundColor="Black" Opacity="0.6" IsVisible="False">
            </RelativeLayout>
    
            <Button Text="Click Me" TextColor="Black" Clicked="Button_Clicked"/>
    </RelativeLayout>
    
    private void Button_Clicked(object sender, EventArgs e)
    {
        B.IsVisible = !B.IsVisible;
    }
    
  • dinobdinob USUniversity ✭✭✭

    @LucasZhang said:
    Can you share your sample , I use the following code and it works fine on my side.

    <RelativeLayout>
            <RelativeLayout x:Name="A" WidthRequest="300" HeightRequest="150" BackgroundColor="White">
            </RelativeLayout>
    
            <RelativeLayout x:Name="B" WidthRequest="300" HeightRequest="150" BackgroundColor="Black" Opacity="0.6" IsVisible="False">
            </RelativeLayout>
    
            <Button Text="Click Me" TextColor="Black" Clicked="Button_Clicked"/>
    </RelativeLayout>
    
    private void Button_Clicked(object sender, EventArgs e)
    {
        B.IsVisible = !B.IsVisible;
    }
    

    My layout B uses ZXing camera barcode scanner. I am not sure if that was the cause of this issue but meanwhile I have moved onto another project so I am not looking into this issue anymore. Thanks to both @LucasZhang and @ClintStLaurent for your input.

Sign In or Register to comment.