Xamarin.Forms EditorXamarin.Forms Editor

Beispiel herunterladen Herunterladen des BeispielsDownload Sample Download the sample

Das- Editor Steuerelement wird verwendet, um mehrzeilige Eingaben zu akzeptieren.The Editor control is used to accept multi-line input.

Festlegen und Lesen von TextSet and read text

Die Editor -Eigenschaft wird wie bei anderen Text dargestellten Sichten von verfügbar gemacht Text .The Editor, like other text-presenting views, exposes the Text property. Diese Eigenschaft kann verwendet werden, um den von dargestellten Text festzulegen und zu lesen Editor .This property can be used to set and read the text presented by the Editor. Im folgenden Beispiel wird veranschaulicht, wie die- Text Eigenschaft in XAML festgelegt wird:The following example demonstrates setting the Text property in XAML:

<Editor Text="I am an Editor" />

In C#:In C#:

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

Um Text zu lesen, greifen Sie Text in c# auf die-Eigenschaft zu:To read text, access the Text property in C#:

var text = MyEditor.Text;

Platzhalter Text festlegenSet placeholder text

EditorKann so festgelegt werden, dass Platzhalter Text angezeigt wird, wenn keine Benutzereingaben gespeichert werden.The Editor can be set to show placeholder text when it is not storing user input. Dies wird erreicht, indem die Placeholder -Eigenschaft auf festgelegt wird string und häufig verwendet wird, um den Typ des Inhalts anzugeben, der für geeignet ist Editor .This is accomplished by setting the Placeholder property to a string, and is often used to indicate the type of content that is appropriate for the Editor. Außerdem kann die Platzhalter Textfarbe gesteuert werden, indem die-Eigenschaft auf festgelegt wird PlaceholderColor Color :In addition, the placeholder text color can be controlled by setting the PlaceholderColor property to a Color:

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

Text Eintrag verhindernPrevent text entry

Benutzer können daran gehindert werden, den Text in einer Editor zu ändern, indem Sie die-Eigenschaft mit dem IsReadOnly Standardwert false auf festlegen true :Users can be prevented from modifying the text in an Editor by setting the IsReadOnly property, which has a default value of false, to true:

<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 ändert nicht die visuelle Darstellung eines Editor , anders als die- IsEnabled Eigenschaft, die auch die visuelle Darstellung von Editor in grau ändert.The IsReadonly property does not alter the visual appearance of an Editor, unlike the IsEnabled property that also changes the visual appearance of the Editor to gray.

Transformieren von TextTransform text

Ein- Editor Objekt kann die Schreibweise seines Texts, der in der-Eigenschaft gespeichert ist, Transformieren Text , indem die- TextTransform Eigenschaft auf einen Wert der-Enumeration festgelegt wird TextTransform .An Editor can transform the casing of its text, stored in the Text property, by setting the TextTransform property to a value of the TextTransform enumeration. Diese Enumeration hat vier Werte:This enumeration has four values:

  • NoneGibt an, dass der Text nicht transformiert wird.None indicates that the text won't be transformed.
  • DefaultGibt an, dass das Standardverhalten für die Plattform verwendet wird.Default indicates that the default behavior for the platform will be used. Dies ist der Standardwert der TextTransform-Eigenschaft.This is the default value of the TextTransform property.
  • LowercaseGibt an, dass der Text in Kleinbuchstaben umgewandelt wird.Lowercase indicates that the text will be transformed to lowercase.
  • UppercaseGibt an, dass der Text in Großbuchstaben umgewandelt wird.Uppercase indicates that the text will be transformed to uppercase.

Im folgenden Beispiel wird gezeigt, wie Text in Großbuchstaben umgewandelt wird:The following example shows transforming text to uppercase:

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

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

Eingabe Länge begrenzenLimit input length

Die MaxLength -Eigenschaft kann verwendet werden, um die für zulässige Eingabe Länge einzuschränken Editor .The MaxLength property can be used to limit the input length that's permitted for the Editor. Diese Eigenschaft sollte auf eine positive ganze Zahl festgelegt werden:This property should be set to a positive integer:

<Editor ... MaxLength="10" />
var editor = new Editor { ... MaxLength = 10 };

Ein MaxLength -Eigenschafts Wert von 0 gibt an, dass keine Eingabe zulässig ist, und der Wert int.MaxValue , der der Standardwert für ein ist Editor , gibt an, dass die Anzahl der Zeichen, die eingegeben werden können, nicht wirksam ist.A MaxLength property value of 0 indicates that no input will be allowed, and a value of int.MaxValue, which is the default value for an Editor, indicates that there is no effective limit on the number of characters that may be entered.

ZeichenabstandCharacter spacing

Der Zeichenabstand kann auf ein angewendet werden, Editor indem die- Editor.CharacterSpacing Eigenschaft auf einen Wert festgelegt wird double :Character spacing can be applied to an Editor by setting the Editor.CharacterSpacing property to a double value:

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

Der entsprechende C#-Code lautet:The equivalent C# code is:

Editor editor = new editor { CharacterSpacing = 10 };

Das Ergebnis ist, dass Zeichen im Text, die von angezeigt Editor werden, CharacterSpacing geräteunabhängige Einheiten voneinander getrennt sind.The result is that characters in the text displayed by the Editor are spaced CharacterSpacing device-independent units apart.

Hinweis

Der CharacterSpacing -Eigenschafts Wert wird auf den Text angewendet, der von den Text Eigenschaften und angezeigt wird Placeholder .The CharacterSpacing property value is applied to the text displayed by the Text and Placeholder properties.

Automatische Größe eines EditorsAuto-size an Editor

Eine Editor kann so festgelegt werden, dass die Größe des Inhalts automatisch geändert wird, indem die-Eigenschaft auf festgelegt wird Editor.AutoSize TextChanges . Dies ist ein Wert der- EditoAutoSizeOption Enumeration.An Editor can be made to auto-size to its content by setting the Editor.AutoSize property to TextChanges, which is a value of the EditoAutoSizeOption enumeration. Diese Enumeration verfügt über zwei Werte:This enumeration has two values:

  • DisabledGibt an, dass die automatische Größe der Größe deaktiviert ist und der Standardwert ist.Disabled indicates that automatic resizing is disabled, and is the default value.
  • TextChangesGibt an, dass die automatische Größe der Größe aktiviert ist.TextChanges indicates that automatic resizing is enabled.

Dies kann im Code wie folgt erreicht werden:This can be accomplished in code as follows:

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

Wenn die automatische Größenänderung aktiviert ist, erhöht sich die Höhe des, Editor Wenn der Benutzer ihn mit Text füllt, und die Höhe wird verringert, wenn der Benutzer Text löscht.When auto-resizing is enabled, the height of the Editor will increase when the user fills it with text, and the height will decrease as the user deletes text.

Hinweis

EditorWenn die Eigenschaft festgelegt wurde, wird keine automatische Größe angezeigt HeightRequest .An Editor will not auto-size if the HeightRequest property has been set.

Anpassen der TastaturCustomize the keyboard

Die Tastatur, die angezeigt wird, wenn Benutzer mit einer interagieren Editor , kann Programm gesteuert über die- Keyboard Eigenschaft auf eine der folgenden Eigenschaften der-Klasse festgelegt werden Keyboard :The keyboard that's presented when users interact with an Editor can be set programmatically via the Keyboard property, to one of the following properties from the Keyboard class:

  • Chat: Wird zum Schreiben von Texten verwendet und in Situationen, in denen Emojis nützlich sind.Chat – used for texting and places where emoji are useful.
  • Default: die Standardtastatur.Default – the default keyboard.
  • Email: Wird beim Eingeben von E-Mail-Adressen verwendet.Email – used when entering email addresses.
  • Numeric: Wird beim Eingeben von Zahlen verwendet.Numeric – used when entering numbers.
  • Plain: Wird beim Eingeben von Text verwendet, ohne Angabe von KeyboardFlags.Plain – used when entering text, without any KeyboardFlags specified.
  • Telephone: Wird beim Eingeben von Telefonnummern verwendet.Telephone – used when entering telephone numbers.
  • Text: Wird beim Eingeben von Text verwendet.Text – used when entering text.
  • Url: Wird beim Eingeben von Dateipfaden und Webadressen verwendet.Url – used for entering file paths & web addresses.

Dies kann in XAML folgendermaßen erfüllt werden:This can be accomplished in XAML as follows:

<Editor Keyboard="Chat" />

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

Beispiele für jede Tastatur finden Sie in unserem Rezepte -Repository.Examples of each keyboard can be found in our Recipes 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.The Keyboard class also has a Create factory method that can be used to customize a keyboard by specifying capitalization, spellcheck, and suggestion behavior. KeyboardFlags-Enumerationswerte werden als Argumente der Methode festgelegt, wobei das benutzerdefinierte Keyboard zurückgegeben wird.KeyboardFlags enumeration values are specified as arguments to the method, with a customized Keyboard being returned. Die KeyboardFlags-Enumeration verfügt über folgende Werte:The KeyboardFlags enumeration contains the following values:

  • None: Der Tastatur werden keine Features hinzugefügt.None – no features are added to the keyboard.
  • CapitalizeSentence: Gibt an, dass der erste Buchstabe des ersten Worts jedes Satzes automatisch groß geschrieben wird.CapitalizeSentence – indicates that the first letter of the first word of each entered sentence will be automatically capitalized.
  • Spellcheck: Gibt an, dass die Rechtschreibprüfung für den eingegebenen Text durchgeführt wird.Spellcheck – indicates that spellcheck will be performed on entered text.
  • Suggestions: Gibt an, dass Wortvervollständigungen für den eingegebenen Text angeboten werden.Suggestions – indicates that word completions will be offered on entered text.
  • CapitalizeWord: Gibt an, dass der erste Buchstabe von jedem Wort automatisch groß geschrieben wird.CapitalizeWord – indicates that the first letter of each word will be automatically capitalized.
  • CapitalizeCharacter: Gibt an, dass jedes Zeichen automatisch groß geschrieben wird.CapitalizeCharacter – indicates that every character will be automatically capitalized.
  • CapitalizeNone: Gibt an, dass keine automatische Großschreibung erfolgt.CapitalizeNone – indicates that no automatic capitalization will occur.
  • 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.All – indicates that spellcheck, word completions, and sentence capitalization will occur on entered text.

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:The following XAML code example shows how to customize the default Keyboard to offer word completions and capitalize every entered character:

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

Der entsprechende C#-Code lautet:The equivalent C# code is:

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

Aktivieren und Deaktivieren der RechtschreibprüfungEnable and disable spell checking

Die- IsSpellCheckEnabled Eigenschaft steuert, ob die Rechtschreibprüfung aktiviert ist.The IsSpellCheckEnabled property controls whether spell checking is enabled. Standardmäßig ist die-Eigenschaft auf festgelegt true .By default, the property is set to true. Wenn der Benutzer Text eingibt, werden falsche Schreibweisen angegeben.As the user enters text, misspellings are indicated.

Für einige Texteingabe Szenarios, z. b. die Eingabe eines Benutzernamens, bietet die Rechtschreibprüfung jedoch eine negative Darstellung und sollte daher durch Festlegen der- IsSpellCheckEnabled Eigenschaft auf deaktiviert werden false :However, for some text entry scenarios, such as entering a username, spell checking provides a negative experience and so should be disabled by setting the IsSpellCheckEnabled property to false:

<Editor ... IsSpellCheckEnabled="false" />
var editor = new Editor { ... IsSpellCheckEnabled = false };

Hinweis

Wenn die IsSpellCheckEnabled -Eigenschaft auf festgelegt ist false und eine benutzerdefinierte Tastatur nicht verwendet wird, wird die native Rechtschreibprüfung deaktiviert.When the IsSpellCheckEnabled property is set to false, and a custom keyboard isn't being used, the native spell checker will be disabled. Wenn jedoch ein Keyboard festgelegt wurde, der die Rechtschreibprüfung deaktiviert (z. b.), Keyboard.Chat wird die- IsSpellCheckEnabled Eigenschaft ignoriert.However, if a Keyboard has been set that disables spell checking, such as Keyboard.Chat, the IsSpellCheckEnabled property is ignored. Daher kann die-Eigenschaft nicht verwendet werden, um die Rechtschreibprüfung für einen zu aktivieren Keyboard , der diese explizit deaktiviert.Therefore, the property cannot be used to enable spell checking for a Keyboard that explicitly disables it.

Aktivieren und Deaktivieren der Text VorhersageEnable and disable text prediction

Die IsTextPredictionEnabled -Eigenschaft steuert, ob die Text Vorhersage und die automatische Textkorrektur aktiviert ist.The IsTextPredictionEnabled property controls whether text prediction and automatic text correction is enabled. Standardmäßig ist die-Eigenschaft auf festgelegt true .By default, the property is set to true. Wenn der Benutzer Text eingibt, werden Word-Vorhersagen angezeigt.As the user enters text, word predictions are presented.

Für einige Texteingabe Szenarios, wie z. b. die Eingabe eines Benutzernamens, bietet die Text Vorhersage und die automatische Textkorrektur jedoch eine negative Benutzerumgebung und sollte durch Festlegen der- IsTextPredictionEnabled Eigenschaft auf deaktiviert werden false :However, for some text entry scenarios, such as entering a username, text prediction and automatic text correction provides a negative experience and should be disabled by setting the IsTextPredictionEnabled property to false:

<Editor ... IsTextPredictionEnabled="false" />
var editor = new Editor { ... IsTextPredictionEnabled = false };

Hinweis

Wenn die IsTextPredictionEnabled -Eigenschaft auf festgelegt ist false und keine benutzerdefinierte Tastatur verwendet wird, werden die Text Vorhersage und die automatische Textkorrektur deaktiviert.When the IsTextPredictionEnabled property is set to false, and a custom keyboard isn't being used, text prediction and automatic text correction is disabled. Wenn jedoch ein Keyboard festgelegt wurde, der die Text Vorhersage deaktiviert, wird die- IsTextPredictionEnabled Eigenschaft ignoriert.However, if a Keyboard has been set that disables text prediction, the IsTextPredictionEnabled property is ignored. Daher kann die-Eigenschaft nicht zum Aktivieren der Text Vorhersage für einen verwendet werden, der diese Keyboard explizit deaktiviert.Therefore, the property cannot be used to enable text prediction for a Keyboard that explicitly disables it.

FarbenColors

Editorkann festgelegt werden, um eine benutzerdefinierte Hintergrundfarbe über die-Eigenschaft zu verwenden BackgroundColor .Editor can be set to use a custom background color via the BackgroundColor property. Eine besondere Sorgfalt ist erforderlich, um sicherzustellen, dass Farben auf jeder Plattform verwendet werden können.Special care is necessary to ensure that colors will be usable on each platform. Da jede Plattform über andere Standardwerte für die Textfarbe verfügt, müssen Sie möglicherweise für jede Plattform eine benutzerdefinierte Hintergrundfarbe festlegen.Because each platform has different defaults for text color, you may need to set a custom background color for each platform. Weitere Informationen zur Optimierung der Benutzeroberfläche für die einzelnen Plattformen finden Sie unter Arbeiten mit Platt Form Anpassungen .See Working with Platform Tweaks for more information about optimizing the UI for each platform.

In C#: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: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 Platzhalter Text verbergen.Make sure that the background and text colors you choose are usable on each platform and don't obscure any placeholder text.

Ereignisse und InteraktivitätEvents and interactivity

Editormacht zwei Ereignisse verfügbar:Editor exposes two events:

  • TextChanged – wird ausgelöst, wenn der Text im Editor geändert wird.TextChanged – raised when the text changes in the editor. Stellt den Text vor und nach der Änderung bereit.Provides the text before and after the change.
  • Abgeschlossen – wird ausgelöst, wenn der Benutzer die Eingabe durch Drücken der Rückgabetaste auf der Tastatur beendet hat.Completed – raised when the user has ended input by pressing the return key on the keyboard.

Hinweis

Die VisualElement -Klasse, von der Entry erbt, verfügt auch über die Focused -und- Unfocused Ereignisse.The VisualElement class, from which Entry inherits, also has Focused and Unfocused events.

AbgeschlossenCompleted

Das- Completed Ereignis wird verwendet, um auf den Abschluss einer Interaktion mit einer zu reagieren Editor .The Completed event is used to react to the completion of an interaction with an Editor. Completedwird ausgelöst, wenn der Benutzer die Eingabe mit einem Feld beendet, indem die Rückgabetaste auf der Tastatur eingegeben wird (oder durch Drücken der Tab-Taste auf der UWP).Completed is raised when the user ends input with a field by entering the return key on the keyboard (or by pressing the Tab key on UWP). Der Handler für das-Ereignis ist ein generischer Ereignishandler, der den Absender und Folgendes annimmt EventArgs :The handler for the event is a generic event handler, taking the sender and 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 im Code und in XAML abonniert werden:The completed event can be subscribed to in code and XAML:

In C#: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: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>

TextChangedTextChanged

Das- TextChanged Ereignis wird verwendet, um auf eine Änderung im Inhalt eines Felds zu reagieren.The TextChanged event is used to react to a change in the content of a field.

TextChangedwird immer dann ausgelöst, wenn der der Text Editor geändert wird.TextChanged is raised whenever the Text of the Editor changes. Der Handler für das-Ereignis nimmt eine Instanz von an TextChangedEventArgs .The handler for the event takes an instance of TextChangedEventArgs. TextChangedEventArgsermöglicht den Zugriff auf die alten und neuen Werte der Editor Text über die OldTextValue -Eigenschaft und die-Eigenschaft NewTextValue :TextChangedEventArgs provides access to the old and new values of the Editor Text via the OldTextValue and NewTextValue properties:

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

Das abgeschlossene Ereignis kann im Code und in XAML abonniert werden:The completed event can be subscribed to in code and XAML:

In Code: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: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>