0

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

DoctorWho
  • 1,044
  • 11
  • 34

1 Answers1

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));


            });
        }

enter image description here

Community
  • 1
  • 1
Lucas Zhang
  • 18,630
  • 3
  • 12
  • 22
  • following your instruction not working. Inside my xaml i've: But trasmparent is not visible...if Ichange some color i can see the color – DoctorWho Jun 10 '20 at 12:13
  • What means of not working ? You could share your sample . – Lucas Zhang Jun 10 '20 at 12:14
  • 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 – DoctorWho Jun 10 '20 at 12:17
  • How do you open a new page , use the Navigation ? – Lucas Zhang Jun 10 '20 at 12:30
  • Yes,I'm using: Navigation.TryPushAsync(new MyClassTrasparent()); – DoctorWho Jun 10 '20 at 12:39
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215666/discussion-between-lucas-zhang-msft-and-doctorwho). – Lucas Zhang Jun 10 '20 at 13:08
  • 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 – DoctorWho Jun 10 '20 at 13:15
  • I'm afraid it is impossible . – Lucas Zhang Jun 10 '20 at 13:17
  • Could accept it if it helps you ? I will post this thread to our product group to check if has some workaround . – Lucas Zhang Jun 10 '20 at 13:32