Visualizzare popup

Download Sample Scaricare l'esempio

La visualizzazione di un avviso, la richiesta a un utente di scegliere o la visualizzazione di un prompt è un'attività comune dell'interfaccia utente. Xamarin.Forms dispone di tre metodi nella Page classe per interagire con l'utente tramite un popup: DisplayAlert, DisplayActionSheete DisplayPromptAsync. Il rendering di questi metodi viene eseguito con i controlli nativi di ogni piattaforma.

Visualizzare un avviso

Tutte le Xamarin.Formspiattaforme supportate hanno un popup modale per avvisare l'utente o porre domande semplici. Per visualizzare questi avvisi in Xamarin.Forms, usare il DisplayAlert metodo in qualsiasi Pageoggetto . La riga di codice seguente illustra un semplice messaggio per l'utente:

await DisplayAlert ("Alert", "You have been alerted", "OK");

Alert dialog with one button, on iOS and Android

In questo esempio non vengono raccolte informazioni dall'utente. L'avviso viene visualizzato come modale. Quando viene ignorato, l'utente continua a interagire con l'applicazione.

Il metodo DisplayAlert può essere usato anche per acquisire una risposta dell'utente, visualizzando due pulsanti e restituendo un valore boolean. Per ottenere una risposta da un avviso, specificare un testo per i due pulsanti e il metodo await. Dopo aver selezionato una delle opzioni, la risposta dell'utente sarà restituita al codice. Si notino le parole chiave async e await nell'esempio di codice seguente:

async void OnAlertYesNoClicked (object sender, EventArgs e)
{
  bool answer = await DisplayAlert ("Question?", "Would you like to play a game", "Yes", "No");
  Debug.WriteLine ("Answer: " + answer);
}

Alert dialog with two buttons

Il DisplayAlert metodo include anche overload che accettano un FlowDirection argomento che specifica la direzione in cui gli elementi dell'interfaccia utente vengono trasmessi all'interno dell'avviso. Per altre informazioni sulla direzione del flusso, vedere Localizzazione da destra a sinistra.

Avviso

Per impostazione predefinita nella piattaforma UWP, quando viene visualizzato un avviso, è comunque possibile attivare eventuali chiavi di accesso definite nella pagina sottostante l'avviso. Per altre informazioni, vedere Chiavi di accesso di VisualElement in Windows.

Guidare gli utenti attraverso le attività

UIActionSheet è un elemento comune dell'interfaccia utente in iOS. Il Xamarin.FormsDisplayActionSheet metodo consente di includere questo controllo nelle app multipiattaforma, eseguendo il rendering di alternative native in Android e UWP.

Per visualizzare un foglio delle azioni, impostare awaitDisplayActionSheet in qualsiasi oggetto Page, passando il messaggio e le etichette dei pulsanti come stringhe. Il metodo restituisce l'etichetta di stringa del pulsante che è stato selezionato dall'utente. Di seguito è riportato un semplice esempio:

async void OnActionSheetSimpleClicked (object sender, EventArgs e)
{
  string action = await DisplayActionSheet ("ActionSheet: Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
  Debug.WriteLine ("Action: " + action);
}

ActionSheet dialog, on iOS and Android

Il rendering del destroy pulsante è diverso rispetto agli altri pulsanti in iOS e può essere lasciato null o specificato come terzo parametro stringa. Nell'esempio seguente viene usato il pulsante destroy:

async void OnActionSheetCancelDeleteClicked (object sender, EventArgs e)
{
  string action = await DisplayActionSheet ("ActionSheet: SavePhoto?", "Cancel", "Delete", "Photo Roll", "Email");
  Debug.WriteLine ("Action: " + action);
}

ActionSheet dialog with destroy button, on iOS and Android

Il DisplayActionSheet metodo ha anche un overload che accetta un FlowDirection argomento che specifica la direzione in cui gli elementi dell'interfaccia utente vengono trasmessi all'interno del foglio azioni. Per altre informazioni sulla direzione del flusso, vedere Localizzazione da destra a sinistra.

Visualizzare un prompt

Per visualizzare un prompt, chiamare in DisplayPromptAsync qualsiasi Page, passando un titolo e un messaggio come string argomenti:

string result = await DisplayPromptAsync("Question 1", "What's your name?");

La richiesta viene visualizzata in modo modally:

Screenshot of a modal prompt, on iOS and Android

Se viene toccato il pulsante OK, la risposta immessa viene restituita come .string Se viene toccato il pulsante Annulla, null viene restituito .

L'elenco completo degli argomenti per il DisplayPromptAsync metodo è:

  • title, di tipo string, è il titolo da visualizzare nel prompt.
  • message, di tipo string, è il messaggio da visualizzare nel prompt.
  • accept, di tipo string, è il testo del pulsante accept. Si tratta di un argomento facoltativo, il cui valore predefinito è OK.
  • cancel, di tipo string, è il testo del pulsante annulla. Si tratta di un argomento facoltativo, il cui valore predefinito è Cancel.
  • placeholder, di tipo string, è il testo segnaposto da visualizzare nel prompt. Si tratta di un argomento facoltativo, il cui valore predefinito è null.
  • maxLength, di tipo int, è la lunghezza massima della risposta dell'utente. Si tratta di un argomento facoltativo, il cui valore predefinito è -1.
  • keyboard, di tipo Keyboard, è il tipo di tastiera da usare per la risposta dell'utente. Si tratta di un argomento facoltativo, il cui valore predefinito è Keyboard.Default.
  • initialValue, di tipo string, è una risposta predefinita che verrà visualizzata e che può essere modificata. Si tratta di un argomento facoltativo, il cui valore predefinito è un oggetto vuoto string.

Nell'esempio seguente viene illustrata l'impostazione di alcuni argomenti facoltativi:

string result = await DisplayPromptAsync("Question 2", "What's 5 + 5?", initialValue: "10", maxLength: 2, keyboard: Keyboard.Numeric);

Questo codice visualizza una risposta predefinita di 10, limita il numero di caratteri che possono essere immessi a 2 e visualizza la tastiera numerica per l'input dell'utente:

Screenshot of an optional modal prompt, on iOS and Android

Avviso

Per impostazione predefinita nella piattaforma UWP, quando viene visualizzata una richiesta, è comunque possibile attivare tutte le chiavi di accesso definite nella pagina dietro la richiesta. Per altre informazioni, vedere Chiavi di accesso di VisualElement in Windows.