Opacity not working

mshwfmshwf EGMember ✭✭✭
edited December 2017 in Xamarin.Forms

I want to set the Opacity for a BoxView:

but the rendered color is a solid black:

to see how it behaves I bound the opacity value to a Slider's Value:

<StackLayout x:Name="stk">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <local:RadioButtonsGroup x:Name="rbs" SelectedValuePath="Id" DisplayMemberPath="Name" FontAttributes="Bold" FontFamily="Droid Sans Mono" FrontColor="#2061D8"/>
                <Label HorizontalOptions="CenterAndExpand" FontSize="Large" TextColor="Black" Text="{Binding SelectedValue, Source={x:Reference rbs}}"/>
                <BoxView HeightRequest="100" WidthRequest="150" BackgroundColor="Black" Opacity="{Binding Value, Source={x:Reference sd}}" HorizontalOptions="Center" VerticalOptions="Center"/>
                <Slider x:Name="sd" Grid.Row="1"/>
                <Label Text="{Binding Value, Source={x:Reference sd}}" Grid.Row="2"/>
            </Grid>
        </StackLayout>

Answers

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @mshwf What is the Max Value of the slider? Have you tried setting the Box's Opacity to different values, without binding?

  • mfeingolmfeingol Member
    edited December 2017

    I'm seeing the same problem with code like this:

    <Grid>
        <BoxView BackgroundColor="Green" Opacity="0.1" />
        <StackLayout Orientation="Horizontal">
            <Label Text="Hello" />
            <Label Text="World" />
        </StackLayout>
    </Grid>
    

    It's not so much that Opacity doesn't work, as that it appears to be blending with black. So 0.1 is 10% green, 90% black.

    Oddly, if I remove the StackLayout and just leave a single Label, then Opacity on the BoxView works just as you'd expect. This is almost definitely a Xamarin.Forms bug.

    The workaround I applied for my somewhat more complex scenario was to use a converter that applies the alpha channel manually to the BackgroundColor property. That works fine.

  • mshwfmshwf EGMember ✭✭✭

    @mfeingol said:
    I'm seeing the same problem with code like this:

    <Grid>
        <BoxView BackgroundColor="Green" Opacity="0.1" />
        <StackLayout Orientation="Horizontal">
            <Label Text="Hello" />
            <Label Text="World" />
        </StackLayout>
    </Grid>
    

    It's not so much that Opacity doesn't work, as that it appears to be blending with black. So 0.1 is 10% green, 90% black.

    Oddly, if I remove the StackLayout and just leave a single Label, then Opacity on the BoxView works just as you'd expect. This is almost definitely a Xamarin.Forms bug.

    The workaround I applied for my somewhat more complex scenario was to use a converter that applies the alpha channel manually to the BackgroundColor property. That works fine.

    An even better workaround is using the 8-digit hex color format: #AC000000"

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @mshwf Is your project in PCL or in .NET Standard?

  • mshwfmshwf EGMember ✭✭✭

    @ShantimohanElchuri said:
    @mshwf Is your project in PCL or in .NET Standard?

    PCL

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @mfeingol said:

    It's not so much that Opacity doesn't work, as that it appears to be blending with black. So 0.1 is 10% green, 90% black.

    Oddly, if I remove the StackLayout and just leave a single Label, then Opacity on the BoxView works just as you'd expect. This is almost definitely a Xamarin.Forms bug.

    >

    I suspect that the BackgroundColor and Opacity of the StackLayout is interfering with the Opacity of the Label.

    I asked about PCL / .NET Standard as I found the BoxView was not working on a .NET Standard project. I will have to dig more into this issue as I learn more and more day by day about .NET Standard.

Sign In or Register to comment.