Question

是否可以使用绝对布局作为自定义弹出窗口？我正在尝试创建一个自定义弹出窗口。这可能吗？

<form id="tempConverter">
  Convert: <input type="text" id="unit" name="converter" />
  <input
   type="button"
   value="Submit" 
   onclick="temperatureConverter(document.getElementById('unit').value);"
  />
 </form>

<p>Celcius: <span id="outputCelcius"></span></p>

Answer 1

您可以使用AbsoluteLayout来实现，并添加一个淡入淡出的动画。这里正在运行GIF。

dcc654d

有代码。

      <StackLayout>

    <Button
        x:Name="btn"
        Text="click"
        />

    <ContentView x:Name="popupLoginView" BackgroundColor="#C0808080" Padding="10, 0" IsVisible="false" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All">
        <AbsoluteLayout  VerticalOptions="Center" HorizontalOptions="Center">
            <StackLayout Orientation="Vertical" HeightRequest="200" WidthRequest="300" BackgroundColor="White">
                <Entry Margin="20,20,20,10" Placeholder="Enter Username"></Entry>
                <Entry Margin="20,0,20,0" Placeholder="Enter Password"></Entry>
                <Button Margin="20,0,20,0" Text="Login"></Button>

            </StackLayout>
        </AbsoluteLayout>
    </ContentView>
</StackLayout>

在xamarin表单中，您可以添加淡入淡出动画以进行查看。有动画代码。

 public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
      btn.Clicked += Btn_Clicked;
    }




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

        if (popupLoginView.IsVisible==true)
        {
            btn.IsEnabled = false;
              await popupLoginView.FadeTo(0,2000);
            await Task.Delay(2000);
            popupLoginView.Opacity = 0;
            popupLoginView.IsVisible = false;

            btn.IsEnabled = true;
            return;


        }
        if (popupLoginView.IsVisible == false)
        {

            if (popupLoginView.Opacity==1)
            {
                popupLoginView.Opacity = 0;
            }

            popupLoginView.IsVisible = true;
            btn.IsEnabled = false;
            await popupLoginView.FadeTo(1, 2000);
              await Task.Delay(2000);
            btn.IsEnabled = true;
            popupLoginView.Opacity = 1;
            return;

        }


    }
}

有关于淡入淡出动画的文章。

如果您想使用Rg.Plugins.Popup来实现并添加动画，可以参考这篇文章，它将添加一些动画。

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/animation/simple#fading

如何使用绝对布局创建自定义弹出窗口？

1 个答案: