Xamarin.Forms Esercitazione popup

Articolo
Developer (Principiante)
6 minuti per il completamento

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

5 minuti rimanenti

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.

Visual Studio
Visual Studio per Mac

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'applicazioneXamarin.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 uno StackLayout. La proprietà Button.Text specifica il testo visualizzato in ogni Buttone gli eventi Clicked 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 e OnDisplayAlertQuestionButtonClicked 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 metodo OnDisplayAlertButtonClicked chiama il metodo DisplayAlert 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 metodo DisplayAlert 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 come boolean.

Importante

Il metodo DisplayAlert è asincrono e deve sempre includere l'attesa con la parola chiave await.
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).

Per completare questa esercitazione è necessario Visual Studio per Mac, la versione più recente, con installato il supporto della piattaforma Android e iOS. Sarà necessario anche Xcode, la versione più recente. Per altre informazioni sull'installazione della piattaforma Xamarin, vedere Installazione di Xamarin.

Avviare Visual Studio per Mac 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'applicazioneXamarin.Forms nell'approfondimento della Xamarin.Forms guida introduttiva.
Fare doppio clic su MainPage.xaml nel progetto PopupsTutorial nel riquadro della soluzione 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 uno StackLayout. La proprietà Button.Text specifica il testo visualizzato in ogni Buttone gli eventi Clicked sono impostati per i gestori di eventi che verranno creati nel passaggio successivo.
Nel riquadro della soluzione 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 e OnDisplayAlertQuestionButtonClicked 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 metodo OnDisplayAlertButtonClicked chiama il metodo DisplayAlert 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 metodo DisplayAlert 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 come boolean.

Importante

Il metodo DisplayAlert è asincrono e deve sempre includere l'attesa con la parola chiave await.
Nella barra degli strumenti di Visual Studio per Mac 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 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 per Mac. Se questa finestra non è visibile, è possibile renderla visibile selezionando l'opzione di menu Visualizza > altro output applicazione Windows>.

In Visual Studio per Mac 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

2 minuti rimanenti

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

Visual Studio
Visual Studio per Mac

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 nel Button. Inoltre, l'evento Clicked viene impostato su un gestore eventi denominato OnDisplayActionSheetButtonClicked, 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 metodo OnDisplayActionSheetButtonClicked. Questo metodo chiama il metodo DisplayActionSheet 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 come string.

Importante

Il metodo DisplayActionSheet è asincrono e deve sempre includere l'attesa con la parola chiave await.
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 a ContentPage:

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

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 nel Button. Inoltre, l'evento Clicked viene impostato su un gestore eventi denominato OnDisplayActionSheetButtonClicked, che verrà creato nel passaggio successivo.
Nel riquadro della soluzione 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 metodo OnDisplayActionSheetButtonClicked. Questo metodo chiama il metodo DisplayActionSheet 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 come string.

Importante

Il metodo DisplayActionSheet è asincrono e deve sempre includere l'attesa con la parola chiave await.
Nella barra degli strumenti di Visual Studio per Mac 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 o dell'emulatore Android prescelto. Toccare quindi l'elemento Button aggiunto a ContentPage:

Si noti che, dopo aver selezionato un'alternativa nella finestra di dialogo del foglio delle azioni, la selezione viene visualizzata nella finestra Output applicazione di Visual Studio per Mac. Se questa finestra non è visibile, è possibile renderla visibile selezionando l'opzione di menu Visualizza > altro output applicazione Windows>.

In Visual Studio per Mac 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).

Xamarin.Forms Esercitazione popup

Visualizzare un avviso

Visualizzare una finestra delle azioni

Congratulazioni!

Passaggi successivi

Xamarin.Forms Esercitazione popup

Visualizzare un avviso

Visualizzare una finestra delle azioni

Congratulazioni!

Passaggi successivi

Collegamenti correlati