Condividi tramite


Editor

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) Editor consente di immettere e modificare più righe di testo.

Editor definisce le proprietà seguenti:

  • AutoSize, di tipo EditorAutoSizeOption, definisce se l'editor modificherà le dimensioni in base all'input dell'utente. Per impostazione predefinita, l'editor non ha dimensioni automatica.
  • HorizontalTextAlignment, di tipo TextAlignment, definisce l'allineamento orizzontale del testo.
  • VerticalTextAlignment, di tipo TextAlignment, definisce l'allineamento verticale del testo.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Definisce inoltre Editor un Completed evento, che viene generato quando l'utente finalizza il testo in Editor con la chiave restituita.

Editor deriva dalla InputView classe da cui eredita le proprietà seguenti:

  • CharacterSpacing, di tipo double, imposta la spaziatura tra i caratteri nel testo immesso.
  • CursorPosition, di tipo int, definisce la posizione del cursore all'interno dell'editor.
  • FontAttributes, di tipo FontAttributes, determina lo stile del testo.
  • FontAutoScalingEnabled, di tipo bool, definisce se il testo rifletterà le preferenze di ridimensionamento impostate nel sistema operativo. Il valore predefinito di questa proprietà è true.
  • FontFamily, di tipo string, definisce la famiglia di caratteri.
  • FontSize, di tipo double, definisce le dimensioni del carattere.
  • IsReadOnly, di tipo bool, definisce se l'utente deve essere impedito di modificare il testo. Il valore predefinito di questa proprietà è false.
  • IsSpellCheckEnabled, di tipo bool, controlla se il controllo ortografico è abilitato.
  • IsTextPredictionEnabled, di tipo bool, controlla se è abilitata la stima del testo e la correzione automatica del testo.
  • Keyboard, di tipo Keyboard, specifica la tastiera di input soft visualizzata quando si immette testo.
  • MaxLength, di tipo int, definisce la lunghezza massima di input.
  • Placeholder, di tipo string, definisce il testo visualizzato quando il controllo è vuoto.
  • PlaceholderColor, di tipo Color, definisce il colore del testo segnaposto.
  • SelectionLength, di tipo int, rappresenta la lunghezza del testo selezionato all'interno del controllo .
  • Text, di tipo string, definisce il testo immesso nel controllo .
  • TextColor, di tipo Color, definisce il colore del testo immesso.
  • TextTransform, di tipo TextTransform, specifica la combinazione di maiuscole e minuscole del testo immesso.

Queste proprietà sono supportate da BindableProperty oggetti, il che significa che possono essere destinazioni di data binding e stili.

Definisce inoltre InputView un TextChanged evento, che viene generato quando il testo nelle Editor modifiche. L'oggetto TextChangedEventArgs che accompagna l'evento TextChanged ha NewTextValue proprietà e OldTextValue , che specificano rispettivamente il testo nuovo e precedente.

Per informazioni sulla specifica dei tipi di carattere in un Editoroggetto , vedere Tipi di carattere.

Creare un editor

Nell'esempio seguente viene illustrato come creare un oggetto Editor:

<Editor x:Name="editor"
        Placeholder="Enter your response here"
        HeightRequest="250"
        TextChanged="OnEditorTextChanged"
        Completed="OnEditorCompleted" />

Il codice C# equivalente è il seguente:

Editor editor = new Editor { Placeholder = "Enter text", HeightRequest = 250 };
editor.TextChanged += OnEditorTextChanged;
editor.Completed += OnEditorCompleted;

Lo screenshot seguente mostra il risultato Editor in Android:

Screenshot di un editor di base in Android.

Nota

In iOS, la tastiera di input flessibile può coprire un campo di input di testo quando il campo si trova vicino alla parte inferiore dello schermo, rendendo difficile l'immissione di testo. Tuttavia, in un'app .NET MAUI iOS, le pagine scorrono automaticamente quando la tastiera di input flessibile copriva un campo di immissione di testo, in modo che il campo si trova sopra la tastiera di input soft. Il KeyboardAutoManagerScroll.Disconnect metodo, nello spazio dei Microsoft.Maui.Platform nomi , può essere chiamato per disabilitare questo comportamento predefinito. Il KeyboardAutoManagerScroll.Connect metodo può essere chiamato per riabilitare il comportamento dopo che è stato disabilitato.

È possibile accedere al testo immesso leggendo la Text proprietà e gli TextChanged eventi e Completed indicano che il testo è stato modificato o completato.

L'evento TextChanged viene generato quando il testo nelle Editor modifiche e specifica TextChangedEventArgs il testo prima e dopo la modifica tramite le OldTextValue proprietà e NewTextValue :

void OnEditorTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
    string myText = editor.Text;
}

L'evento Completed viene generato solo in Windows quando l'utente ha terminato l'input premendo tabulazione sulla tastiera o concentrando un altro controllo. Il gestore per l'evento è un gestore eventi generico:

void OnEditorCompleted(object sender, EventArgs e)
{
   string text = ((Editor)sender).Text;
}

Impostare la spaziatura dei caratteri

La spaziatura dei caratteri può essere applicata a un Editor oggetto impostando la CharacterSpacing proprietà su un double valore:

<Editor ...
        CharacterSpacing="10" />

Il risultato è che i caratteri nel testo visualizzato da Editor sono unità indipendenti dal dispositivo distanziate CharacterSpacing .

Nota

Il valore della CharacterSpacing proprietà viene applicato al testo visualizzato dalle Text proprietà e Placeholder .

Limitare la lunghezza dell'input

La MaxLength proprietà può essere utilizzata per limitare la lunghezza di input consentita per .Editor Questa proprietà deve essere impostata su un numero intero positivo:

<Editor ... MaxLength="10" />

Un MaxLength valore della proprietà 0 indica che non sarà consentito alcun input e un valore di int.MaxValue, ovvero il valore predefinito per un Editoroggetto , indica che non esiste alcun limite effettivo per il numero di caratteri che possono essere immessi.

Ridimensionare automaticamente un editor

Un Editor oggetto può essere impostato sulle dimensioni automatica del contenuto impostando la Editor.AutoSize proprietà su TextChanges, che è un valore dell'enumerazione EditorAutoSizeOption . Questa enumerazione ha due valori:

  • Disabled indica che il ridimensionamento automatico è disabilitato ed è il valore predefinito.
  • TextChanges indica che il ridimensionamento automatico è abilitato.

Per ottenere questo risultato, è possibile procedere come segue:

<Editor Text="Enter text here"
        AutoSize="TextChanges" />

Quando il ridimensionamento automatico è abilitato, l'altezza di Editor aumenta quando l'utente lo riempie di testo e l'altezza diminuisce man mano che l'utente elimina il testo. Può essere usato per garantire che Editor gli oggetti in una DataTemplate CollectionView dimensione siano corretti.

Importante

Un oggetto Editor non verrà ridimensionato automaticamente se la HeightRequest proprietà è stata impostata.

Trasformare il testo

Un Editor oggetto può trasformare la combinazione di maiuscole e minuscole del testo archiviato nella Text proprietà impostando la TextTransform proprietà su un valore dell'enumerazione TextTransform . Questa enumerazione ha quattro valori:

  • None indica che il testo non verrà trasformato.
  • Default indica che verrà usato il comportamento predefinito per la piattaforma. Questo è il valore predefinito per la proprietà TextTransform.
  • Lowercase indica che il testo verrà trasformato in minuscolo.
  • Uppercase indica che il testo verrà trasformato in maiuscolo.

L'esempio seguente illustra la trasformazione del testo in maiuscolo:

<Editor Text="This text will be displayed in uppercase."
        TextTransform="Uppercase" />

Personalizzare la tastiera

La tastiera visualizzata quando gli utenti interagiscono con un Editor oggetto possono essere impostate a livello di codice tramite la Keyboard proprietà , su una delle proprietà seguenti della Keyboard classe :

  • Chat - usata per messaggi di testo e posizioni in cui sono utili gli emoji.
  • Default - tastiera predefinita.
  • Email - usata per l'immissione di indirizzi di posta elettronica.
  • Numeric - usata per l'immissione di numeri.
  • Plain - usata per l'immissione di testo, senza KeyboardFlags specificati.
  • Telephone - usata per l'immissione di numeri di telefono.
  • Text - usata per l'immissione di testo.
  • Url - usata per l'immissione di percorsi di file e indirizzi Web.

Nell'esempio seguente viene illustrata l'impostazione della Keyboard proprietà :

<Editor Keyboard="Chat" />

La classe Keyboard include anche un metodo factory Create che può essere usato per personalizzare una tastiera, specificando il comportamento di maiuscole/minuscole, controllo ortografico e suggerimenti. I valori di enumerazione KeyboardFlags vengono specificati come argomenti del metodo, con la restituzione di un elemento Keyboard personalizzato. L'enumerazione KeyboardFlags contiene i valori seguenti:

  • None - non vengono aggiunte funzionalità alla tastiera.
  • CapitalizeSentence - indica che la prima lettera della prima parola di ogni frase immessa verrà automaticamente scritta in maiuscolo.
  • Spellcheck - indica che verrà eseguito il controllo ortografico sul testo immesso.
  • Suggestions – indica che verranno offerti completamenti di parole per il testo immesso.
  • CapitalizeWord - indica che la prima lettera di ogni parola verrà automaticamente scritta in maiuscolo.
  • CapitalizeCharacter - indica che ogni carattere verrà scritto automaticamente in maiuscolo.
  • CapitalizeNone - indica che non verrà applicata automaticamente la conversione in maiuscolo.
  • All - indica che il controllo ortografico, i completamenti delle parole e la conversione in maiuscolo per le frasi verranno applicati al testo immesso.

L'esempio di codice XAML seguente mostra come personalizzare l'elemento Keyboard predefinito per offrire i completamenti delle parole e convertire in maiuscolo tutti i caratteri immessi:

<Editor>
    <Editor.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Editor.Keyboard>
</Editor>

Il codice C# equivalente è il seguente:

Editor editor = new Editor();
editor.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

Nascondere e visualizzare la tastiera di input soft

La SoftInputExtensions classe, nello spazio dei Microsoft.Maui nomi , fornisce una serie di metodi di estensione che supportano l'interazione con la tastiera di input soft sui controlli che supportano l'input di testo. La classe definisce i metodi seguenti:

  • IsSoftInputShowing, che verifica se il dispositivo mostra attualmente la tastiera di input soft.
  • HideSoftInputAsync, che tenterà di nascondere la tastiera di input soft se è attualmente visualizzata.
  • ShowSoftInputAsync, che tenterà di visualizzare la tastiera di input soft se è attualmente nascosta.

Nell'esempio seguente viene illustrato come nascondere la tastiera di input soft in un Editor oggetto denominato editor, se è attualmente visualizzato:

if (editor.IsSoftInputShowing())
    await editor.HideSoftInputAsync(System.Threading.CancellationToken.None);

Abilitare e disabilitare il controllo ortografico

La IsSpellCheckEnabled proprietà controlla se il controllo ortografico è abilitato. Per impostazione predefinita, la proprietà è impostata su true. Quando l'utente immette testo, vengono indicati errori di ortografia.

Tuttavia, per alcuni scenari di immissione di testo, ad esempio l'immissione di un nome utente, il controllo ortografico fornisce un'esperienza negativa e pertanto deve essere disabilitata impostando la IsSpellCheckEnabled proprietà su false:

<Editor ... IsSpellCheckEnabled="false" />

Nota

Quando la IsSpellCheckEnabled proprietà è impostata su falsee non viene usata una tastiera personalizzata, il correttore ortografico nativo verrà disabilitato. Tuttavia, se è stato impostato un oggetto Keyboard che disabilita il controllo ortografico, ad esempio Keyboard.Chat, la IsSpellCheckEnabled proprietà viene ignorata. Pertanto, la proprietà non può essere utilizzata per abilitare il controllo ortografico per un Keyboard oggetto che lo disabilita in modo esplicito.

Abilitare e disabilitare la stima del testo

La IsTextPredictionEnabled proprietà controlla se la stima del testo e la correzione automatica del testo sono abilitate. Per impostazione predefinita, la proprietà è impostata su true. Quando l'utente immette testo, vengono presentate stime delle parole.

Tuttavia, per alcuni scenari di immissione di testo, ad esempio l'immissione di un nome utente, la stima del testo e la correzione automatica del testo offrono un'esperienza negativa e devono essere disabilitate impostando la IsTextPredictionEnabled proprietà su false:

<Editor ... IsTextPredictionEnabled="false" />

Nota

Quando la IsTextPredictionEnabled proprietà è impostata su falsee non viene usata una tastiera personalizzata, la stima del testo e la correzione automatica del testo sono disabilitate. Tuttavia, se è stato impostato un oggetto Keyboard che disabilita la stima del testo, la IsTextPredictionEnabled proprietà viene ignorata. Pertanto, la proprietà non può essere utilizzata per abilitare la stima del testo per un oggetto Keyboard che la disabilita in modo esplicito.

Impedire la voce di testo

È possibile impedire agli utenti di falsemodificare il testo in un Editor oggetto impostando la IsReadOnly proprietà con il valore predefinito , su true:

<Editor Text="This is a read-only Editor"
        IsReadOnly="true" />

Nota

La IsReadonly proprietà non modifica l'aspetto visivo di un oggetto Editor, a differenza della IsEnabled proprietà che modifica anche l'aspetto visivo dell'oggetto in Editor grigio.