Xamarin.Forms Esercitazione dell'editor

Articolo
Developer (Principiante)
8 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.

In questa esercitazione apprenderai a:

Creare un Xamarin.FormsEditor oggetto in XAML.
Rispondere al cambiamento del testo dell'elemento Editor.
Personalizzare il comportamento di Editor.

Si userà Visual Studio 2019 o Visual Studio per Mac per creare un'applicazione semplice che dimostri come personalizzare il comportamento di un oggetto Editor. Gli screenshot seguenti illustrano l'applicazione finale:

Userai anche Ricaricamento rapido XAML per Xamarin.Forms visualizzare le modifiche dell'interfaccia utente senza ricompilare l'applicazione.

Creare un editor

7 minuti rimanenti

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

Importante

I frammenti di codice C# e XAML di questa esercitazione richiedono che la soluzione sia denominata EditorTutorial. 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.
In Esplora soluzioni, nel progetto EditorTutorial, fare doppio clic su MainPage.xaml 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un elemento Editor in uno StackLayout. La proprietà Editor.Placeholder specifica il testo segnaposto mostrato alla prima visualizzazione di Editor. Inoltre, la proprietà HeightRequest specifica l'altezza dell'elemento Editor in unità indipendenti dal dispositivo.
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:

Nota

Mentre Android indica l'altezza dell'elemento Editor, iOS non lo fa.

In Visual Studio arrestare l'applicazione.

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

Importante

I frammenti di codice C# e XAML di questa esercitazione richiedono che la soluzione sia denominata EditorTutorial. 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.
Nel riquadro della soluzione, nel progetto EditorTutorial, fare doppio clic su MainPage.xaml 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
Questo codice definisce in modo dichiarativo l'interfaccia utente per la pagina costituita da un elemento Editor in uno StackLayout. La proprietà Editor.Placeholder specifica il testo segnaposto mostrato alla prima visualizzazione di Editor. Inoltre, la proprietà HeightRequest specifica l'altezza dell'elemento Editor in unità indipendenti dal dispositivo.
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:

Nota

Mentre Android indica l'altezza dell'elemento Editor, iOS non lo fa.

In Visual Studio per Mac arrestare l'applicazione.

Rispondere alle modifiche di testo

5 minuti rimanenti

Visual Studio
Visual Studio per Mac

In MainPage.XAML modificare la dichiarazione Editor in modo che imposti un gestore per gli eventi TextChanged e Completed:
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
Questo codice imposta l'evento TextChanged su un gestore eventi denominato OnEditorTextChanged e l'evento Completed su un gestore eventi denominato OnEditorCompleted. Entrambi i gestori eventi verranno creati nel passaggio successivo.
In Esplora soluzioni espandere MainPage.xaml nel progetto EditorTutorial e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs aggiungere i gestori eventi OnEditorTextChanged e OnEditorCompleted alla classe:
```
void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEditorCompleted(object sender, EventArgs e)
{
    string text = ((Editor)sender).Text;
}
```
Quando il testo in Editor cambia, viene eseguito il metodo OnEditorTextChanged. L'argomento sender è l'oggetto Editor responsabile dell'attivazione dell'evento TextChanged e può essere usato per accedere all'oggetto Editor. L'argomento TextChangedEventArgs fornisce i valori del testo nuovo e di quello precedente, prima e dopo la modifica del testo.

Quando viene completato il processo di modifica, viene eseguito il metodo OnEditorCompleted. Ciò si ottiene non focalizzando su Editor, o anche facendo clic sul pulsante "Fine" in iOS. L'argomento sender è l'oggetto Editor responsabile dell'attivazione dell'evento TextChanged e può essere usato per accedere all'oggetto Editor.

Importante

Il testo immesso in Editor viene archiviato nella proprietà Text.
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:

Impostare i punti di interruzione nei due gestori di eventi, immettere il testo in Editor e osservare la generazione dell'evento TextChanged. Non focalizzare Editor per osservare generazione dell'evento Completed.

Per altre informazioni sugli Editor eventi, vedere Eventi e interattività nella guida all'editorXamarin.Forms.

In MainPage.XAML modificare la dichiarazione Editor in modo che imposti un gestore per gli eventi TextChanged e Completed:
```
<Editor Placeholder="Enter multi-line text here"
        HeightRequest="200"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />
```
Questo codice imposta l'evento TextChanged su un gestore eventi denominato OnEditorTextChanged e l'evento Completed su un gestore eventi denominato OnEditorCompleted. Entrambi i gestori eventi verranno creati nel passaggio successivo.
Nel riquadro della soluzione espandere MainPage.xaml nel progetto EditorTutorial e fare doppio clic su MainPage.xaml.cs per aprirlo. In MainPage.xaml.cs aggiungere i gestori eventi OnEditorTextChanged e OnEditorCompleted alla classe:
```
void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEditorCompleted(object sender, EventArgs e)
{
    string text = ((Editor)sender).Text;
}
```
Quando il testo in Editor cambia, viene eseguito il metodo OnEditorTextChanged. L'argomento sender è l'oggetto Editor responsabile dell'attivazione dell'evento TextChanged e può essere usato per accedere all'oggetto Editor. L'argomento TextChangedEventArgs fornisce i valori del testo nuovo e di quello precedente, prima e dopo la modifica del testo.

Quando viene completato il processo di modifica, viene eseguito il metodo OnEditorCompleted. Ciò si ottiene non focalizzando su Editor, o anche facendo clic sul pulsante "Fine" in iOS. L'argomento sender è l'oggetto Editor responsabile dell'attivazione dell'evento TextChanged e può essere usato per accedere all'oggetto Editor.

Importante

Il testo immesso in Editor viene archiviato nella proprietà Text.
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:

Impostare i punti di interruzione nei due gestori di eventi, immettere il testo in Editor e osservare la generazione dell'evento TextChanged. Non focalizzare Editor per osservare generazione dell'evento Completed.

Per altre informazioni sugli Editor eventi, vedere Eventi e interattività nella guida all'editorXamarin.Forms.

Personalizzare il comportamento

2 minuti rimanenti

Visual Studio
Visual Studio per Mac

In MainPage.xaml modificare la dichiarazione Editor per personalizzarne il comportamento:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Questo codice imposta le proprietà che personalizzano il comportamento di Editor. La proprietà AutoSize è impostata su TextChanges, che indica che l'altezza di Editor aumenterà quando è riempito con del testo e diminuirà quando il testo viene rimosso. La proprietà MaxLength limita la lunghezza di input valida per Editor. Inoltre, la proprietà IsSpellCheckEnabled è impostata su false per disabilitare il controllo ortografico, mentre la proprietà IsTextPredictionEnabled è impostata su false per disabilitare il completamento del testo e il completamento automatico del testo.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla 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. Immettere il testo in Editor e osservare che l'altezza di Editor aumenta man mano che viene compilato con il testo e diminuisce man mano che il testo viene rimosso e che il numero massimo di caratteri che è possibile immettere è 200:

In Visual Studio arrestare l'applicazione.

Per altre informazioni sulla personalizzazione del Editor comportamento, vedere la guida all'editorXamarin.Forms.

In MainPage.xaml modificare la dichiarazione Editor per personalizzarne il comportamento:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Questo codice imposta le proprietà che personalizzano il comportamento di Editor. La proprietà AutoSize è impostata su TextChanges, che indica che l'altezza di Editor aumenterà quando è riempito con del testo e diminuirà quando il testo viene rimosso. La proprietà MaxLength limita la lunghezza di input valida per Editor. Inoltre, la proprietà IsSpellCheckEnabled è impostata su false per disabilitare il controllo ortografico, mentre la proprietà IsTextPredictionEnabled è impostata su false per disabilitare il completamento del testo e il completamento automatico del testo.
Se l'applicazione è ancora in esecuzione, salvare le modifiche apportate al file e l'interfaccia utente dell'applicazione verrà aggiornata automaticamente nel simulatore o nell'emulatore. In caso contrario, sulla 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. Immettere il testo in Editor e osservare che l'altezza di Editor aumenta man mano che viene compilato con il testo e diminuisce man mano che il testo viene rimosso e che il numero massimo di caratteri che è possibile immettere è 200:

In Visual Studio per Mac arrestare l'applicazione.

Per altre informazioni sulla personalizzazione del Editor comportamento, vedere la guida all'editorXamarin.Forms.

Condividi tramite

Xamarin.Forms Esercitazione dell'editor

Creare un editor

Rispondere alle modifiche di testo

Personalizzare il comportamento

Congratulazioni!

Passaggi successivi

Condividi tramite

Xamarin.Forms Esercitazione dell'editor

Creare un editor

Rispondere alle modifiche di testo

Personalizzare il comportamento

Congratulazioni!

Passaggi successivi

Collegamenti correlati