Hello friends. In this article, we will talk about creating Pop Up on Xamarin Forms. What is Pop Up at first? Pop up means that the UK will suddenly appear. In Xamarin Forms, you can think of it as a page that covers a certain area of the page. Why is Pop Up so so important? The common feature of large applications is simple and usable. With Pop Up we can earn them from my mobile application.
To explain with an example; we would like to get suggestions from a user in a project. To do this you need to press the Give suggestion button and open a Pop Up menu. Because getting a simple suggestion to go to another page will be bad for design and usability. Users, in fact, attach great importance to design in practice. So we will use pop ups.
You need to use the plugin to make a Pop Up menu in Xamarin Forms. You can, of course, write your own. This is Nuget Package name: Rg.Plugins.Popup. After adding this package to the whole project, you need to run the Initialize () function for each platform. For example iOS;
Rg.Plugins.Popup.Popup.Init();
After that, we can pass the design. In this example, the start page will be opened and there will be a button in the middle, and we will pop up the suggestion Pop Up when we click on the button. The design part of the page that will open Pop Up is as below.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Popup.AnaSayfa">
<ContentPage.Content>
<StackLayout HorizontalOptions="Center"
VerticalOptions="Center">
<Button BackgroundColor="Black"
TextColor="White"
Text="Tıkla"
Clicked="Button_Clicked"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Then we have to function for the button. This function is slightly different. It is actually a function that comes with this package. A function from the PopupNavigation class.
private void Button_Clicked(object sender, EventArgs e)
{
PopupNavigation.Instance.PushAsync(new MainPage());
}
As you can see below there is a design screen. This page is a PopUpPage type. This is the first feature we should pay attention to. In order to use the properties of this class after changing the page, we add the pages and animation properties to access the xaml outcome. Then we add animation as our first job. This is a part of you that is entirely up to you. You can set how long you want to be on the screen, how long you have to go on the screen, what animations will be used when you are on the screen, and where they will appear on the screen.
<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Popup"
xmlns:pages="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
xmlns:animations="clr-namespace:Rg.Plugins.Popup.Animations;assembly=Rg.Plugins.Popup"
x:Class="Popup.MainPage">
<pages:PopupPage.Animation>
<animations:ScaleAnimation DurationIn="500"
DurationOut="700"
EasingIn="BounceIn"
EasingOut="Linear"
HasBackgroundAnimation="True"
PositionIn="Center"
PositionOut="Center"
ScaleIn="1.2"
ScaleOut="0.8" />
</pages:PopupPage.Animation>
<!-- You can use any elements here which are extended from Xamarin.Forms.View -->
<StackLayout Margin="50"
Padding="80"
BackgroundColor="White"
HorizontalOptions="Center"
VerticalOptions="Center">
<StackLayout>
<Label Text="Öneri"
HorizontalTextAlignment="Center"
FontSize="Large"
TextColor="DodgerBlue"/>
<Editor FontSize="Medium"
Text="Öneriniz"/>
</StackLayout>
<Button BackgroundColor="Blue"
Text="Gönder'"
TextColor="White" />
</StackLayout>
</pages:PopupPage>
The screen output is as follows.
If you have any questions, please feel free to email or comment. You can reach the project here.
Comments (3)
Yakupsays:
Tuesday November 26th, 2019 at 12:13 PMGönder Tuşuna bastıktan sonra Gerek Text olsun, Gerek multiselect listview yapılmış olsun, bu Data’yı PopupNavigation.Instance.PopAsync(); ile nasıl bir önceki sayfaya göndertebiliriz? Çünkü Popup’da yapılan seçimlere göre, anasayfama yansımasını istiyorum.
omersezersays:
Wednesday November 27th, 2019 at 07:03 PMSelam Yakup,Messaging Center ile yapabilirsin. Olmazsa beraber bakarız.
Furkan Muslusays:
Thursday May 13th, 2021 at 12:22 PMBana ulaşın lütfen sorularım var: laserds@protonmail.com