如何在 xamarin 表单中显示自定义弹出窗口时使背景视图变暗

Question

实现：

要求： 我在特定条件下向用户显示自定义弹出窗口，但我无法使弹出背景变暗，就像显示警报即将到来时它的背景屏幕很暗一样。请提出任何想法。提前致谢。

这里是示例代码：

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

这里是代码CustomPopup代码：

<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

在自定义弹出背景中，您可以赋予 BackgroundColor="##60000000" 以产生类似弹出的效果。我已经在PopUp to contains other controls like DateTime Picker,dropdownlist 中详细解释了这一点 你也可以查看我的 repo github.com/RenjithPr90/DemoPopUp 谢谢

Answer 2

您需要做的是使用BoxView 作为背景并将弹出窗口覆盖在顶部。

BoxView 将用于创建深色背景。 这可以通过将BoxView 的背景颜色设置为黑色并将Opacity 设置为大约0.5 来实现。

完成背景后，您只需将弹出视图覆盖在BoxView 的顶部即可。这可以通过几个布局来实现（RelativeLayout、AbsoluteLayout、Grid）

Answer 3

我不知道这是否是正确的解决方案/方法，但它会完成工作。

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

在这里你可以看到我只是将 StackLayout 的可见性绑定到IsLoading。

在.cs页面内，实现INotifyPropertyChanged。确保根据对话框设置 BindingContext IsLoading 值。下面的代码会比我更好地解释我的逻辑。

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

        }
    }
}

在 Android 设备上测试，运行良好。

Answer 4

在 XAML 中，试试这个代码。 (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>

您可以为BackgroundColor 设置您想要的颜色，并根据需要设置Opacity。 （0.5 将使其 50% 不透明）

在您的代码中，您可以按如下方式显示进度。

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

完成后，您可以将上述两个值设置为false。