Xamarin.Forms Editor

Kontrol Editor digunakan untuk menerima input multibaris.

Mengatur dan membaca teks

, Editorseperti tampilan penyajian Text teks lainnya, mengekspos properti . Properti ini dapat digunakan untuk mengatur dan membaca teks yang disajikan oleh Editor. Contoh berikut menunjukkan pengaturan Text properti di XAML:

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

Di C#:

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

Untuk membaca teks, akses Text properti di C#:

var text = editor.Text;

Mengatur teks tempat penampung

Editor dapat diatur untuk menampilkan teks tempat penampung saat tidak menyimpan input pengguna. Ini dicapai dengan mengatur Placeholder properti ke string, dan sering digunakan untuk menunjukkan jenis konten yang sesuai untuk Editor. Selain itu, warna teks tempat penampung dapat dikontrol dengan mengatur PlaceholderColor properti ke Color:

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

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

Mencegah entri teks

Pengguna dapat dicegah untuk memodifikasi teks dalam dengan Editor mengatur IsReadOnly properti, yang memiliki nilai falsedefault , ke true:

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

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

Catatan

Properti IsReadonly tidak mengubah tampilan Editorvisual , tidak seperti IsEnabled properti yang juga mengubah tampilan visual menjadi Editor abu-abu.

Ubah teks

Dapat Editor mengubah casing teksnya, disimpan di Text properti , dengan mengatur TextTransform properti ke nilai TextTransform enumerasi. Enumerasi ini memiliki empat nilai:

• None menunjukkan bahwa teks tidak akan diubah.
• Default menunjukkan bahwa perilaku default untuk platform akan digunakan. Ini adalah nilai TextTransform default properti.
• Lowercase menunjukkan bahwa teks akan diubah menjadi huruf kecil.
• Uppercase menunjukkan bahwa teks akan diubah menjadi huruf besar.

Contoh berikut menunjukkan mengubah teks menjadi huruf besar:

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

Kode C# yang setara adalah:

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

Batasi panjang input

Properti MaxLength dapat digunakan untuk membatasi panjang input yang diizinkan untuk Editor. Properti ini harus diatur ke bilangan bulat positif:

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

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

MaxLength Nilai properti 0 menunjukkan bahwa tidak ada input yang akan diizinkan, dan nilai int.MaxValue, yang merupakan nilai default untuk Editor, menunjukkan bahwa tidak ada batas efektif pada jumlah karakter yang mungkin dimasukkan.

Penspasian karakter

Penspasian karakter dapat diterapkan ke properti Editor dengan mengatur Editor.CharacterSpacing properti ke double nilai:

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

Kode C# yang setara adalah:

Editor editor = new editor { CharacterSpacing = 10 };

Hasilnya adalah bahwa karakter dalam teks yang ditampilkan oleh Editor unit independen perangkat yang diberi spasi CharacterSpacing terpisah.

Catatan

Nilai CharacterSpacing properti diterapkan ke teks yang ditampilkan oleh Text properti dan Placeholder .

Ukuran otomatis Editor

Dapat Editor dibuat untuk ukuran otomatis ke kontennya dengan mengatur Editor.AutoSize properti ke TextChanges, yang merupakan nilai EditorAutoSizeOption enumerasi. Enumerasi ini memiliki dua nilai:

• Disabled menunjukkan bahwa perubahan ukuran otomatis dinonaktifkan, dan merupakan nilai default.
• TextChanges menunjukkan bahwa pengurangan ukuran otomatis diaktifkan.

Ini dapat dicapai dalam kode sebagai berikut:

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

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

Saat mengubah ukuran otomatis diaktifkan, tinggi Editor akan meningkat ketika pengguna mengisinya dengan teks, dan tingginya akan berkurang saat pengguna menghapus teks.

Catatan

Tidak Editor akan berukuran HeightRequest otomatis jika properti telah diatur.

Mengkustomisasi keyboard

Keyboard yang disajikan saat pengguna berinteraksi dengan Editor dapat diatur secara terprogram melalui Keyboard properti , ke salah satu properti berikut dari Keyboard kelas :

• Chat – digunakan untuk teks dan tempat di mana emoji berguna.
• Default – keyboard default.
• Email – digunakan saat memasukkan alamat email.
• Numeric – digunakan saat memasukkan angka.
• Plain – digunakan saat memasukkan teks, tanpa KeyboardFlags ditentukan.
• Telephone – digunakan saat memasukkan nomor telepon.
• Text – digunakan saat memasukkan teks.
• Url – digunakan untuk memasukkan jalur file & alamat web.

Ini dapat dicapai dalam XAML sebagai berikut:

<Editor Keyboard="Chat" />

Kode C# yang setara adalah:

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

Contoh setiap keyboard dapat ditemukan di repositori Resep kami.

Kelas ini Keyboard juga memiliki Create metode pabrik yang dapat digunakan untuk menyesuaikan keyboard dengan menentukan kapitalisasi, pemeriksaan ejaan, dan perilaku saran. KeyboardFlags nilai enumerasi ditentukan sebagai argumen ke metode , dengan yang dikustomisasi Keyboard dikembalikan. Enumerasi KeyboardFlags berisi nilai berikut:

• None – tidak ada fitur yang ditambahkan ke keyboard.
• CapitalizeSentence – menunjukkan bahwa huruf pertama dari kata pertama dari setiap kalimat yang dimasukkan akan secara otomatis dikapitalisasi.
• Spellcheck – menunjukkan bahwa pemeriksaan ejaan akan dilakukan pada teks yang dimasukkan.
• Suggestions – menunjukkan bahwa penyelesaian kata akan ditawarkan pada teks yang dimasukkan.
• CapitalizeWord – menunjukkan bahwa huruf pertama dari setiap kata akan secara otomatis dikapitalisasi.
• CapitalizeCharacter – menunjukkan bahwa setiap karakter akan secara otomatis dikapitalisasi.
• CapitalizeNone – menunjukkan bahwa tidak ada kapitalisasi otomatis yang akan terjadi.
• All – menunjukkan bahwa pemeriksaan ejaan, penyelesaian kata, dan kapitalisasi kalimat akan terjadi pada teks yang dimasukkan.

Contoh kode XAML berikut menunjukkan cara mengkustomisasi default Keyboard untuk menawarkan penyelesaian kata dan memanfaatkan setiap karakter yang dimasukkan:

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

Kode C# yang setara adalah:

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

Mengaktifkan dan menonaktifkan pemeriksaan ejaan

Properti IsSpellCheckEnabled mengontrol apakah pemeriksaan ejaan diaktifkan. Secara default, properti diatur ke true. Saat pengguna memasukkan teks, kesalahan ejaan ditunjukkan.

Namun, untuk beberapa skenario entri teks, seperti memasukkan nama pengguna, pemeriksaan ejaan memberikan pengalaman negatif sehingga harus dinonaktifkan dengan mengatur IsSpellCheckEnabled properti ke false:

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

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

Catatan

IsSpellCheckEnabled Saat properti diatur ke false, dan keyboard kustom tidak digunakan, pemeriksa ejaan asli akan dinonaktifkan. Namun, jika Keyboard telah diatur yang menonaktifkan pemeriksaan ejaan, seperti Keyboard.Chat, IsSpellCheckEnabled properti diabaikan. Oleh karena itu, properti tidak dapat digunakan untuk mengaktifkan pemeriksaan ejaan yang Keyboard secara eksplisit menonaktifkannya.

Mengaktifkan dan menonaktifkan prediksi teks

Properti IsTextPredictionEnabled mengontrol apakah prediksi teks dan koreksi teks otomatis diaktifkan. Secara default, properti diatur ke true. Saat pengguna memasukkan teks, prediksi kata disajikan.

Namun, untuk beberapa skenario entri teks, seperti memasukkan nama pengguna, prediksi teks, dan koreksi teks otomatis memberikan pengalaman negatif dan harus dinonaktifkan dengan mengatur IsTextPredictionEnabled properti ke false:

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

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

Catatan

IsTextPredictionEnabled Saat properti diatur ke false, dan keyboard kustom tidak digunakan, prediksi teks dan koreksi teks otomatis dinonaktifkan. Namun, jika Keyboard telah ditetapkan yang menonaktifkan prediksi teks, IsTextPredictionEnabled properti diabaikan. Oleh karena itu, properti tidak dapat digunakan untuk mengaktifkan prediksi teks untuk Keyboard yang secara eksplisit menonaktifkannya.

Warna

Editor dapat diatur untuk menggunakan warna latar belakang kustom melalui BackgroundColor properti . Perawatan khusus diperlukan untuk memastikan bahwa warna akan dapat digunakan di setiap platform. Karena setiap platform memiliki default yang berbeda untuk warna teks, Anda mungkin perlu mengatur warna latar belakang kustom untuk setiap platform. Lihat Bekerja dengan Platform Tweaks untuk informasi selengkapnya tentang mengoptimalkan UI untuk setiap platform.

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

Dalam 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>

Pastikan bahwa warna latar belakang dan teks yang Anda pilih dapat digunakan di setiap platform dan tidak mengaburkan teks tempat penampung apa pun.

Peristiwa dan interaktivitas

Editor mengekspos dua peristiwa:

• TextChanged – dimunculkan saat teks berubah di editor. Menyediakan teks sebelum dan sesudah perubahan.
• Selesai - dinaikkan ketika pengguna telah mengakhiri input dengan menekan tombol pengembalian pada keyboard.

Catatan

Kelas VisualElement , dari mana Entry mewarisi, juga memiliki Focused dan Unfocused peristiwa.

Selesai

Peristiwa Completed ini digunakan untuk bereaksi terhadap penyelesaian interaksi dengan Editor. Completed dinaikkan ketika pengguna mengakhiri input dengan bidang dengan memasukkan tombol pengembalian pada keyboard (atau dengan menekan tombol Tab pada UWP). Handler untuk peristiwa adalah penanganan aktivitas generik, mengambil pengirim dan 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.
}

Peristiwa yang telah selesai dapat berlangganan dalam kode dan XAML:

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

Dalam 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

Kejadian TextChanged ini digunakan untuk bereaksi terhadap perubahan konten bidang.

TextChanged dimunculkan setiap kali Text perubahan Editor . Handler untuk peristiwa mengambil instans .TextChangedEventArgs TextChangedEventArgs menyediakan akses ke nilai lama dan baru dari EditorText melalui OldTextValue properti dan NewTextValue :

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

Peristiwa yang telah selesai dapat berlangganan dalam kode dan XAML:

Dalam kode:

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

Dalam 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>

Tautan terkait

• Editor API