Учебник по Pop-ups в Xamarin.Forms

Статья
Developer (Начальный уровень)
6 мин до завершения

Прежде чем работать с этим учебником, вы должны выполнить:

Краткое руководство Создание первого Xamarin.Forms приложения.
Руководство по StackLayout.
Руководство по Button.

В этом руководстве описано следующее:

Отображать оповещение, чтобы просить пользователя сделать выбор.
Отображать лист действий, чтобы помочь пользователю в выполнении задачи.

С помощью Visual Studio 2019 или Visual Studio для Mac вы создадите простое приложение, демонстрирующее отображение всплывающих элементов в Xamarin.Forms. На следующих снимках экрана показано готовое приложение.

Отображение предупреждения

Осталось 5 мин

В Xamarin.Forms есть модальный всплывающий элемент (оповещение), позволяющий выводить предупреждения или задавать простые вопросы пользователю. В этом упражнении вы воспользуетесь методом DisplayAlert из класса Page, чтобы выводить оповещения для пользователя, а также задать простой вопрос.

Visual Studio
Visual Studio для Mac

Для работы с этим руководством у вас должен быть последний выпуск Visual Studio 2019 с установленной рабочей нагрузкой Разработка мобильных приложений на .NET. Кроме того, вам потребуется компьютер Mac для сборки учебного приложения на iOS. Сведения об установке платформы Xamarin см. в статье Установка Xamarin. Сведения о подключении Visual Studio 2019 к узлу сборки Mac см. в статье Связывание с Mac при разработке для Xamarin.iOS.

Запустите Visual Studio и создайте пустое приложение Xamarin.Forms с именем PopupsTutorial.

Внимание

Фрагменты кода на C# и XAML из этого руководства предполагают, что решение называется PopupsTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
В обозревателе решений дважды щелкните файл MainPage.xaml в проекте PopupsTutorial, чтобы открыть его. В MainPage.xaml удалите весь код шаблона и замените его приведенным ниже кодом:
```
<?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 Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из двух объектов Button в StackLayout. Свойства Button.Text указывают текст, отображаемый в каждом Button, а события Clicked связаны с обработчиками событий, которые будут созданы в следующем шаге.
В обозревателе решений в проекте PopupsTutorial разверните узел MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в файле MainPage.xaml.cs добавьте обработчики событий OnDisplayAlertButtonClicked и 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);
}
```
При касании Button выполняется метод обработчика соответствующего события. Метод OnDisplayAlertButtonClicked вызывает метод DisplayAlert для отображения модального оповещения с одной кнопкой "Отмена". После закрытия оповещения пользователь может продолжить работу с приложением.

Метод OnDisplayAlertQuestionButtonClicked вызывает перегрузку метода DisplayAlert для отображения модального оповещения с кнопками "Принять" и "Отмена". После того как пользователь нажмет одну из кнопок, выбор возвращается в виде boolean.

Внимание

Метод DisplayAlert является асинхронным и всегда должен ожидаться с ключевым словом await.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android. Выберите первый Button:

После отклонения оповещения коснитесь второго Button:

Обратите внимание, что после выбора ответа на вопрос он поступает в окно вывода Visual Studio. Если это окно не отображается, его можно сделать видимым, выбрав пункт меню Вид > Вывод.

В Visual Studio остановите приложение.

Дополнительные сведения об отображении оповещений см. в разделе о выводе оповещения в руководстве по отображению всплывающих окон.

Для работы с этим руководством вам нужно установить Visual Studio для Mac (последний выпуск) с поддержкой платформ Android и iOS. Кроме того, вам потребуется Xcode (последний выпуск). Дополнительные сведения об установке платформы Xamarin см. в статье Установка Xamarin.

Запустите Visual Studio для Mac и создайте пустое приложение Xamarin.Forms с именем PopupsTutorial.

Внимание

Фрагменты кода на C# и XAML из этого руководства предполагают, что решение называется PopupsTutorial. Выбор другого имени приведет к ошибкам сборки при копировании кода из этого руководства в решение.

Дополнительные сведения о создаваемой библиотеке .NET Standard см. в разделе Структура приложения Xamarin.Forms статьи Подробное изучение кратких руководств по Xamarin.Forms.
На Панели решения дважды щелкните файл MainPage.xaml в проекте PopupsTutorial, чтобы открыть его. В MainPage.xaml удалите весь код шаблона и замените его приведенным ниже кодом:
```
<?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 Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>
```
Этот код декларативно определяет пользовательский интерфейс для страницы, который состоит из двух объектов Button в StackLayout. Свойства Button.Text указывают текст, отображаемый в каждом Button, а события Clicked связаны с обработчиками событий, которые будут созданы в следующем шаге.
На Панели решения в проекте PopupsTutorial разверните узел MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в файле MainPage.xaml.cs добавьте обработчики событий OnDisplayAlertButtonClicked и 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);
}
```
При касании Button выполняется метод обработчика соответствующего события. Метод OnDisplayAlertButtonClicked вызывает метод DisplayAlert для отображения модального оповещения с одной кнопкой "Отмена". После закрытия оповещения пользователь может продолжить работу с приложением.

Метод OnDisplayAlertQuestionButtonClicked вызывает перегрузку метода DisplayAlert для отображения модального оповещения с кнопками "Принять" и "Отмена". После того как пользователь нажмет одну из кнопок, выбор возвращается в виде boolean.

Внимание

Метод DisplayAlert является асинхронным и всегда должен ожидаться с ключевым словом await.
Чтобы запустить приложения в выбранном симуляторе iOS или эмуляторе Android, нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) на панели инструментов Visual Studio для Mac. Выберите первый Button:

После отклонения оповещения коснитесь второго Button:

Обратите внимание, что после выбора ответа на вопрос он поступает в окно вывода Visual Studio для Mac. Если это окно не отображается, его можно сделать видимым, выбрав пункт меню Вид > Другие окна > Вывод приложения.

В Visual Studio для Mac остановите приложение.

Дополнительные сведения об отображении оповещений см. в разделе о выводе оповещения в руководстве по отображению всплывающих окон.

Отображение таблицы действий

Осталось 2 мин

В Xamarin.Forms есть модальное всплывающее окно, известное как таблица действий, которое помогает пользователям выполнять различные задачи. В этом упражнении вы воспользуетесь методом DisplayActionSheet из класса Page, чтобы отобразить таблицу действий, которая проводит пользователей через задачу.

Visual Studio
Visual Studio для Mac

В MainPage.xaml добавьте новое объявление Button, которое будет отображать таблицу действий:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
Свойство Button.Text указывает текст, отображаемый в Button. Кроме того, код задает для события Clicked обработчик событий с именем OnDisplayActionSheetButtonClicked, который будет создан на следующем шаге.
В обозревателе решений в проекте PopupsTutorial разверните узел MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в MainPage.xaml.cs добавьте обработчик событий OnDisplayActionSheetButtonClicked в класс:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
При касании Button выполняется метод OnDisplayActionSheetButtonClicked. Этот метод вызывает метод DisplayActionSheet, чтобы предоставить пользователю набор вариантов дальнейших действий в рамках задачи. После того как пользователь выберет один из вариантов, выбор возвращается в виде string.

Внимание

Метод DisplayActionSheet является асинхронным и всегда должен ожидаться с ключевым словом await.
На панели инструментов Visual Studio нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения), чтобы запустить приложение в выбранном удаленном симуляторе iOS или эмуляторе Android. Затем коснитесь пункта Button, добавленного в ContentPage:

Обратите внимание, что после выбора альтернативы в диалоговом окне таблицы действий выбор выводится в окне вывода Visual Studio. Если это окно не отображается, его можно сделать видимым, выбрав пункт меню Вид > Вывод.

В Visual Studio остановите приложение.

Дополнительные сведения об отображении таблицы действий см. в разделе с инструкциями по задачам в руководстве по отображению всплывающих окон.

В MainPage.xaml добавьте новое объявление Button, которое будет отображать таблицу действий:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
Свойство Button.Text указывает текст, отображаемый в Button. Кроме того, код задает для события Clicked обработчик событий с именем OnDisplayActionSheetButtonClicked, который будет создан на следующем шаге.
На Панели решения в проекте PopupsTutorial разверните узел MainPage.xaml и дважды щелкните файл MainPage.xaml.cs, чтобы открыть его. Затем в MainPage.xaml.cs добавьте обработчик событий OnDisplayActionSheetButtonClicked в класс:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
При касании Button выполняется метод OnDisplayActionSheetButtonClicked. Этот метод вызывает метод DisplayActionSheet, чтобы предоставить пользователю набор вариантов дальнейших действий в рамках задачи. После того как пользователь выберет один из вариантов, выбор возвращается в виде string.

Внимание

Метод DisplayActionSheet является асинхронным и всегда должен ожидаться с ключевым словом await.
Чтобы запустить приложения в выбранном симуляторе iOS или эмуляторе Android, нажмите кнопку Пуск (треугольная кнопка, похожая на кнопку воспроизведения) на панели инструментов Visual Studio для Mac. Затем коснитесь пункта Button, добавленного в ContentPage:

Обратите внимание, что после выбора альтернативы в диалоговом окне таблицы действий выбор выводится в окне вывода Visual Studio для Mac. Если это окно не отображается, его можно сделать видимым, выбрав пункт меню Вид > Другие окна > Вывод приложения.

В Visual Studio для Mac остановите приложение.

Дополнительные сведения об отображении таблицы действий см. в разделе с инструкциями по задачам в руководстве по отображению всплывающих окон.

Учебник по Pop-ups в Xamarin.Forms

Отображение предупреждения

Отображение таблицы действий

Поздравляем!

Следующие шаги

Учебник по Pop-ups в Xamarin.Forms

Отображение предупреждения

Отображение таблицы действий

Поздравляем!

Следующие шаги

Дополнительные ссылки