如何在xamarin表单中创建弹出视图 [英] How to create a Pop up view in xamarin Forms

问题描述

我需要创建一个带有覆盖层的弹出视图.

I need to create a Pop Up view that with an overlay.

我尝试使用绝对布局来做到这一点.

I have tried with Absolute Layout to do this.

但是我无法实现应该从下到上的导航部分.

But I can not achieve navigation part here that should come from bottom to top.

这可以在xamarin.iOS中使用 Modal Presentation 来完成.

This can be done in xamarin.iOS with Modal Presentation.

如何在 xamarin表单中执行此操作.

推荐答案

弹出动画更像是从底部缩放而不是翻译.(在设置页面的android默认弹出窗口中检查Popup动画)

The popup animation is more like scaling from bottom than translation. (Check the Popup animation in the android default popups in settings page)

您可以通过设置Anchor，然后为弹出视图的Scale属性设置动画来实现类似导航的效果.

You can achieve the navigation like effect by setting Anchor and then animating Scale property of the popup view.

您可以使用内置的Xamarin动画实现弹出窗口的任何动画.我在这里从右下角提供了比例的示例.

You can achieve any animation of popup using the built in Xamarin animation. I have provided an example of scale from bottom right here.

Xaml弹出窗口

        <Frame
            x:Name="popuplayout"
            HasShadow="True"
            IsVisible="False"
            Scale="0"
            BackgroundColor="White"
            AbsoluteLayout.LayoutFlags="All"
            AbsoluteLayout.LayoutBounds="1,1,0.5,0.5">
            <StackLayout>
                <Label Text="One"/>
                <Label Text="Two"/>
                <Label Text="Three"/>
                <Label Text="Four"/>
                <Label Text="Five"/>
                <Label Text="Six"/>
            </StackLayout>
        </Frame>

cs按钮单击以弹出动画.

cs button click for the popup animation.

private async void Button_Clicked(object sender, EventArgs e)
    {
        if (!this.popuplayout.IsVisible)
        {
            this.popuplayout.IsVisible = !this.popuplayout.IsVisible;
            this.popuplayout.AnchorX = 1;
            this.popuplayout.AnchorY = 1;

            Animation scaleAnimation = new Animation(
                f => this.popuplayout.Scale = f,
                0.5,
                1,
                Easing.SinInOut);

            Animation fadeAnimation = new Animation(
                f => this.popuplayout.Opacity = f,
                0.2,
                1,
                Easing.SinInOut);

            scaleAnimation.Commit(this.popuplayout, "popupScaleAnimation", 250);
            fadeAnimation.Commit(this.popuplayout, "popupFadeAnimation", 250);
        }
        else
        {
            await Task.WhenAny<bool>
              (
                this.popuplayout.FadeTo(0, 200, Easing.SinInOut)
              );

            this.popuplayout.IsVisible = !this.popuplayout.IsVisible;
        }

上面的代码UI结果.

希望这可以帮助您实现UI.

Hope this could help you in achieving your UI.

这篇关于如何在xamarin表单中创建弹出视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！