Bagikan melalui

Xamarin.Forms Catatan

  • Artikel

Xamarin.FormsEntry digunakan untuk input teks baris tunggal. Entry, seperti Editor tampilan, mendukung beberapa jenis keyboard. Selain itu, Entry dapat digunakan sebagai bidang kata sandi.

Mengatur dan membaca teks

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

<Entry x:Name="entry" Text="I am an Entry" />

Di C#:

var entry = new Entry { Text = "I am an Entry" };

Untuk membaca teks, akses Text properti di C#:

var text = entry.Text;

Mengatur teks tempat penampung

Entry 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 Entry. Selain itu, warna teks tempat penampung dapat dikontrol dengan mengatur PlaceholderColor properti ke Color:

<Entry Placeholder="Username" PlaceholderColor="Olive" />

var entry = new Entry { Placeholder = "Username", PlaceholderColor = Color.Olive };

Catatan

Lebar dapat Entry didefinisikan dengan mengatur propertinya WidthRequest . Jangan bergantung pada lebar yang Entry ditentukan berdasarkan nilai propertinya Text .

Mencegah entri teks

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

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

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

Catatan

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

Ubah teks

Dapat Entry 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:

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

Kode C# yang setara adalah:

Entry entry = new Entry
{
    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 Entry. Properti ini harus diatur ke bilangan bulat positif:

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

var entry = new Entry { ... MaxLength = 10 };

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

Penspasian karakter

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

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

Kode C# yang setara adalah:

Entry entry = new Entry { CharacterSpacing = 10 };

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

Catatan

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

Bidang kata sandi

EntryIsPassword menyediakan properti . Kapan IsPassword adalah true, isi bidang akan disajikan sebagai lingkaran hitam:

Dalam XAML:

<Entry IsPassword="true" />

Di C#:

var MyEntry = new Entry { IsPassword = true };

Contoh IsPassword Entri

Tempat penampung dapat digunakan dengan instans Entry yang dikonfigurasi sebagai bidang kata sandi:

Dalam XAML:

<Entry IsPassword="true" Placeholder="Password" />

Di C#:

var MyEntry = new Entry { IsPassword = true, Placeholder = "Password" };

Contoh Entri IsPassword dan Tempat Penampung

Mengatur posisi kursor dan panjang pemilihan teks

Properti CursorPosition dapat digunakan untuk mengembalikan atau mengatur posisi di mana karakter berikutnya akan dimasukkan ke dalam string yang disimpan dalam Text properti:

<Entry Text="Cursor position set" CursorPosition="5" />

var entry = new Entry { Text = "Cursor position set", CursorPosition = 5 };

Nilai CursorPosition default properti adalah 0, yang menunjukkan bahwa teks akan disisipkan di awal Entry.

Selain itu, SelectionLength properti dapat digunakan untuk mengembalikan atau mengatur panjang pilihan teks dalam Entry:

<Entry Text="Cursor position and selection length set" CursorPosition="2" SelectionLength="10" />

var entry = new Entry { Text = "Cursor position and selection length set", CursorPosition = 2, SelectionLength = 10 };

Nilai SelectionLength default properti adalah 0, yang menunjukkan bahwa tidak ada teks yang dipilih.

Tampilkan tombol hapus

Properti ClearButtonVisibility dapat digunakan untuk mengontrol apakah tombol Entry tampilkan jelas, yang memungkinkan pengguna menghapus teks. Properti ini harus diatur ke ClearButtonVisibility anggota enumerasi:

  • Never menunjukkan bahwa tombol bersih tidak akan pernah ditampilkan. Ini adalah nilai default untuk Entry.ClearButtonVisibility properti .
  • WhileEditing menunjukkan bahwa tombol bersih akan ditampilkan di Entry, sementara memiliki fokus dan teks.

Contoh berikut menunjukkan pengaturan properti di XAML:

<Entry Text="Xamarin.Forms"
       ClearButtonVisibility="WhileEditing" />

Kode C# yang setara adalah:

var entry = new Entry { Text = "Xamarin.Forms", ClearButtonVisibility = ClearButtonVisibility.WhileEditing };

Cuplikan layar berikut menunjukkan Entry dengan tombol hapus diaktifkan:

Cuplikan layar Entri dengan tombol hapus, di iOS dan Android

Mengkustomisasi keyboard

Keyboard yang disajikan saat pengguna berinteraksi dengan Entry 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:

<Entry Keyboard="Chat" />

Kode C# yang setara adalah:

var entry = new Entry { 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:

<Entry Placeholder="Enter text here">
    <Entry.Keyboard>
        <Keyboard x:FactoryMethod="Create">
            <x:Arguments>
                <KeyboardFlags>Suggestions,CapitalizeCharacter</KeyboardFlags>
            </x:Arguments>
        </Keyboard>
    </Entry.Keyboard>
</Entry>

Kode C# yang setara adalah:

var entry = new Entry { Placeholder = "Enter text here" };
entry.Keyboard = Keyboard.Create(KeyboardFlags.Suggestions | KeyboardFlags.CapitalizeCharacter);

Mengkustomisasi kunci pengembalian

Tampilan tombol pengembalian pada keyboard lunak, yang ditampilkan ketika memiliki Entry fokus, dapat disesuaikan dengan mengatur ReturnType properti ke nilai ReturnType enumerasi:

  • Default – menunjukkan bahwa tidak ada kunci pengembalian khusus yang diperlukan dan bahwa default platform akan digunakan.
  • Done – menunjukkan kunci pengembalian "Selesai".
  • Go – menunjukkan kunci pengembalian "Go".
  • Next – menunjukkan kunci pengembalian "Berikutnya".
  • Search – menunjukkan kunci pengembalian "Pencarian".
  • Send – menunjukkan kunci pengembalian "Kirim".

Contoh XAML berikut menunjukkan cara mengatur kunci pengembalian:

<Entry ReturnType="Send" />

Kode C# yang setara adalah:

var entry = new Entry { ReturnType = ReturnType.Send };

Catatan

Tampilan yang tepat dari kunci pengembalian tergantung pada platform. Di iOS, kunci pengembalian adalah tombol berbasis teks. Namun, pada Android dan Platform Windows Universal, kunci pengembalian adalah tombol berbasis ikon.

Ketika tombol pengembalian ditekan, Completed peristiwa akan diaktifkan dan apa pun ICommand yang ditentukan oleh ReturnCommand properti dijalankan. Selain itu, apa pun object yang ditentukan oleh ReturnCommandParameter properti akan diteruskan ke ICommand sebagai parameter. Untuk informasi selengkapnya tentang perintah, lihat Antarmuka Perintah.

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 dan harus dinonaktifkan dengan mengatur IsSpellCheckEnabled properti ke false:

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

var entry = new Entry { ... 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:

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

var entry = new Entry { ... 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

Entri dapat diatur untuk menggunakan latar belakang kustom dan warna teks melalui properti yang dapat diikat berikut:

  • TextColor – mengatur warna teks.
  • BackgroundColor – mengatur warna yang ditunjukkan di belakang teks.

Perawatan khusus diperlukan untuk memastikan bahwa warna akan dapat digunakan di setiap platform. Karena setiap platform memiliki default yang berbeda untuk warna teks dan latar belakang, Anda akan sering perlu mengatur keduanya jika Anda mengaturnya.

Gunakan kode berikut untuk mengatur warna teks entri:

Dalam XAML:

<Entry TextColor="Green" />

Di C#:

var entry = new Entry();
entry.TextColor = Color.Green;

Contoh TextColor Entri

Perhatikan bahwa tempat penampung tidak dipengaruhi oleh yang ditentukan TextColor.

Untuk mengatur warna latar belakang di XAML:

<Entry BackgroundColor="#2c3e50" />

Di C#:

var entry = new Entry();
entry.BackgroundColor = Color.FromHex("#2c3e50");

Contoh Warna Latar Belakang Entri

Berhati-hatilah untuk memastikan bahwa warna latar belakang dan teks yang Anda pilih dapat digunakan di setiap platform dan jangan mengaburkan teks tempat penampung apa pun.

Peristiwa dan interaktivitas

Entri mengekspos dua peristiwa:

  • TextChanged – dimunculkan ketika teks berubah dalam entri. Menyediakan teks sebelum dan sesudah perubahan.
  • Completed – dinaikkan ketika pengguna telah mengakhiri input dengan menekan tombol kembali 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 Entri. Completed dinaikkan saat pengguna mengakhiri input dengan bidang dengan menekan tombol kembali pada keyboard (atau dengan menekan tombol Tab pada UWP). Handler untuk peristiwa adalah penanganan aktivitas generik, mengambil pengirim dan EventArgs:

void Entry_Completed (object sender, EventArgs e)
{
    var text = ((Entry)sender).Text; //cast sender to access the properties of the Entry
}

Kejadian yang telah selesai dapat dilanggani di XAML:

<Entry Completed="Entry_Completed" />

dan C#:

var entry = new Entry ();
entry.Completed += Entry_Completed;

Completed Setelah peristiwa diaktifkan, apa pun ICommand yang ditentukan oleh ReturnCommand properti dijalankan, dengan object yang ditentukan oleh ReturnCommandParameter properti yang diteruskan ke ICommand.

TextChanged

Kejadian TextChanged ini digunakan untuk bereaksi terhadap perubahan konten bidang.

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

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

Acara TextChanged dapat berlangganan di XAML:

<Entry TextChanged="Entry_TextChanged" />

dan C#:

var entry = new Entry ();
entry.TextChanged += Entry_TextChanged;