Create Pop-ups in Xamarin.Forms for Mac

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 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:

- Pop-ups
- Overlays
- Modals
- Interstitials
- Fullscreen pop-up
- Floating pop-up
- Click pop-up
- Scroll pop-up
- Timed pop-up

Modals 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.

Scroll pop-up:

These pop-ups are shown to the user when they scroll to a specific part of the page. In other words, by designing and creating a scrolling pop-up, you specify that the user is displayed to the user when scrolling and reaching a certain part of the page.

Timed pop-ups:

These  pop-ups  are also timed and are displayed to the user over time. For example, a pop-up is displayed after one minute of the user's presence. Timed pop-ups are mostly used for ads that appear on the site and  application  page after the user is on the page to advertise and persuade the user to buy.

These types of pop-ups can both appear in applications and can be displayed on sites. Pop-up ads can appear on both apps and sites.

Advantages of using pop-ups:

- Attract users' attention
- Obtain user information such as email, phone number, personal details and ...
- Encourage users to communicate and interact
- Informing users of very important information
- Remind and provide important content to users
- Make it possible to fulfill user requests

In addition to the above tips and benefits, pop-ups also cause distraction, annoyance, inconvenience, and reduce the user experience.

Requirements for designing Modals pop-ups in applications for iOS operating systems and platforms in Visual Studio on Mac OS:

- To  create applications  with pop-ups on the platform and the iOS operating system, you need a Mac operating system that has also made the necessary settings to connect to your Windows system so that you can see the result and output.

- Visual Studio for Mac's latest version, a support platform for  Android  and  iOS  platforms, and finally, Xcode's latest version installed on your system.

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 for Mac 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 write and place the text you want 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 when a button is pressed, is written to the event handler method of the button. It 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 so that the user can use other parts of the page and the  application  until the alert is resolved, approved, or rejected. 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 for you, which has two accept and cancel buttons.

Requirements for designing pop-up action sheets in applications for the Android operating system and platform in Visual Studio on the Mac 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 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 Pad.
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.

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

You have completed these activities in this part of the training:

Create a security  alert that asks the user to make a selection. Create an action sheet that guides the user to perform a task.