Freigeben über

Xamarin.Forms Editor

  • Artikel

Das Editor Steuerelement wird verwendet, um mehrzeilige Eingaben zu akzeptieren.

Festlegen und Lesen von Text

Die EditorEigenschaft wird wie andere Textpräsentationsansichten verfügbar Text gemacht. Diese Eigenschaft kann verwendet werden, um den von der EditorZeichenfolge dargestellten Text festzulegen und zu lesen. Das folgende Beispiel veranschaulicht das Festlegen der Text Eigenschaft in XAML:

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

In C#:

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

Um Text zu lesen, greifen Sie auf die Text Eigenschaft in C# zu:

var text = editor.Text;

Festlegen von Platzhaltertext

Dies Editor kann so festgelegt werden, dass Platzhaltertext angezeigt wird, wenn keine Benutzereingaben gespeichert werden. Dies wird durch Festlegen der Placeholder Eigenschaft auf ein string, und wird häufig verwendet, um den Typ des Inhalts anzugeben, der für die EditorEigenschaft geeignet ist. Darüber hinaus kann die Platzhaltertextfarbe durch Festlegen der PlaceholderColor Eigenschaft auf eine Color:

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

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

Verhindern der Texteingabe

Benutzer*innen können daran gehindert werden, den Text in einem Editor zu ändern, indem sie die IsReadOnly-Eigenschaft, die einen Standardwert von false hat, auf true setzen:

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

var editor = new Editor { Text = "This is a read-only Editor", IsReadOnly = true });

Hinweis

Die IsReadonly-Eigenschaft verändert das Erscheinungsbild eines Editor nicht, im Gegensatz zur IsEnabled-Eigenschaft, die auch das Erscheinungsbild des Editor in Grau ändert.

Transformieren von Text

Ein Editor kann die Schreibweise seines in der Text-Eigenschaft gespeicherten Textes ändern, indem er die TextTransform-Eigenschaft auf einen Wert der TextTransform-Enumeration setzt. Diese Enumeration weist vier Werte auf:

  • None gibt an, dass der Text nicht transformiert wird.
  • Default gibt an, dass das plattformspezifische Standardverhalten verwendet wird. Dies ist der Standardwert der Eigenschaft TextTransform.
  • Lowercase gibt an, dass der Text in Kleinbuchstaben umgewandelt wird.
  • Uppercase gibt an, dass der Text in Großbuchstaben umgewandelt wird.

Das folgende Beispiel zeigt das Transformieren von Text in Großbuchstaben:

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

Der entsprechende C#-Code lautet:

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

Begrenzen von Eingabelängen

Die MaxLength-Eigenschaft begrenzt die für Editor zulässige Eingabelänge. Diese Eigenschaft sollte auf eine positive ganze Zahl festgelegt werden:

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

var editor = new Editor { ... MaxLength = 10 };

Ein MaxLength-Eigenschaftswert von 0 bedeutet, dass keine Eingabe zulässig ist, und ein Wert von int.MaxValue, der der Standardwert für Editor ist, bedeutet, dass es keine effektive Begrenzung für die Anzahl der Zeichen gibt, die eingegeben werden können.

Zeichenabstand

Der Zeichenabstand kann auf ein Editor angewendet werden, indem die Eigenschaft Editor.CharacterSpacing auf einen double-Wert gesetzt wird:

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

Der entsprechende C#-Code lautet:

Editor editor = new editor { CharacterSpacing = 10 };

Dies hat zur Folge, dass die Zeichen im Text, der von der Editor angezeigt wird, einen Abstand von CharacterSpacing geräteunabhängigen Einheiten aufweisen.

Hinweis

Der Wert der Eigenschaft CharacterSpacing wird auf den Text angewendet, der durch die Eigenschaften Text und Placeholder angezeigt wird.

Editor mit automatischer Größenanpassung

Ein Editor kann auf automatische Größe gebracht werden, indem die Editor.AutoSize-Eigenschaft auf TextChanges gesetzt wird, was ein Wert der EditorAutoSizeOption-Enumeration ist. Diese Enumeration weist zwei Werte auf:

  • Disabled bedeutet, dass die automatische Größenanpassung deaktiviert ist und ist der Standardwert.
  • TextChanges zeigt an, dass die automatische Größenänderung aktiviert ist.

Dies kann im Code wie folgt erfolgen:

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

var editor = new Editor { Text = "Enter text here", AutoSize = EditorAutoSizeOption.TextChanges };

Wenn die automatische Größenanpassung aktiviert ist, vergrößert sich die Höhe von Editor, wenn der/die Benutzer*in es mit Text füllt, und sie verringert sich, wenn der/die Benutzer*in Text löscht.

Hinweis

Ein Editor hat keine automatische Größenanpassung, wenn die Eigenschaft HeightRequest festgelegt wurde.

Anpassen der Tastatur

Die Tastatur, die angezeigt wird, wenn Benutzer*innen mit einem Editor interagieren, kann programmatisch über die Keyboard-Eigenschaft auf eine der folgenden Eigenschaften der Keyboard-Klasse festgelegt werden:

  • Chat: wird zum Schreiben von Texten verwendet und in Situationen, in denen Emojis nützlich sind.
  • Default: die Standardtastatur.
  • Email: wird beim Eingeben von E-Mail-Adressen verwendet.
  • Numeric: wird beim Eingeben von Zahlen verwendet.
  • Plain: wird beim Eingeben von Text verwendet, ohne Angabe von KeyboardFlags.
  • Telephone: wird beim Eingeben von Telefonnummern verwendet.
  • Text: wird beim Eingeben von Text verwendet.
  • Url: Wird beim Eingeben von Dateipfaden und Webadressen verwendet.

Dies kann in XAML folgendermaßen erfüllt werden:

<Editor Keyboard="Chat" />

Der entsprechende C#-Code lautet:

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

Beispiele für jede Tastatur finden Sie in unserem Rezept-Repository .

Die Keyboard-Klasse verfügt auch über eine Create-Factorymethode, die zum Anpassen einer Tastatur durch Festlegen des Verhaltens für Groß-/Kleinschreibung, Rechtschreibprüfung und Vorschläge verwendet werden kann. KeyboardFlags-Enumerationswerte werden als Argumente der Methode festgelegt, wobei das benutzerdefinierte Keyboard zurückgegeben wird. Die KeyboardFlags-Enumeration verfügt über folgende Werte:

  • None: der Tastatur werden keine Features hinzugefügt.
  • CapitalizeSentence: gibt an, dass der erste Buchstabe des ersten Worts jedes Satzes automatisch groß geschrieben wird.
  • Spellcheck: gibt an, dass die Rechtschreibprüfung für den eingegebenen Text durchgeführt wird.
  • Suggestions: gibt an, dass Wortvervollständigungen für den eingegebenen Text angeboten werden.
  • CapitalizeWord: gibt an, dass der erste Buchstabe von jedem Wort automatisch groß geschrieben wird.
  • CapitalizeCharacter: gibt an, dass jedes Zeichen automatisch groß geschrieben wird.
  • CapitalizeNone: gibt an, dass keine automatische Großschreibung erfolgt.
  • All: gibt an, dass für den eingegebenen Text die Rechtschreibprüfung, die Vervollständigung von Wörtern und die Großschreibung am Satzanfang erfolgen.

Das folgende XAML-Codebeispiel zeigt, wie Sie den Standardwert für Keyboard anpassen können, um Wortvervollständigungen anzubieten und jedes eingegebene Zeichen groß zu schreiben:

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

Der entsprechende C#-Code lautet:

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

Aktivieren und Deaktivieren der Rechtschreibprüfung

Die IsSpellCheckEnabled-Eigenschaft steuert, ob die Rechtschreibprüfung aktiviert ist. Standardmäßig ist die Eigenschaft auf true eingestellt. Wenn der Benutzer Text eingibt, werden Rechtschreibfehler angegeben.

Für einige Texteingabeszenarien, wie etwa die Eingabe eines Benutzernamens, stellt die Rechtschreibprüfung jedoch eine negative Erfahrung dar und sollte daher durch Setzen der Eigenschaft IsSpellCheckEnabled auf false deaktiviert werden:

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

var editor = new Editor { ... IsSpellCheckEnabled = false };

Hinweis

Wenn die Eigenschaft IsSpellCheckEnabled auf false gesetzt ist und keine benutzerdefinierte Tastatur verwendet wird, wird die native Rechtschreibprüfung deaktiviert. Wenn jedoch eine Keyboard festgelegt wurde, die die Rechtschreibprüfung deaktiviert, wie z. B. Keyboard.Chat, wird die Eigenschaft IsSpellCheckEnabled ignoriert. Daher kann die Eigenschaft nicht verwendet werden, um die Rechtschreibprüfung für einen Keyboard zu aktivieren, der sie ausdrücklich deaktiviert.

Aktivieren und Deaktivieren der Textvorhersage

Die IsTextPredictionEnabled-Eigenschaft steuert, ob Textvorhersage und automatische Textkorrektur aktiviert sind. Standardmäßig ist die Eigenschaft auf true eingestellt. Während der Benutzer Text eingibt, werden Wortvorhersagen dargestellt.

Für einige Texteingabeszenarien, wie z. B. die Eingabe eines Benutzernamens, bieten die Textvorhersage und die automatische Textkorrektur jedoch ein negatives Erlebnis und sollten durch Setzen der Eigenschaft IsTextPredictionEnabled auf false deaktiviert werden:

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

var editor = new Editor { ... IsTextPredictionEnabled = false };

Hinweis

Wenn die Eigenschaft IsTextPredictionEnabled auf false gesetzt ist und keine benutzerdefinierte Tastatur verwendet wird, sind die Textvorhersage und die automatische Textkorrektur deaktiviert. Wenn jedoch eine Keyboard gesetzt wurde, die die Textvorhersage deaktiviert, wird die Eigenschaft IsTextPredictionEnabled ignoriert. Daher kann die Eigenschaft nicht verwendet werden, um die Textvorhersage für einen Keyboard zu aktivieren, der sie ausdrücklich deaktiviert.

Farben

Editor kann für die Verwendung einer benutzerdefinierten Hintergrundfarbe über die BackgroundColor Eigenschaft festgelegt werden. Besondere Sorgfalt ist erforderlich, um sicherzustellen, dass Farben auf jeder Plattform verwendet werden können. Da jede Plattform unterschiedliche Standardwerte für Textfarbe aufweist, müssen Sie möglicherweise eine benutzerdefinierte Hintergrundfarbe für jede Plattform festlegen. Weitere Informationen zum Optimieren der Benutzeroberfläche für jede Plattform finden Sie unter "Arbeiten mit Plattformoptimierungen ".

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>

Editor mit BackgroundColor(Beispiel)

Stellen Sie sicher, dass die von Ihnen ausgewählten Hintergrund- und Textfarben auf jeder Plattform verwendbar sind und keinen Platzhaltertext verdeckt.

Ereignisse und Interaktivität

Editor macht zwei Ereignisse verfügbar:

  • TextChanged – wird ausgelöst, wenn sich der Text im Editor ändert. Stellt den Text vor und nach der Änderung bereit.
  • Abgeschlossen – wird ausgelöst, wenn der Benutzer die Eingabe beendet hat, indem er die EINGABETASTE auf der Tastatur drückt.

Hinweis

Die VisualElement Klasse, von der Entry geerbt wird, hat Focused auch Ereignisse und Unfocused Ereignisse.

Abgeschlossen

Das Completed Ereignis wird verwendet, um auf den Abschluss einer Interaktion mit einem Editor. Completed wird ausgelöst, wenn der Benutzer die Eingabe mit einem Feld beendet, indem er die Eingabetaste auf der Tastatur eingibt (oder durch Drücken der TAB-TASTE auf UWP). Der Handler für das Ereignis ist ein generischer Ereignishandler, der den Absender übernimmt und 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.
}

Das abgeschlossene Ereignis kann in Code und XAML abonniert werden:

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

Das TextChanged Ereignis wird verwendet, um auf eine Änderung des Inhalts eines Felds zu reagieren.

TextChanged wird immer dann ausgelöst, wenn sich die Text Editor Änderungen ändern. Der Handler für das Ereignis übernimmt eine Instanz von TextChangedEventArgs. TextChangedEventArgs bietet Zugriff auf die alten und neuen Werte der Editor Text über die OldTextValue Und NewTextValue Eigenschaften:

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

Das abgeschlossene Ereignis kann in Code und XAML abonniert werden:

In Code:

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>