Xamarin.FormsEditor

Scaricare l'esempio

Il Editor controllo viene utilizzato per accettare l'input su più righe.

Impostare e leggere testo

L'oggetto Editor, come altre visualizzazioni di presentazione di testo, espone la Text proprietà . Questa proprietà può essere utilizzata per impostare e leggere il testo presentato da Editor. L'esempio seguente illustra l'impostazione della Text proprietà in XAML:

<Editor x:Name="editor" Text="I am an Editor" />

In C#:

var editor = new Editor { Text = "I am an Editor" };

Per leggere il testo, accedere alla Text proprietà in C#:

var text = editor.Text;

Impostare il testo segnaposto

Può Editor essere impostato per visualizzare il testo segnaposto quando non archivia l'input dell'utente. Questa operazione viene eseguita impostando la Placeholder proprietà su e stringviene spesso usato per indicare il tipo di contenuto appropriato per .Editor Inoltre, il colore del testo segnaposto può essere controllato impostando la PlaceholderColor proprietà su :Color

<Editor Placeholder="Enter text here" PlaceholderColor="Olive" />

var editor = new Editor { Placeholder = "Enter text here", PlaceholderColor = Color.Olive };

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" />

var editor = new 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.

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" />

Il codice C# equivalente è il seguente:

Editor editor = new Editor
{
    Text = "This text will be displayed in uppercase.",
    TextTransform = TextTransform.Uppercase
};

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" />

var editor = new 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.

Spaziatura caratteri

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

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

Il codice C# equivalente è il seguente:

Editor editor = new 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 .

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.

Questa operazione può essere eseguita nel codice come indicato di seguito:

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

var editor = new Editor { Text = "Enter text here", AutoSize = EditorAutoSizeOption.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.

Nota

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

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.

Per ottenere questo risultato, è possibile procedere come segue in XAML:

<Editor Keyboard="Chat" />

Il codice C# equivalente è il seguente:

var editor = new Editor { Keyboard = Keyboard.Chat };

Esempi di ogni tastiera sono disponibili nel repository delle ricette .

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:

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

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" />

var editor = new 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" />

var editor = new 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.

Colori

Editor può essere impostato per usare un colore di sfondo personalizzato tramite la BackgroundColor proprietà . È necessario prestare particolare attenzione per garantire che i colori saranno utilizzabili su ogni piattaforma. Poiché ogni piattaforma ha impostazioni predefinite diverse per il colore del testo, potrebbe essere necessario impostare un colore di sfondo personalizzato per ogni piattaforma. Per altre informazioni sull'ottimizzazione dell'interfaccia utente per ogni piattaforma, vedere Uso delle modifiche della piattaforma.

In C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        //dark blue on UWP & Android, light blue on iOS
        var editor = new Editor { BackgroundColor = Device.RuntimePlatform == Device.iOS ? Color.FromHex("#A4EAFF") : Color.FromHex("#2c3e50") };
        layout.Children.Add(editor);
    }
}

In XAML:

<?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="TextSample.EditorPage"
    Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor>
                <Editor.BackgroundColor>
                    <OnPlatform x:TypeArguments="x:Color">
                        <On Platform="iOS" Value="#a4eaff" />
                        <On Platform="Android, UWP" Value="#2c3e50" />
                    </OnPlatform>
                </Editor.BackgroundColor>
            </Editor>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Assicurarsi che i colori di sfondo e testo scelti siano utilizzabili in ogni piattaforma e non nascondere alcun testo segnaposto.

Eventi e interattività

Editor espone due eventi:

• TextChanged : generato quando il testo cambia nell'editor. Fornisce il testo prima e dopo la modifica.
• Completato : generato quando l'utente ha terminato l'input premendo il tasto restituito sulla tastiera.

Nota

La VisualElement classe, da cui Entry eredita, ha Focused anche eventi ed Unfocused .

Completato

L'evento Completed viene usato per reagire al completamento di un'interazione con un oggetto Editor. Completed viene generato quando l'utente termina l'input con un campo immettendo il tasto restituito sulla tastiera (o premendo tabulazioni nella piattaforma UWP). Il gestore per l'evento è un gestore eventi generico, che accetta il mittente e EventArgs:

void EditorCompleted (object sender, EventArgs e)
{
    var text = ((Editor)sender).Text; // sender is cast to an Editor to enable reading the `Text` property of the view.
}

L'evento completato può essere sottoscritto nel codice e xaml:

In C#:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.Completed += EditorCompleted;
        layout.Children.Add(editor);
    }
}

In XAML:

<?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="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor Completed="EditorCompleted" />
        </StackLayout>
    </ContentPage.Content>
</Contentpage>

Textchanged

L'evento TextChanged viene usato per reagire a una modifica nel contenuto di un campo.

TextChangedviene generato ogni volta che viene modificato .TextEditor Il gestore per l'evento accetta un'istanza di TextChangedEventArgs. TextChangedEventArgs fornisce l'accesso ai valori precedenti e nuovi di EditorText tramite le OldTextValue proprietà e NewTextValue :

void EditorTextChanged (object sender, TextChangedEventArgs e)
{
    var oldText = e.OldTextValue;
    var newText = e.NewTextValue;
}

L'evento completato può essere sottoscritto nel codice e xaml:

Nel codice:

public partial class EditorPage : ContentPage
{
    public EditorPage ()
    {
        InitializeComponent ();
        var layout = new StackLayout { Padding = new Thickness(5,10) };
        this.Content = layout;
        var editor = new Editor ();
        editor.TextChanged += EditorTextChanged;
        layout.Children.Add(editor);
    }
}

In XAML:

<?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="TextSample.EditorPage"
Title="Editor Demo">
    <ContentPage.Content>
        <StackLayout Padding="5,10">
            <Editor TextChanged="EditorTextChanged" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Collegamenti correlati

• Testo (esempio)
• API Editor