Create Pop-ups in Xamarin.Forms for Windows

What are pop-ups?

Pop-ups  are notification windows 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 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. Annoying pop-ups can be found on sites and in some applications and can be used to inform users, not to harass them.

Overlays Pop-ups:

These  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 pop-ups can also be used in some applications that cover half of the screen and make suggestions or information to the user.

Modal pop-ups:

These 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 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 pop-ups are usually closed by pressing the cross button, but sometimes the cross button may not be active. 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  have a predefined pop-up, which is a modal type of pop-up. As we said, models 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 choose 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 on the opened page and enter the following codes on that page.

By inserting this code in the opened page, you define and create a user interface that includes two objects and the button element and StackLayout. To insert the appropriate text 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, including the event handlers OnDisplayAlertButtonClicked and OnDisplayAlertQuestionButtonClicked.

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, 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. 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, created using these methods in the next part of the code snippet, contains two buttons. The text written on the buttons is accepted and canceled. According to the warning box 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 a 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 displays 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.

1- Button. Text is the text 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 adding it to the class.

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 a String.

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