How to create a Pop up view in xamarin Forms

Question

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 th

Answer 1

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

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

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

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

Above code UI result.

Hope this could help you in achieving your UI.

Answer 2

You can use Rg.Plugins.Popup for creating wonderful popups in xamarin.forms. Refer here https://github.com/rotorgames/Rg.Plugins.Popup

For more details https://askxammy.com/how-to-work-with-advanced-pop-ups-in-xamarin-forms/