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

问题描述

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

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

我已经尝试使用 Absolute Layout 来做到这一点.

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 Forms 中执行此操作.

How can I do this in xamarin Forms.

推荐答案

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

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 结果.

Above code UI result.

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

Hope this could help you in achieving your UI.

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