Xamarin.Forms Samouczek wyskakujących okienek

Artykuł
Developer (Początkujący)
Czas do ukończenia: 6 min

Zanim podejmiesz próbę ukończenia tego samouczka, musisz pomyślnie ukończyć następujące szkolenia:

Skompiluj swój pierwszy Xamarin.Forms przewodnik Szybki start dotyczący aplikacji .
Samouczek dotyczący obiektu StackLayout.
Samouczek dotyczący obiektu Button.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Wyświetlanie alertu z prośbą o dokonanie wyboru przez użytkownika.
Wyświetlanie arkusza akcji prowadzącego użytkownika przez zadanie.

Użyjesz programu Visual Studio 2019 lub Visual Studio dla komputerów Mac, aby utworzyć prostą aplikację, która pokazuje sposób wyświetlania wyskakujących okienek w programie Xamarin.Forms. Na poniższych zrzutach ekranu przedstawiono ostateczną wersję aplikacji:

Wyświetlanie alertu

Pozostały czas: 5 min

Xamarin.Forms ma modalne wyskakujące okienko, znane jako alert, aby powiadomić użytkownika lub zadać im proste pytania. W tym ćwiczeniu zostanie użyta metoda DisplayAlert z klasy Page w celu wyświetlania alertu użytkownikowi i zadania prostego pytania.

Program Visual Studio
Visual Studio dla komputerów Mac

Do ukończenia tego samouczka jest potrzebny program Visual Studio 2019 (najnowsza wersja) z zainstalowanym pakietem roboczym Opracowywanie aplikacji mobilnych za pomocą środowiska .NET. Ponadto będzie potrzebny sparowany komputer Mac w celu kompilowania aplikacji samouczka w systemie iOS. Aby uzyskać informacje na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin. Aby uzyskać informacje na temat łączenia programu Visual Studio 2019 z hostem kompilacji Mac, zobacz Parowanie z komputerem Mac w celu opracowywania aplikacji platformy Xamarin.iOS.

Uruchom program Visual Studio i utwórz nową pustą Xamarin.Forms aplikację o nazwie PopupsTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę PopupsTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W Eksploratorze rozwiązań w projekcie PopupsTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?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>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z dwóch obiektów Button w obiekcie StackLayout. Właściwości Button.Text określają tekst wyświetlany w każdym obiekcie Button, a zdarzenia Clicked są ustawione na potrzeby programów obsługi zdarzeń, które zostaną utworzone w następnym kroku.
W Eksploratorze rozwiązań w projekcie PopupsTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy programy obsługi zdarzeń OnDisplayAlertButtonClicked i 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);
}
```
Po naciśnięciu przycisku klasy Button wykonywana jest odpowiednia metoda obsługi zdarzeń. Metoda OnDisplayAlertButtonClicked wywołuje metodę DisplayAlert, aby wyświetlić alert modalny za pomocą pojedynczego przycisku anulowania. Po odrzuceniu alertu użytkownik może kontynuować interakcję z aplikacją.

Metoda OnDisplayAlertQuestionButtonClicked wywołuje przeciążenie metody DisplayAlert, aby wyświetlić alert modalny z przyciskiem akceptowania i przyciskiem anulowania. Gdy użytkownik wybierze jeden z przycisków, wybór zostanie zwrócony jako element boolean.

Ważne

Metoda DisplayAlert jest asynchroniczna i zawsze powinno się na nią czekać, używając słowa kluczowego await.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android. Następnie naciśnij pierwszy przycisk klasy Button:

Po odrzuceniu alertu naciśnij drugi przycisk Button:

Zwróć uwagę, że po wybraniu odpowiedzi na pytanie odpowiedź stanowi dane wyjściowe w oknie Dane wyjściowe programu Visual Studio. Jeśli to okno nie jest widoczne, można je wyświetlić, wybierając opcję menu Wyświetl > dane wyjściowe .

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji o wyświetlaniu alertów, zobacz Wyświetlanie alertu w przewodniku Wyświetlanie wyskakujących okienek.

Do ukończenia tego samouczka jest potrzebny program Visual Studio dla komputerów Mac (najnowsza wersja) z zainstalowaną obsługą platform iOS i Android. Ponadto będzie również potrzebne środowisko Xcode (najnowsza wersja). Aby uzyskać więcej informacji na temat instalowania platformy Xamarin, zobacz Instalowanie platformy Xamarin.

Uruchom Visual Studio dla komputerów Mac i utwórz nową pustą Xamarin.Forms aplikację o nazwie PopupsTutorial.

Ważne

Fragmenty kodu w języku C# i XAML w tym samouczku wymagają, aby rozwiązanie miało nazwę PopupsTutorial. Użycie innej nazwy spowoduje błędy kompilacji po skopiowaniu kodu z tego samouczka do rozwiązania.

Aby uzyskać więcej informacji na temat tworzonej biblioteki .NET Standard, zobacz Anatomia Xamarin.Forms aplikacji w przewodnikuXamarin.Forms Szybki start — szczegółowe omówienie.
W okienku rozwiązania w projekcie PopupsTutorial kliknij dwukrotnie plik MainPage.xaml, aby go otworzyć. Następnie w pliku MainPage.xaml usuń cały kod szablonu i zastąp go następującym kodem:
```
<?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>
```
Ten kod deklaratywnie definiuje interfejs użytkownika dla strony, która składa się z dwóch obiektów Button w obiekcie StackLayout. Właściwości Button.Text określają tekst wyświetlany w każdym obiekcie Button, a zdarzenia Clicked są ustawione na potrzeby programów obsługi zdarzeń, które zostaną utworzone w następnym kroku.
W okienku rozwiązania w projekcie PopupsTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy programy obsługi zdarzeń OnDisplayAlertButtonClicked i 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);
}
```
Po naciśnięciu przycisku klasy Button wykonywana jest odpowiednia metoda obsługi zdarzeń. Metoda OnDisplayAlertButtonClicked wywołuje metodę DisplayAlert, aby wyświetlić alert modalny za pomocą pojedynczego przycisku anulowania. Po odrzuceniu alertu użytkownik może kontynuować interakcję z aplikacją.

Metoda OnDisplayAlertQuestionButtonClicked wywołuje przeciążenie metody DisplayAlert, aby wyświetlić alert modalny z przyciskiem akceptowania i przyciskiem anulowania. Gdy użytkownik wybierze jeden z przycisków, wybór zostanie zwrócony jako element boolean.

Ważne

Metoda DisplayAlert jest asynchroniczna i zawsze powinno się na nią czekać, używając słowa kluczowego await.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android. Następnie naciśnij pierwszy przycisk klasy Button:

Po odrzuceniu alertu naciśnij drugi przycisk Button:

Zwróć uwagę, że po wybraniu odpowiedzi na pytanie odpowiedź stanowi dane wyjściowe w oknie Dane wyjściowe aplikacji programu Visual Studio dla komputerów Mac. Jeśli to okno nie jest widoczne, można je wyświetlić, wybierając opcję Menu Wyświetl > inne dane wyjściowe aplikacji systemu Windows>.

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Aby uzyskać więcej informacji o wyświetlaniu alertów, zobacz Wyświetlanie alertu w przewodniku Wyświetlanie wyskakujących okienek.

Wyświetlanie arkusza akcji

Pozostały czas: 2 min

Xamarin.Forms ma modalne wyskakujące okienko, znane jako arkusz akcji, który może służyć do kierowania użytkowników przez zadanie. W tym ćwiczeniu użyjesz metody DisplayActionSheet z klasy Page, aby wyświetlić arkusz akcji, który prowadzi użytkowników przez zadanie.

Program Visual Studio
Visual Studio dla komputerów Mac

W pliku MainPage.xaml dodaj nową deklarację Button, która umożliwi wyświetlanie arkusza akcji:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
Właściwość Button.Text określa tekst wyświetlany w obiekcie Button. Ponadto dla zdarzenia Clicked jest ustawiany program obsługi zdarzeń o nazwie OnDisplayActionSheetButtonClicked, który zostanie utworzony w następnym kroku.
W Eksploratorze rozwiązań w projekcie PopupsTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy program obsługi zdarzeń OnDisplayActionSheetButtonClicked:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
W przypadku naciśnięcia obiektu Button jest wykonywana metoda OnDisplayActionSheetButtonClicked. Ta metoda wywołuje metodę DisplayActionSheet w celu zaoferowania użytkownikowi zestawu alternatywnych sposobów wykonania zadania. Gdy użytkownik wybierze jeden z alternatywnych sposobów, wybór zostanie zwrócony jako element string.

Ważne

Metoda DisplayActionSheet jest asynchroniczna i zawsze powinno się na nią czekać, używając słowa kluczowego await.
Na pasku narzędzi programu Visual Studio naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym zdalnym symulatorze systemu iOS lub emulatorze systemu Android. Następnie naciśnij obiekt Button dodany do obiektu ContentPage:

Po wybraniu alternatywnego sposobu w oknie dialogowym arkusza akcji wybór jest przekazywany do okna Dane wyjściowe programu Visual Studio. Jeśli to okno nie jest widoczne, można je wyświetlić, wybierając opcję menu Wyświetl > dane wyjściowe .

Zatrzymaj aplikację w programie Visual Studio.

Aby uzyskać więcej informacji na temat wyświetlania arkuszy akcji, zobacz Prowadzenie użytkowników przez zadania w przewodniku Wyświetlanie wyskakujących okienek.

W pliku MainPage.xaml dodaj nową deklarację Button, która umożliwi wyświetlanie arkusza akcji:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
Właściwość Button.Text określa tekst wyświetlany w obiekcie Button. Ponadto dla zdarzenia Clicked jest ustawiany program obsługi zdarzeń o nazwie OnDisplayActionSheetButtonClicked, który zostanie utworzony w następnym kroku.
W okienku rozwiązania w projekcie PopupsTutorial rozwiń węzeł MainPage.xaml i kliknij dwukrotnie plik MainPage.xaml.cs, aby go otworzyć. Następnie w pliku MainPage.xaml.cs dodaj do klasy program obsługi zdarzeń OnDisplayActionSheetButtonClicked:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
W przypadku naciśnięcia obiektu Button jest wykonywana metoda OnDisplayActionSheetButtonClicked. Ta metoda wywołuje metodę DisplayActionSheet w celu zaoferowania użytkownikowi zestawu alternatywnych sposobów wykonania zadania. Gdy użytkownik wybierze jeden z alternatywnych sposobów, wybór zostanie zwrócony jako element string.

Ważne

Metoda DisplayActionSheet jest asynchroniczna i zawsze powinno się na nią czekać, używając słowa kluczowego await.
Na pasku narzędzi programu Visual Studio dla komputerów Mac naciśnij przycisk Uruchom (trójkątny przycisk przypominający przycisk odtwarzania), aby uruchomić aplikację w wybranym symulatorze systemu iOS lub emulatorze systemu Android. Następnie naciśnij obiekt Button dodany do obiektu ContentPage:

Po wybraniu alternatywnego sposobu w oknie dialogowym arkusza akcji wybór jest przekazywany do okna Dane wyjściowe aplikacji programu Visual Studio dla komputerów Mac. Jeśli to okno nie jest widoczne, można je wyświetlić, wybierając opcję Menu Wyświetl > inne dane wyjściowe aplikacji systemu Windows>.

Zatrzymaj aplikację w programie Visual Studio dla komputerów Mac.

Aby uzyskać więcej informacji na temat wyświetlania arkuszy akcji, zobacz Prowadzenie użytkowników przez zadania w przewodniku Wyświetlanie wyskakujących okienek.

Xamarin.Forms Samouczek wyskakujących okienek

Wyświetlanie alertu

Wyświetlanie arkusza akcji

Gratulacje!

Następne kroki

Xamarin.Forms Samouczek wyskakujących okienek

Wyświetlanie alertu

Wyświetlanie arkusza akcji

Gratulacje!

Następne kroki

Pokrewne łącza