How to darken the background view while custom popup is showing in xamarin forms

Question

Achieving :

Requirement: I am showing custom popup to the user at perticular condition but I am not able to darken the popup background like when display alert is coming it's background screen is dark. Please suggest any idea. Thanks in advance.

Here is the sample code :

     <Grid>
    <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
      <StackLayout Grid.Row = "0" HorizontalOptions = "FillAndExpand" VeticalOptions = "FillAndExpand">
    <Label Text = "Sample" />   
    <Label Text = "Sample" /> 
    <Label Text = "Sample" /> 
    <Label Text = "Sample" /> 
 </StackLayout>
 <controls:SampleCustomPopup x:Name="DialACallControl" Grid.Row="0" IsVisible="{Binding IsPopUpToShow}" Grid.RowSpan="2"        
          VerticalOptions="CenterAndExpand"/>  
  </Grid>

Here is the code CustomPopup code:

<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="7">
    <Frame BackgroundColor="White" OutlineColor="#f5f5f5" HasShadow="True">
        <StackLayout>
            <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                <Image Source="phone.png">
                    <Image.HeightRequest>
                        <OnIdiom x:TypeArguments="x:Double">
                            <OnIdiom.Phone>
                                <OnPlatform x:TypeArguments="x:Double" iOS="25" Android="30" WinPhone="30" />
                            </OnIdiom.Phone>
                            <OnIdiom.Tablet>
                                <OnPlatform x:TypeArguments="x:Double" iOS="35" Android="40" WinPhone="40" />
                            </OnIdiom.Tablet>
                        </OnIdiom>
                    </Image.HeightRequest>
                </Image>
                <Label Text="{Binding PhoneNumber}" VerticalTextAlignment="Center" TextColor="#323232" FontFamily="Avenir Book">
                    <Label.FontSize>
                        <OnIdiom x:TypeArguments ="x:Double" Phone ="15" Tablet ="20"/>
                    </Label.FontSize>
                </Label>
            </StackLayout>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Text="Call" Grid.Column="0" TextColor="White" BorderRadius="0" HorizontalOptions="FillAndExpand" 
                VerticalOptions="FillAndExpand" BackgroundColor="#f2c646" BorderColor="Black" StyleId="phagspab" >

                    <Button.FontSize>
                        <OnIdiom x:TypeArguments ="x:Double" Phone ="15" Tablet ="20"/>
                    </Button.FontSize>
                    <Button.HeightRequest>
                        <OnIdiom x:TypeArguments="x:Double">
                            <OnIdiom.Phone>
                                <OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="30" />
                            </OnIdiom.Phone>
                            <OnIdiom.Tablet>
                                <OnPlatform x:TypeArguments="x:Double" iOS="40" Android="50" WinPhone="40" />
                            </OnIdiom.Tablet>
                        </OnIdiom>
                    </Button.HeightRequest>
                </Button>
                <Button Text="Cancel" Grid.Column="1" TextColor="White" BorderRadius="0" HorizontalOptions="FillAndExpand" 
               VerticalOptions="FillAndExpand" BackgroundColor="#323232" BorderColor="Black" StyleId="phagspab" >
                    <Button.FontSize>
                        <OnIdiom x:TypeArguments ="x:Double" Phone ="15" Tablet ="20"/>
                    </Button.FontSize>
                    <Button.HeightRequest>
                        <OnIdiom x:TypeArguments="x:Double">
                            <OnIdiom.Phone>
                                <OnPlatform x:TypeArguments="x:Double" iOS="30" Android="40" WinPhone="30" />
                            </OnIdiom.Phone>
                            <OnIdiom.Tablet>
                                <OnPlatform x:TypeArguments="x:Double" iOS="40" Android="50" WinPhone="40" />
                            </OnIdiom.Tablet>
                        </OnIdiom>
                    </Button.HeightRequest>
                </Button>
            </Grid>
        </StackLayout>
    </Frame>
</StackLayout>            

Answer 1

In XAML, try this code. (Referred)

<Grid>
    <ScrollView>
        <!-- Insert your page content in here -->
    </ScrollView>

    <ContentView IsVisible="false" HorizontalOptions="FillAndExpand" BackgroundColor="LightGray" Opacity="0.5" VerticalOptions="FillAndExpand" x:Name="LogOutContentView">
        <ActivityIndicator IsRunning="false" x:Name="LogoutProgressIndicator" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
    </ContentView>
</Grid>

You can put the colour you want for BackgroundColor and set the Opacity as required. (0.5 will make it 50% opaque)

In your code, you can show the progress as follows.

LogOutContentView.IsVisible = true;
LogoutProgressIndicator.IsRunning = true;

And when done, you can set the above two values to false.

Answer 2

I don't know whether this is the right solution/approach but it will do the job done.

<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    <StackLayout IsVisible="{Binding IsLoading}" BackgroundColor="#80000000" Grid.Row="0" Grid.Column="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
    <Button Grid.Row="0" Grid.Column="0" Text="TAP ME" Clicked="Handle_Clicked" VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>

Here you can see I am just binding the visibility of the StackLayout to IsLoading.

Inside .cs page, implement INotifyPropertyChanged. Make sure to set BindingContext IsLoading value according to the dialog. Below code will explain my logic better than me.

public partial class TestAppsPage : ContentPage, INotifyPropertyChanged
{
    public TestAppsPage()
    {
        InitializeComponent();
        BindingContext = this;
    }

    async void Handle_Clicked(object sender, System.EventArgs e)
    {
        IsLoading = true;
        var answer = await DisplayAlert("Mr Title", "This is a dummy", "OK", "Cancel");
        if (answer || !answer)
            IsLoading = false;

    }



    private bool isLoading;
    public bool IsLoading
    {
        get
        {
            return isLoading;
        }

        set
        {
            isLoading = value;
            RaisePropertyChanged("IsLoading");
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string propName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));

        }
    }
}

Tested on an Android device and works fine.

Answer 3

What you will need to do is use a BoxView as you background and overlay your pop up over the top.

The BoxView will be used to create the dark background. This can be achieved by setting the background color of the BoxView to black and setting the Opacity to about 0.5.

Once you have the background done you simply have to overlay your popup view over the top of the BoxView. This can be achieved by a few Layouts (RelativeLayout, AbsoluteLayout, Grid)

Answer 4

In the custom pop up background you can give BackgroundColor="##60000000" which gives a pop up like effect. I have explained this in details in PopUp to contains other controls like DateTime Picker,dropdownlist You can also check my repo github.com/RenjithPr90/DemoPopUp Thanks