CODEWITHSUNDEEP
c#xamarin.forms
Chandu Ranwala
Chandu Ranwala

Reputation: 305

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.

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

How can I do this in xamarin Forms.

Upvotes: 3

Views: 15604

Answers (3)

Indian
Indian

Reputation: 31

           //  Install Rg.Plugins.Popup Nuget Package

           //xaml code view for popup

           <?xml version="1.0" encoding="utf-8" ?>
        <animations:PopupPage  xmlns:animations="http://rotorgames.com" 
       xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App.Modules.EmployeeTestDescriptionPopupPage"
                    xmlns:customControl="clr- 
           namespace:App.Controls">
         <Frame VerticalOptions="CenterAndExpand" Margin="10,0,10,0" 
         HorizontalOptions="CenterAndExpand" BackgroundColor="#FFFFFF">
    <StackLayout >
        <StackLayout Orientation="Horizontal" BackgroundColor="#09326A" 
           Padding="10,10,10,10">

            <Label Text="Display Description"  TextColor="White" FontSize="20" > 
           </Label>
            <Image HorizontalOptions="EndAndExpand" Margin="40,0,0,0">
                <Image.Source>
                    <FontImageSource Glyph="&#xf00d;"
                                     Size="20"
                                     Color="White"
                                     FontFamily="{StaticResource 
          FontAwesomeSolid}"></FontImageSource>
                </Image.Source>
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="ClosePopup_Tapped" 
           NumberOfTapsRequired="1"></TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
        </StackLayout>
        <ScrollView>
            <StackLayout>
                <StackLayout>
                    <Label x:Name="lblDescription" FontSize="14"/> 
              **//Body of popup will come here**
                </StackLayout>
            </StackLayout>
        </ScrollView>
        <!--Buttons Start-->
        <StackLayout Orientation="Horizontal" HorizontalOptions="End">
            <Button Text="Close" TextColor="White" BackgroundColor="#F46A6A" 
    Clicked="ClosePopup_Tapped"/>
        </StackLayout>
        <!--Buttons End-->
    </StackLayout>
        </Frame>
           </animations:PopupPage>


         // xaml.cs code


            using Rg.Plugins.Popup.Pages;
         using Rg.Plugins.Popup.Services;
            using System;
            using System.Collections.Generic;
       using System.Linq;
      using System.Text;
            using System.Threading.Tasks;

             using Xamarin.Forms;
             using Xamarin.Forms.Xaml;

           namespace App.Modules
             {
       [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class EmployeeTestDescriptionPopupPage : 
           PopupPage
             {
             public EmployeeTestDescriptionPopupPage(string 
                         TestDescription)
               {

        InitializeComponent();
        lblDescription.Text = TestDescription;

    }

    //Close Button Functionality
    public async void ClosePopup_Tapped(object sender, EventArgs e)
    {
        await PopupNavigation.Instance.PopAsync();
    }
    }
      }

Upvotes: 0

Nikhileshwar
Nikhileshwar

Reputation: 1684

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.

enter image description here

Hope this could help you in achieving your UI.

Upvotes: 6

Anand
Anand

Reputation: 1959

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/

Upvotes: 3

Related Questions