Reputation: 305
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
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=""
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
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.
Hope this could help you in achieving your UI.
Upvotes: 6
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