Xamarin.Forms Esercitazione popup
Prima di provare questa esercitazione è necessario avere completato correttamente:
- Creare la prima Xamarin.Forms guida introduttiva all'app .
- Esercitazione su StackLayout.
- Esercitazione su Button.
In questa esercitazione apprenderai a:
- Visualizzare un avviso per chiedere all'utente di effettuare una scelta.
- Visualizzare le azioni per guidare l'utente in un'attività.
Si userà Visual Studio 2019 o Visual Studio per Mac per creare una semplice applicazione che illustra come visualizzare i popup in Xamarin.Forms. Gli screenshot seguenti illustrano l'applicazione finale:
Visualizzare un avviso
Xamarin.Forms ha un popup modale, noto come avviso, per avvisare l'utente o per porre domande semplici. In questo esercizio si userà il metodo DisplayAlert
dalla classe Page
per visualizzare un avviso all'utente e per porre semplici domande.
Per completare questa esercitazione è necessario Visual Studio 2019 (la versione più recente) con installato il carico di lavoro Sviluppo di applicazioni per dispositivi mobili con .NET. È inoltre necessario un Mac associato per compilare l'applicazione dell'esercitazione per iOS. Per informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin. Per informazioni sulla connessione di Visual Studio 2019 a un host di compilazione Mac, vedere Associa a Mac per lo sviluppo di Xamarin.iOS.
Avviare Visual Studio e creare una nuova app vuota Xamarin.Forms denominata PopupsTutorial.
Importante
I frammenti di codice C# e XAML in questa esercitazione richiedono che la soluzione sia denominata PopupsTutorial. Se si usa un nome diverso, si verificheranno errori di compilazione quando si copia il codice da questa esercitazione alla soluzione.
Per altre informazioni sulla libreria .NET Standard che viene creata, vedere Anatomia di un'applicazione Xamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
Fare doppio clic su MainPage.xaml nel progetto PopupsTutorial in Esplora soluzioni per aprire il file. In MainPage.xaml rimuovere tutto il codice del modello e sostituirlo con il codice seguente:
<?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>
Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da due oggetti
Button
in unoStackLayout
. La proprietàButton.Text
specifica il testo visualizzato in ogniButton
e gli eventiClicked
sono impostati per i gestori di eventi che verranno creati nel passaggio successivo.In Esplora soluzioni espandere MainPage.xaml nel progetto PopupsTutorial e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs aggiungere i gestori eventi
OnDisplayAlertButtonClicked
eOnDisplayAlertQuestionButtonClicked
alla classe: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); }
Quando viene toccato un
Button
, viene eseguito il metodo del gestore eventi corrispondente. Il metodoOnDisplayAlertButtonClicked
chiama il metodoDisplayAlert
per visualizzare un avviso modale con un singolo pulsante Annulla. Dopo che l'avviso viene ignorato l'utente può continuare l'interazione con l'applicazione.Il metodo
OnDisplayAlertQuestionButtonClicked
chiama un overload del metodoDisplayAlert
per visualizzare un avviso modale con un pulsante di conferma e un pulsante Annulla. Dopo che l'utente ha selezionato uno dei pulsanti, la selezione viene restituita comeboolean
.Importante
Il metodo
DisplayAlert
è asincrono e deve sempre includere l'attesa con la parola chiaveawait
.Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto. Quindi, toccare il primo
Button
:Dopo aver ignorato l'avviso, toccare il secondo
Button
:Si noti che, dopo aver selezionato una risposta alla domanda, la risposta viene visualizzata nella finestra Output applicazione di Visual Studio. Se questa finestra non è visibile, è possibile renderla visibile selezionando l'opzione di menu Visualizza > output .
In Visual Studio arrestare l'applicazione.
Per altre informazioni sulla visualizzazione degli avvisi, vedere Display an alert (Visualizzare un avviso) nella guida Display Pop-ups (Visualizzare i popup).
Visualizzare una finestra delle azioni
Xamarin.Forms include un popup modale, noto come foglio azioni, che può essere usato per guidare gli utenti tramite un'attività. In questo esercizio si userà il metodo DisplayActionSheet
dalla classe Page
per visualizzare un foglio delle azioni che guida gli utenti per l'esecuzione di un'attività.
In MainPage.xaml aggiungere una nuova dichiarazione
Button
che visualizzerà un foglio delle azioni:<Button Text="Display action sheet" Clicked="OnDisplayActionSheetButtonClicked" />
La proprietà
Button.Text
specifica il testo visualizzato nelButton
. Inoltre, l'eventoClicked
viene impostato su un gestore eventi denominatoOnDisplayActionSheetButtonClicked
, che verrà creato nel passaggio successivo.In Esplora soluzioni espandere MainPage.xaml nel progetto PopupsTutorial e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs aggiungere il gestore eventi
OnDisplayActionSheetButtonClicked
alla classe:async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e) { string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook"); Console.WriteLine("Action: " + action); }
Con il tocco su
Button
viene eseguito il metodoOnDisplayActionSheetButtonClicked
. Questo metodo chiama il metodoDisplayActionSheet
per presentare all'utente un set di alternative su come procedere per eseguire un'attività. Dopo che l'utente ha selezionato una delle alternative, la selezione viene restituita comestring
.Importante
Il metodo
DisplayActionSheet
è asincrono e deve sempre includere l'attesa con la parola chiaveawait
.Nella barra degli strumenti di Visual Studio premere il pulsante Avvia, ovvero il pulsante a forma di triangolo simile a un pulsante di riproduzione, per avviare l'applicazione all'interno del simulatore iOS remoto o dell'emulatore Android prescelto. Toccare quindi l'elemento
Button
aggiunto aContentPage
:Si noti che, dopo aver selezionato un'alternativa nella finestra di dialogo del foglio delle azioni, la selezione viene visualizzata nella finestra Output di Visual Studio. Se questa finestra non è visibile, è possibile renderla visibile selezionando l'opzione di menu Visualizza > output .
In Visual Studio arrestare l'applicazione.
Per altre informazioni sulla visualizzazione dei fogli delle azioni, vedere Guide users through tasks (Supporto degli utenti nelle attività) nella guida Display Pop-ups (Visualizzare popup).
Congratulazioni!
L'esercitazione è stata completata. Si è appreso come:
- Visualizzare un avviso per chiedere all'utente di effettuare una scelta.
- Visualizzare le azioni per guidare l'utente in un'attività.
Passaggi successivi
Per altre informazioni sulle nozioni di base sulla creazione di applicazioni per dispositivi mobili con Xamarin.Forms, passare all'esercitazione ciclo di vita dell'app.
Collegamenti correlati
- Display Pop-ups (guide) (Visualizzare popup - guida)
- API Pagina
Hai un problema con questa sezione? In caso di problemi, fornisci feedback per contribuire al miglioramento della sezione.