Xamarin - how to make background transparent?

Question

I have a simple page with a black background. I would like to make it transparent so that the page below is visible but blurred.

Someone suggest :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:NameSpace"
         x:Class="NameSpace.MainPage"
         BackgroundColor="Transparent"> </ContentPage>

Another one suggest:

<StackLayout VerticalOptions="End" HorizontalOptions="FillAndExpand"  BackgroundColor="#80000000" Opacity="0.5" HeightRequest="160"  Grid.Row="2" >

So both work on tablets but not on mobile devices. Could someone explain to me why and / or suggest me how to solve it? Thanks in advance

Selfimmolation

Answer 1

You could use AbsoluteLayout and set the transparent of the "float" view .

<AbsoluteLayout>

       <!--below view-->
        <StackLayout BackgroundColor="Red" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

            <Button Text="111111" />

        </StackLayout>


        <!--float view-->
        <StackLayout BackgroundColor="Gray" Opacity="0.5" AbsoluteLayout.LayoutBounds="0.5,0,1,0.5" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

            

        </StackLayout>


    </AbsoluteLayout>

Update

It is impossible to implement it if use Navigation . Because it is not enough to set the backgroundColor of Page . There are Rendering layers in the ContentPage .

As a workaround , we could simulate a navigation (open a new page) .

<AbsoluteLayout>

            <!--below view-->
            <StackLayout BackgroundColor="Red" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                <Button Text="open new page"  Clicked="Button_Clicked_1"/>

            </StackLayout>


            <!--float view-->
            <StackLayout x:Name="FloatView" BackgroundColor="Gray" Opacity="0.5" AbsoluteLayout.LayoutBounds="1,1,0.01,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                <Label  Text="this is a transparent view"  HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" />

                <Button Text="Back" Clicked="Button_Clicked"/>

            </StackLayout>


        </AbsoluteLayout>

private void Button_Clicked_1(object sender, EventArgs e)
        {

            //show
            Device.BeginInvokeOnMainThread(async () =>
            {


                var xPosition = 0;
                var currentPosition = 0.9;
                while (currentPosition >xPosition)
                {
                    await Task.Delay(1);
                    currentPosition -= 0.04;

                    AbsoluteLayout.SetLayoutBounds(FloatView, new Rectangle(currentPosition,0, 1, 1));
                }

            });
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            //hide
            Device.BeginInvokeOnMainThread(async () =>
            {


                AbsoluteLayout.SetLayoutBounds(FloatView, new Rectangle(1, 0, 0.01, 0.01));


            });
        }

Chancroid

following your instruction not working. Inside my xaml i've: <!--float view--> <StackLayout BackgroundColor="Transparent" Opacity="0.9" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1" AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"> </StackLayout> But trasmparent is not visible...if Ichange some color i can see the color – Selfimmolation

What means of not working ? You could share your sample . – Chancroid

I would like to set transparent on entire page, to see the page below. example: I've a blue page within image of fish. I open new page and i would like to set the new page transparent, and see the fish blurred – Selfimmolation

How do you open a new page , use the Navigation ? – Chancroid

Yes,I'm using: Navigation.TryPushAsync(new MyClassTrasparent()); – Selfimmolation

Let us continue this discussion in chat. – Chancroid

I really appreciate your example of an alternative solution. But by opening the page in that way, everything inside (see the button) would also be transparent and therefore not exactly correct. It would be essential to use Navigation and therefore open a page whose Background is transparent – Selfimmolation

I'm afraid it is impossible . – Chancroid

Could accept it if it helps you ? I will post this thread to our product group to check if has some workaround . – Chancroid