首页 > 解决方案 > 将自定义弹出窗口显示为完全不透明,如 Page.DisplayAlert()

问题描述

我正在使用 rg 弹出窗口将弹出窗口和输入字段添加到我的应用程序中,但最终结果是部分透明的,我可以看到底层控件。我希望它像 DisplayAlert 一样,他们无法在其下方看到。我正在使用 zing 扫描条形码,然后在其中放置一个带有 qty 字段的弹出窗口。

https://github.com/rotorgames/Rg.Plugins.Popup/tree/master/src/Demo/Demo/Pages

<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
                  xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"             
                  xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"       
             x:Class="FuelStockApp.Views.PopupInputBox">
    <pages:PopupPage.Animation>
        <animations:ScaleAnimation 
      PositionIn="Center"
      PositionOut="Center"
      ScaleIn="1.2"
      ScaleOut="0.8"
      DurationIn="400"
      DurationOut="300"
      EasingIn="SinOut"
      EasingOut="SinIn"
      HasBackgroundAnimation="True"/>
        </pages:PopupPage.Animation>
    <StackLayout VerticalOptions="Center" HorizontalOptions="FillAndExpand"  Padding="20, 20, 20, 20">
        <StackLayout BackgroundColor="White" Padding="0, 10, 0, 0">
            <StackLayout>


                <Entry 
                   HorizontalOptions="FillAndExpand"      
                   Placeholder="Please Enter Qty:" 
                   Keyboard="Numeric"
                       x:Name="txtMessage"
                   TextColor="Gray"></Entry>

                <Button x:Name="btnClose" Text="Ok"  Clicked="OnClose"></Button>

            </StackLayout>
        </StackLayout>
    </StackLayout>
</pages:PopupPage>

按钮点击扫描的代码。

private async void BtnTestScan_Clicked(object sender, EventArgs e)
{

    var scanPage = new ZXingScannerPage();
    scanPage.ToggleTorch();
    scanPage.IsScanning = true;
    // Navigate to our scanner page
    await Navigation.PushAsync(scanPage);


    scanPage.OnScanResult += (result) =>
    {
            // Stop scanning
            scanPage.IsScanning = false;


             // Pop the page and show the result
            Device.BeginInvokeOnMainThread(async () =>
            {

                await Navigation.PopAsync();

    BomComponentData getInfo = await database.GetBomByBarCode(result.Text);

                var popup = new FuelStockApp.Views.PopupInputBox("You scanned the item "+ getInfo.Name + "You need to pick " +getInfo.Quantity.ToString());

                await Rg.Plugins.Popup.Services.PopupNavigation.Instance.PushAsync(popup);

            });
        };
 }

在此处输入图像描述

这是我背后的代码,因为它们有一些动画来处理可能是问题的不透明度。

public partial class PopupInputBox : PopupPage
{
    public PopupInputBox(string message)
    {
        InitializeComponent();

        txtMessage.Text = message;
    }

    private async void OnClose(object sender, EventArgs e)
    {
        await PopupNavigation.Instance.PopAsync();
    }

    protected override Task OnAppearingAnimationEndAsync()
    {
        return Content.FadeTo(0.5);
    }

    protected override Task OnDisappearingAnimationBeginAsync()
    {
        return Content.FadeTo(1);
    }
}

标签: xamarin.forms

解决方案


我相信您使用FadeTo不正确。

Content.FadeTo(0.5)将透明度设置为 0.5,这将创建您看到的部分透明效果。我相信你想要的更像是Content.FadeTo(1, 500)它会导致View500 毫秒(半秒)后显示为完全不透明。

此链接到相关问题也可能有所帮助。


推荐阅读