Udostępnij za pomocą

Xamarin.Forms Edytor

Kontrolka Editor służy do akceptowania danych wejściowych wielowierszowych.

Ustawianie i odczytywanie tekstu

Obiekt Editor, podobnie jak inne widoki przedstawiające tekst, uwidacznia Text właściwość . Ta właściwość może służyć do ustawiania i odczytywania tekstu przedstawionego Editorprzez element . W poniższym przykładzie pokazano ustawienie Text właściwości w języku XAML:

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

W języku C#:

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

Aby odczytać tekst, uzyskaj dostęp do Text właściwości w języku C#:

var text = editor.Text;

Ustawianie tekstu zastępczego

Editor Element można ustawić tak, aby pokazywał tekst zastępczy, gdy nie przechowuje danych wejściowych użytkownika. Jest to realizowane przez ustawienie Placeholder właściwości na string, i jest często używane do wskazywania typu zawartości, która jest odpowiednia dla elementu Editor. Ponadto kolor tekstu zastępczego można kontrolować, ustawiając PlaceholderColor właściwość na Colorwartość :

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

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

Zapobieganie wpisowi tekstowemu

Użytkownikom można uniemożliwić modyfikowanie tekstu w obiekcie Editor przez ustawienie IsReadOnly właściwości , która ma domyślną wartość false, na truewartość :

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

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

Uwaga

Właściwość IsReadonly nie zmienia wyglądu wizualizacji Editorobiektu , w przeciwieństwie do IsEnabled właściwości, która również zmienia wygląd wizualizacji Editor na szary.

Przekształcanie tekstu

Obiekt Editor może przekształcić wielkość liter tekstu przechowywanego Text we właściwości, ustawiając TextTransform właściwość na wartość TextTransform wyliczenia. Ta wyliczenie ma cztery wartości:

  • None wskazuje, że tekst nie zostanie przekształcony.
  • Default wskazuje, że będzie używane domyślne zachowanie platformy. Jest to wartość domyślna TextTransform właściwości.
  • Lowercase wskazuje, że tekst zostanie przekształcony w małe litery.
  • Uppercase wskazuje, że tekst zostanie przekształcony na wielkie litery.

W poniższym przykładzie pokazano przekształcanie tekstu na wielkie litery:

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

Równoważny kod języka C# to:

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

Ogranicz długość danych wejściowych

Właściwość MaxLength może służyć do ograniczenia długości wejściowej dozwolonej dla elementu Editor. Ta właściwość powinna być ustawiona na dodatnią liczbę całkowitą:

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

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

MaxLength Wartość właściwości 0 wskazuje, że żadne dane wejściowe nie będą dozwolone, a wartość int.MaxValue, która jest wartością domyślną Editorelementu , wskazuje, że nie ma obowiązującego limitu liczby znaków, które mogą zostać wprowadzone.

Odstępy między znakami

Odstępy między znakami można zastosować do obiektu Editor , ustawiając Editor.CharacterSpacing właściwość na double wartość:

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

Równoważny kod języka C# to:

Editor editor = new editor { CharacterSpacing = 10 };

Wynikiem jest to, że znaki w tekście wyświetlanym przez Editor element są oddzielone CharacterSpacing od siebie jednostkami niezależnymi od urządzenia.

Uwaga

Wartość CharacterSpacing właściwości jest stosowana do tekstu wyświetlanego Text przez właściwości i Placeholder .

Automatyczne ustawianie rozmiaru edytora

Element Editor można ustawić w celu automatycznego rozmiaru zawartości, ustawiając Editor.AutoSize właściwość na TextChangeswartość , która jest wartością EditorAutoSizeOption wyliczenia. Ta wyliczenie ma dwie wartości:

  • Disabled wskazuje, że automatyczna zmiana rozmiaru jest wyłączona i jest wartością domyślną.
  • TextChanges wskazuje, że włączono automatyczną zmianę rozmiaru.

Można to zrobić w kodzie w następujący sposób:

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

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

Po włączeniu automatycznego zmieniania rozmiaru wysokość Editor obiektu zwiększy się, gdy użytkownik wypełni go tekstem, a wysokość spadnie wraz z usunięciem tekstu przez użytkownika.

Uwaga

Ustawienie Editor właściwości nie spowoduje automatycznego rozmiaru HeightRequest , jeśli właściwość została ustawiona.

Dostosowywanie klawiatury

Klawiatura, która jest wyświetlana, gdy użytkownicy wchodzą w interakcję z elementem Editor , można ustawić programowo za pośrednictwem Keyboard właściwości na jedną z następujących właściwości klasy Keyboard :

  • Chat — używany do tworzenia tekstu i miejsc, w których emoji są przydatne.
  • Default — klawiatura domyślna.
  • Email — używane podczas wprowadzania adresów e-mail.
  • Numeric — używane podczas wprowadzania liczb.
  • Plain — używany podczas wprowadzania tekstu bez żadnego określonego KeyboardFlags .
  • Telephone – używane podczas wprowadzania numerów telefonów.
  • Text — używany podczas wprowadzania tekstu.
  • Url — służy do wprowadzania ścieżek plików i adresów internetowych.

Można to zrobić w języku XAML w następujący sposób:

<Editor Keyboard="Chat" />

Równoważny kod języka C# to:

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

Przykłady każdej klawiatury można znaleźć w naszym repozytorium Przepisy .

Klasa Keyboard ma również metodę Create fabryki, która może służyć do dostosowywania klawiatury przez określenie wielkich liter, sprawdzania pisowni i zachowania sugestii. KeyboardFlags Wartości wyliczenia są określane jako argumenty metody, przy czym zwracana jest niestandardowa Keyboard wartość . Wyliczenie KeyboardFlags zawiera następujące wartości:

  • None — do klawiatury nie są dodawane żadne funkcje.
  • CapitalizeSentence – wskazuje, że pierwsza litera pierwszego wyrazu każdego wprowadzonego zdania zostanie automatycznie wpisana literą.
  • Spellcheck — wskazuje, że sprawdzanie pisowni będzie wykonywane na wprowadzonym tekście.
  • Suggestions — wskazuje, że uzupełnianie wyrazów będzie oferowane dla wprowadzonego tekstu.
  • CapitalizeWord — wskazuje, że pierwsza litera każdego wyrazu będzie automatycznie wielkich liter.
  • CapitalizeCharacter — wskazuje, że każdy znak będzie automatycznie wielkich liter.
  • CapitalizeNone — wskazuje, że nie nastąpi automatyczna kapitalizowanie.
  • All — wskazuje, że w wprowadzonym tekście wystąpi sprawdzanie pisowni, uzupełnianie wyrazów i wielkie litery zdań.

Poniższy przykład kodu XAML pokazuje, jak dostosować wartość domyślną Keyboard , aby oferować uzupełnianie wyrazów i wielką literę każdego wprowadzonego znaku:

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

Równoważny kod języka C# to:

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

Włączanie i wyłączanie sprawdzania pisowni

Właściwość IsSpellCheckEnabled określa, czy sprawdzanie pisowni jest włączone. Domyślnie właściwość jest ustawiona na truewartość . Gdy użytkownik wprowadza tekst, wskazywane są błędy pisowni.

Jednak w przypadku niektórych scenariuszy wprowadzania tekstu, takich jak wprowadzenie nazwy użytkownika, sprawdzanie pisowni zapewnia negatywne środowisko i dlatego należy je wyłączyć, ustawiając IsSpellCheckEnabled właściwość na false:

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

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

Uwaga

IsSpellCheckEnabled Gdy właściwość jest ustawiona na false, a niestandardowa klawiatura nie jest używana, natywny moduł sprawdzania pisowni zostanie wyłączony. Jeśli Keyboard jednak ustawiono ustawienie, które wyłącza sprawdzanie pisowni, takie jak Keyboard.Chat, IsSpellCheckEnabled właściwość jest ignorowana. W związku z tym nie można użyć właściwości w celu włączenia sprawdzania pisowni dla elementu Keyboard , który jawnie go wyłącza.

Włączanie i wyłączanie przewidywania tekstu

Właściwość IsTextPredictionEnabled określa, czy włączono przewidywanie tekstu i automatyczną korektę tekstu. Domyślnie właściwość jest ustawiona na truewartość . Gdy użytkownik wprowadza tekst, wyświetlane są przewidywania wyrazów.

Jednak w przypadku niektórych scenariuszy wprowadzania tekstu, takich jak wprowadzanie nazwy użytkownika, przewidywanie tekstu i automatyczna korekta tekstu zapewnia negatywne środowisko i powinno być wyłączone przez ustawienie IsTextPredictionEnabled właściwości na false:

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

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

Uwaga

IsTextPredictionEnabled Gdy właściwość jest ustawiona na false, a niestandardowa klawiatura nie jest używana, przewidywanie tekstu i automatyczna korekta tekstu jest wyłączona. Jeśli Keyboard jednak ustawiono ustawienie, które wyłącza przewidywanie tekstu, IsTextPredictionEnabled właściwość jest ignorowana. W związku z tym nie można użyć właściwości do włączenia przewidywania tekstu dla elementu Keyboard , który jawnie go wyłącza.

Kolory

Editor można ustawić tak, aby używać niestandardowego koloru tła za pośrednictwem BackgroundColor właściwości . Szczególną ostrożność należy zapewnić, że kolory będą używane na każdej platformie. Ponieważ każda platforma ma inne wartości domyślne dla koloru tekstu, może być konieczne ustawienie niestandardowego koloru tła dla każdej platformy. Aby uzyskać więcej informacji na temat optymalizowania interfejsu użytkownika dla każdej platformy, zobacz Praca z poprawkami platformy.

W języku 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);
    }
}

W języku 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>

Przykład edytora z kolorem tła

Upewnij się, że wybrane kolory tła i tekstu są używane na każdej platformie i nie ukrywają żadnego tekstu zastępczego.

Zdarzenia i interakcyjność

Editor uwidacznia dwa zdarzenia:

  • TextChanged — wywoływany , gdy tekst zmieni się w edytorze. Udostępnia tekst przed zmianą i po nim.
  • Ukończono — zgłaszany po zakończeniu wprowadzania danych przez naciśnięcie zwrotnego na klawiaturze.

Uwaga

Klasa VisualElement , z której Entry dziedziczy, ma Focused również zdarzenia i Unfocused .

Ukończone

Zdarzenie Completed służy do reagowania na zakończenie interakcji z elementem Editor. Completed jest wywoływany, gdy użytkownik kończy wprowadzanie danych wejściowych za pomocą pola, wprowadzając zwrotny na klawiaturze (lub naciskając Tab na platformie UWP). Procedura obsługi zdarzenia to ogólny program obsługi zdarzeń, biorąc nadawcę i 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.
}

Ukończone zdarzenie można subskrybować w kodzie i XAML:

W języku 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);
    }
}

W języku 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

Zdarzenie TextChanged służy do reagowania na zmianę zawartości pola.

TextChanged jest zgłaszany za każdym razem, gdy Text Editor zmiany są zgłaszane. Procedura obsługi zdarzenia przyjmuje wystąpienie TextChangedEventArgsklasy . TextChangedEventArgs zapewnia dostęp do starych i nowych wartości Editor Text właściwości za pośrednictwem właściwości OldTextValue i NewTextValue :

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

Ukończone zdarzenie można subskrybować w kodzie i XAML:

W kodzie:

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);
    }
}

W języku 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>
  • Last updated on