Xamarin.Forms Tutorial Entri

Artikel
Developer (Pemula)
8 menit untuk menyelesaikan

Sebelum mencoba tutorial ini, Anda seharusnya berhasil menyelesaikan:

Buat mulai cepat aplikasi pertama Xamarin.Forms Anda.
Tutorial StackLayout .

Dalam tutorial ini, Anda akan mempelajari cara:

Buat Xamarin.FormsEntry di XAML.
Merespons teks dalam Entry perubahan.
Sesuaikan perilaku Entry.

Anda akan menggunakan Visual Studio 2019, atau Visual Studio untuk Mac, untuk membuat aplikasi sederhana yang menunjukkan cara menyesuaikan perilaku Entry. Cuplikan layar berikut menunjukkan aplikasi akhir:

Anda juga akan menggunakan XAML Hot Reload untuk Xamarin.Forms melihat perubahan UI tanpa membangun kembali aplikasi Anda.

Membuat entri

Tersisa 7 menit

Visual Studio
Visual Studio untuk Mac

Untuk menyelesaikan tutorial ini, Anda harus memiliki Visual Studio 2019 (rilis terbaru), dengan pengembangan Seluler dengan beban kerja .NET terinstal. Selain itu, Anda akan memerlukan Mac berpasangan untuk membangun aplikasi tutorial di iOS. Untuk informasi tentang menginstal platform Xamarin, lihat Menginstal Xamarin. Untuk informasi tentang menyambungkan Visual Studio 2019 ke host build Mac, lihat Memasangkan ke Mac untuk pengembangan Xamarin.iOS.

Luncurkan Visual Studio, dan buat aplikasi kosong Xamarin.Forms baru bernama EntryTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama EntryTutorial. Menggunakan nama yang berbeda akan mengakibatkan kesalahan build saat Anda menyalin kode dari tutorial ini ke dalam solusi.

Untuk informasi selengkapnya tentang pustaka .NET Standard yang dibuat, lihat Anatomi aplikasiXamarin.Forms di Xamarin.Forms Mulai Cepat Deep Dive.
Di Penjelajah Solusi, dalam proyek EntryTutorial, klik dua kali MainPage.xaml untuk membukanya. Kemudian, di MainPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:
```
<?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="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Entry dalam StackLayout. Properti Entry.Placeholder menentukan teks tempat penampung yang ditampilkan saat Entry pertama kali ditampilkan.
Di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang mirip tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS jarak jauh yang Anda pilih atau emulator Android:

Di Visual Studio, hentikan aplikasi.

Untuk menyelesaikan tutorial ini, Anda harus menginstal Visual Studio untuk Mac (rilis terbaru), dengan dukungan platform iOS dan Android. Selain itu, Anda juga akan memerlukan Xcode (rilis terbaru). Untuk informasi selengkapnya tentang menginstal platform Xamarin, lihat Menginstal Xamarin.

Luncurkan Visual Studio untuk Mac, dan buat aplikasi kosong Xamarin.Forms baru bernama EntryTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama EntryTutorial. Menggunakan nama yang berbeda akan mengakibatkan kesalahan build saat Anda menyalin kode dari tutorial ini ke dalam solusi.

Untuk informasi selengkapnya tentang pustaka .NET Standard yang dibuat, lihat Anatomi aplikasiXamarin.Forms di Xamarin.Forms Mulai Cepat Deep Dive.
Di Solution Pad, dalam proyek EntryTutorial , klik dua kali MainPage.xaml untuk membukanya. Kemudian, di MainPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:
```
<?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="EntryTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Entry Placeholder="Enter text" />
    </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Entry dalam StackLayout. Properti Entry.Placeholder menentukan teks tempat penampung yang ditampilkan saat Entry pertama kali ditampilkan.
Di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerubungi tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Di Visual Studio untuk Mac, hentikan aplikasi.

Merespons perubahan teks

Tersisa 5 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Entry deklarasi sehingga mengatur handler untuk TextChanged peristiwa dan Completed :
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
Kode ini mengatur peristiwa ke TextChanged penanganan aktivitas bernama OnEntryTextChanged, dan Completed peristiwa ke penanganan aktivitas bernama OnEntryCompleted. Kedua penanganan aktivitas akan dibuat di langkah berikutnya.
Di Penjelajah Solusi, dalam proyek EntryTutorial, perluas MainPage.xaml dan klik dua kali MainPage.xaml.cs untuk membukanya. Kemudian, di MainPage.xaml.cs, tambahkan OnEntryTextChanged penanganan aktivitas dan OnEntryCompleted ke kelas :
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
Saat teks dalam Entry perubahan, metode dijalankan OnEntryTextChanged . Argumen sender adalah objek yang Entry bertanggung jawab untuk menembakkan TextChanged peristiwa, dan dapat digunakan untuk mengakses Entry objek. Argumen TextChangedEventArgs menyediakan nilai teks lama dan baru, dari sebelum dan sesudah perubahan teks.

Saat Anda menyelesaikan teks di Entry dengan kunci pengembalian, metode akan OnEntryCompleted dijalankan. Argumen sender adalah objek yang Entry bertanggung jawab untuk menembakkan TextChanged peristiwa, dan dapat digunakan untuk mengakses Entry objek.

Penting

Teks apa pun yang dimasukkan ke dalam disimpan Entry di Text properti .
Di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang mirip tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS jarak jauh yang Anda pilih atau emulator Android:

Atur titik henti di dua penanganan aktivitas dan masukkan teks ke Entry dalam dan amati TextChanged peristiwa dan Completed yang diaktifkan.

Untuk informasi selengkapnya tentang Entry peristiwa, lihat Peristiwa dan interaktivitas di Xamarin.Forms panduan Entri .

Di MainPage.xaml, ubah Entry deklarasi sehingga mengatur handler untuk TextChanged peristiwa dan Completed :
```
<Entry Placeholder="Enter text"
       TextChanged="OnEntryTextChanged"
       Completed="OnEntryCompleted" />
```
Kode ini mengatur peristiwa ke TextChanged penanganan aktivitas bernama OnEntryTextChanged, dan Completed peristiwa ke penanganan aktivitas bernama OnEntryCompleted. Kedua penanganan aktivitas akan dibuat di langkah berikutnya.
Di Solution Pad, dalam proyek EntryTutorial , perluas MainPage.xaml dan klik dua kali MainPage.xaml.cs untuk membukanya. Kemudian, di MainPage.xaml.cs, tambahkan OnEntryTextChanged penanganan aktivitas dan OnEntryCompleted ke kelas :
```
void OnEntryTextChanged(object sender, TextChangedEventArgs e)
{
    string oldText = e.OldTextValue;
    string newText = e.NewTextValue;
}

void OnEntryCompleted(object sender, EventArgs e)
{
    string text = ((Entry)sender).Text;
}
```
Saat teks dalam Entry perubahan, metode dijalankan OnEntryTextChanged . Argumen sender adalah objek yang Entry bertanggung jawab untuk menembakkan TextChanged peristiwa, dan dapat digunakan untuk mengakses Entry objek. Argumen TextChangedEventArgs menyediakan nilai teks lama dan baru, dari sebelum dan sesudah perubahan teks.

Saat Anda menyelesaikan teks di Entry dengan kunci pengembalian, metode akan OnEntryCompleted dijalankan. Argumen sender adalah objek yang Entry bertanggung jawab untuk menembakkan TextChanged peristiwa, dan dapat digunakan untuk mengakses Entry objek.

Penting

Teks apa pun yang dimasukkan ke dalam disimpan Entry di Text properti .
Di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerubungi tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Atur titik henti di dua penanganan aktivitas dan masukkan teks ke Entry dalam dan amati TextChanged peristiwa dan Completed yang diaktifkan.

Untuk informasi selengkapnya tentang Entry peristiwa, lihat Peristiwa dan Interaktivitas di Xamarin.Forms panduan Entri .

Menyesuaikan perilaku

Tersisa 2 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Entry deklarasi untuk menyesuaikan perilakunya:
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
Kode ini mengatur properti yang menyesuaikan perilaku Entry. Properti MaxLength membatasi panjang input yang diizinkan untuk Entry, dan IsSpellCheckEnabled properti diatur ke false untuk menonaktifkan pemeriksaan ejaan. Demikian pula, IsTextPredictionEnabled properti diatur ke false untuk menonaktifkan prediksi teks dan prediksi teks otomatis. Selain itu, IsPassword properti memastikan bahwa karakter yang dimasukkan ditutupi dengan karakter kata sandi (lingkaran hitam).

Catatan

Untuk beberapa skenario entri teks, seperti memasukkan kata sandi, pemeriksaan ejaan, dan prediksi teks memberikan pengalaman negatif dan oleh karena itu harus dinonaktifkan.
Jika aplikasi masih berjalan, simpan perubahan pada file dan antarmuka pengguna aplikasi akan diperbarui secara otomatis di simulator atau emulator Anda. Jika tidak, di toolbar Visual Studio, tekan tombol Mulai (tombol segitiga yang menyerubungi tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS jarak jauh yang Anda pilih atau emulator Android. Masukkan teks ke Entry dalam dan amati bahwa setiap karakter diganti dengan karakter masker kata sandi, dan bahwa jumlah maksimum karakter yang dapat dimasukkan adalah 15:

Di Visual Studio, hentikan aplikasi.

Untuk informasi selengkapnya tentang menyesuaikan Entry perilaku, lihat Panduan entriXamarin.Forms.

Di MainPage.xaml, ubah Entry deklarasi untuk menyesuaikan perilakunya:
```
<Entry Placeholder="Enter password"
       MaxLength="15"
       IsSpellCheckEnabled="false"
       IsTextPredictionEnabled="false"
       IsPassword="true" />
```
Kode ini mengatur properti yang menyesuaikan perilaku Entry. Properti MaxLength membatasi panjang input yang diizinkan untuk Entry, dan IsSpellCheckEnabled properti diatur ke false untuk menonaktifkan pemeriksaan ejaan. Demikian pula, IsTextPredictionEnabled properti diatur ke false untuk menonaktifkan prediksi teks dan prediksi teks otomatis. Selain itu, IsPassword properti memastikan bahwa karakter yang dimasukkan ditutupi dengan karakter kata sandi (lingkaran hitam).

Catatan

Untuk beberapa skenario entri teks, seperti memasukkan kata sandi, pemeriksaan ejaan, dan prediksi teks memberikan pengalaman negatif dan oleh karena itu harus dinonaktifkan.
Jika aplikasi masih berjalan, simpan perubahan pada file dan antarmuka pengguna aplikasi akan diperbarui secara otomatis di simulator atau emulator Anda. Jika tidak, di toolbar Visual Studio untuk Mac, tekan tombol Mulai (tombol segitiga yang menyerubungi tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android. Masukkan teks ke Entry dalam dan amati bahwa setiap karakter diganti dengan karakter masker kata sandi, dan bahwa jumlah maksimum karakter yang dapat dimasukkan adalah 15:

Di Visual Studio untuk Mac, hentikan aplikasi.

Untuk informasi selengkapnya tentang menyesuaikan Entry perilaku, lihat Panduan entriXamarin.Forms.

Bagikan melalui

Xamarin.Forms Tutorial Entri

Membuat entri

Merespons perubahan teks

Menyesuaikan perilaku

Selamat!

Langkah berikutnya

Bagikan melalui

Xamarin.Forms Tutorial Entri

Membuat entri

Merespons perubahan teks

Menyesuaikan perilaku

Selamat!

Langkah berikutnya

Tautan terkait