web development

What are pop-ups?

Pop-ups are notification windows that are used to inform or persuade a user to do something. Pop-ups can be useful to users or cause them inconvenience. The sudden presence of pop-ups for advertising can cause inconvenience to users. Most pop-up notification windows are used to persuade users to advertise, but websites are not the only place to use pop-ups. Pop-ups can also be used in mobile applications to inform users or encourage them to do something.

What are the types of pop-ups and what are they used for?

There are different types of pop-ups and they can be used in different places according to their type. The types of pop-ups and their applications are as follows:

Annoying pop-ups:

Pop-ups are not annoying in themselves, but when they appear suddenly without the user"s knowledge and request, they can be annoying to users. Annoying pop-ups can be found not only on sites, but also in some applications and can be used to inform users, not to harass them.

Overlays Pop-ups:

These types of pop-ups are pop-ups that open on the same page but do not cover the entire page. Because these pop-ups open on the same page and take up half or less of the page, they are called Overlays pop-ups. These types of pop-ups can also be used in some applications and cover half of the screen and make suggestions or information to the user.

Modal pop-ups:

These types of pop-ups are pop-ups that open as a box on the same page and of course do not cover the entire page. These types of pop-ups are usually opened at the request of the user. Modals are used to persuade the user to complete the form, register, log in and press the OK button.

The feature of these pop-ups that makes them unique is that by opening this type of pop-up, other page activities become locked and impossible, and the use of other pop-ups until the user closes or approves the pop-up box. Lock screen features will be impossible. In other words, the appearance of this type of pop-up causes other parts of the page to be disabled.

Interstitials pop-ups:

These types of pop-ups cover the entire page when the user logs in to the site and cannot access the page content until the user closes the pop-up window, so to access the page content must have a pop-up window Apps are closed by the user. These types of pop-ups are usually closed by pressing the cross button, but sometimes the cross button may not be active and the user will not be able to access the page and content until the pop-ups ask him to do so. In this situation that this type of pop-up causes inconvenience to the user, so it is better not to use this type of pop-up in both sites and applications to increase the level of satisfaction and user experience.

In this article you will learn:

How to create an alert and notification window so the user can make a selection?
How to create an activity page to guide the user to do something?

How to design a pop-up using Xamarin.Forms?

Xamarin.Forms has a predefined pop-up, which is a modal type of pop-up. As we said, modals are information boxes that open to display a warning or ask a question to users, and use and access to other elements on the page will be disabled until the pop-up modal box is closed or approved by the user. To create this type of pop-up using Xamarin.Forms, we use the DisplayAlert method in the Page class.

Requirements for designing Modals pop-ups in applications for the Android operating system and platform in Visual Studio on the Windows operating system:

- Visual Studio 2019 Install the latest version on your system to do the relevant coding using it.
- Mobile development with .NET must be installed on your system to develop applications and create pop-ups.

Tip:

To learn step by step how to build an application on the iOS platform and make the necessary settings for the Mac system, how to build the first Xamarin.Forms App ? Follow.

- Open Visual Studio and create a file with the new black Xamarin.Forms app type, it is better to be careful in choosing the project name and put the names related to the project. In this article, we are going to name the project PopupsTutorial.

Of course, your application must support and use the standard .NET feature and mechanism so that you can share code on different platforms.

Note:

Be sure to include the solution name in this section of PopupsTutorial, otherwise you may encounter an error while coding.

- Double-click on MainPage.xaml in the Solution Explorer page to open a page where you can write and insert pop-up codes.

It is better to delete all the codes in the opened page and enter the following codes in that page.

<! -? 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 = "PopupsTutorial.MainPage">

<stacklayout margin = "20,35,20,20">

<button text = "Display alert" clicked = "OnDisplayAlertButtonClicked">

</button> <button text = "Display alert question" clicked = "OnDisplayAlertQuestionButtonClicked">





</button></stacklayout> </contentpage>

By inserting this code in the opened page, you actually define and create a user interface that includes two objects and the button element and StackLayout. To insert the appropriate text that will be displayed on the button, you must type and place your desired text in the Button.Text attribute, so that the desired text is displayed on the button. To define and determine the event that you can select and click the button, you can use the Clicked event, which includes the event handler, and define and specify the event that you want to be done by the user after clicking the button in the pop-up box.

- This time, open MainPage.xaml in the PopupsTutorial project and add the following code, which includes the event handlers OnDisplayAlertButtonClicked and OnDisplayAlertQuestionButtonClicked.

async void OnDisplayAlertButtonClicked (object sender, EventArgs e)

{

await DisplayAlert ("Alert", "This is an alert.", "OK");

}



async void OnDisplayAlertQuestionButtonClicked (object sender, EventArgs e)

{

bool response = await DisplayAlert ("Save?", "Would you like to save your data?", "Yes", "No");

Console.WriteLine ("Save data:" + response);

}

This code, which is written to activate the event handlers when the button is pressed, calls the OnDisplayAlertButtonClicked method, and this method also calls the DisplayAlert method. modal alert, which includes a cancel button, is created by the methods called in this piece of code, until the warning is resolved, approved or rejected by the user, the use of other parts of the page and the application will be possible for the user. In other words, this piece of code creates a warning for the user, which includes a button and the text written on the button is the word cancel, and the user can continue his activity with the application by removing this warning box.

Next, the OnDisplayAlertQuestionButtonClicked method calls an overload of the DisplayAlert method to create an alert box. This alert box, which is created using these methods in the next part of the code snippet, contains two buttons. The text written on the buttons is accept and cancel. According to the warning box that will be displayed, the user can select and click between the cancel and accept buttons to perform the desired operation, the selection of one of these two buttons will be returned as Boolean.

- To run the built application and test it in the emulator in the system, you can press the button in Visual Studio located in the toolbar or use the key combination Ctrl + F5. Then select and click the first button that appears. After the first alert is removed in the alert box, the second alert will appear, which has two buttons, accept and cancel.

Requirements for designing an action sheet pop-up in applications for the Android operating system and platform in Visual Studio on the Windows operating system:

In Xamarin.Forms there is a type of pop-up modal called action sheet, this type of pop-up is like modal pop-up and is used to guide the user to do a task. In this part of the tutorial, the DisplayActionSheet method in the Page class is used to display an action sheet that guides the user to perform a task.

1- Enter the MainPage.xaml path.
2- In MainPage.xaml, create a Button to display the action sheet.
3- Enter the following code in the path traveled.

<button text = "Display action sheet" clicked = "OnDisplayActionSheetButtonClicked">



</button>

1- Button.Text is the text that is displayed on the button and is usually selected according to the function of the text button. Enter the appropriate text with the button function in the Button.Text attribute.
2- Create an event handler to determine the behavior after clicking the Clicked event button.
3- Name the event handler OnDisplayActionSheetButtonClicked.
4- Open the MainPage.xaml file in the PopupsTutorial project from the Solution Explorer section.
5- In this section, double click on MainPage.xaml.cs to open it.
6- Next, create an event handler for OnDisplayActionSheetButtonClicked by adding the following code and add it to the class.

async void OnDisplayActionSheetButtonClicked (object sender, EventArgs e)

{

string action = await DisplayActioole.WriteLine ("Action:" + action);

}

Clicking the Button calls the OnDisplayActionSheetButtonClicked method and executes it. The OnDisplayActionSheetButtonClicked method calls up the DisplayActionSheet method to provide some help to guide the user in the task. Selecting this button will return the answer and help in the form of String.

- Click the start option to see the result and its output in your simulators.

Source: https://www.dotnek.com/Blog/Apps/create-pop-ups-in-xamarinforms-for-windows