Xamarin.Forms Editor Tutorial

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.FormsEditor di XAML.
Merespons teks dalam Editor perubahan.
Sesuaikan perilaku Editor.

Anda akan menggunakan Visual Studio 2019, atau Visual Studio untuk Mac, untuk membuat aplikasi sederhana yang menunjukkan cara menyesuaikan perilaku Editor. 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 editor

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 EditorTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama EditorTutorial. 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 EditorTutorial, 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Editor dalam StackLayout. Properti Editor.Placeholder menentukan teks tempat penampung yang ditampilkan saat Editor pertama kali ditampilkan. Selain itu, HeightRequest properti menentukan tinggi Editor dalam unit independen perangkat.
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:

Catatan

Meskipun Android menunjukkan tinggi Editor, iOS tidak.

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 EditorTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama EditorTutorial. 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 EditorTutorial , 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="EditorTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Editor Placeholder="Enter multi-line text here"
                HeightRequest="200" />
    </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Editor dalam StackLayout. Properti Editor.Placeholder menentukan teks tempat penampung yang ditampilkan saat Editor pertama kali ditampilkan. Selain itu, HeightRequest properti menentukan tinggi Editor dalam unit independen perangkat.
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:

Catatan

Meskipun Android menunjukkan tinggi Editor, iOS tidak.

Di Visual Studio untuk Mac, hentikan aplikasi.

Merespons perubahan teks

Tersisa 5 menit

Visual Studio
Visual Studio untuk Mac

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

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

Ketika pengeditan selesai, metode akan OnEditorCompleted dijalankan. Ini dicapai dengan tidak memfokuskan Editor, atau selain itu dengan menekan tombol "Selesai" di iOS. Argumen sender adalah objek yang Editor bertanggung jawab untuk menembakkan TextChanged peristiwa, dan dapat digunakan untuk mengakses Editor objek.

Penting

Teks apa pun yang dimasukkan ke dalam disimpan Editor 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, masukkan teks ke dalam Editor, dan amati TextChanged pemecahan peristiwa. Tidak fokus Editor untuk mengamati penembakan Completed peristiwa.

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

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

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

Ketika pengeditan selesai, metode akan OnEditorCompleted dijalankan. Ini dicapai dengan tidak memfokuskan Editor, atau selain itu dengan menekan tombol "Selesai" di iOS. Argumen sender adalah objek yang Editor bertanggung jawab untuk menembakkan TextChanged peristiwa, dan dapat digunakan untuk mengakses Editor objek.

Penting

Teks apa pun yang dimasukkan ke dalam disimpan Editor 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, masukkan teks ke dalam Editor, dan amati TextChanged pemecahan peristiwa. Tidak fokus Editor untuk mengamati penembakan Completed peristiwa.

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

Menyesuaikan perilaku

Tersisa 2 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Editor deklarasi untuk menyesuaikan perilakunya:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Kode ini mengatur properti yang menyesuaikan perilaku Editor. Properti AutoSize diatur ke TextChanges, yang menunjukkan bahwa tinggi Editor akan meningkat ketika diisi dengan teks, dan berkurang saat teks dihapus. Properti MaxLength membatasi panjang input yang diizinkan untuk Editor. Selain itu, IsSpellCheckEnabled properti diatur ke untuk false menonaktifkan pemeriksaan ejaan, sementara IsTextPredictionEnabled properti diatur ke false untuk menonaktifkan prediksi teks dan prediksi teks otomatis.
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 Editor dalam dan amati bahwa tinggi Editor peningkatan saat diisi dengan teks, dan berkurang saat teks dihapus, dan bahwa jumlah maksimum karakter yang dapat dimasukkan adalah 200:

Di Visual Studio, hentikan aplikasi.

Untuk informasi selengkapnya tentang menyesuaikan Editor perilaku, lihat Xamarin.Forms panduan Editor .

Di MainPage.xaml, ubah Editor deklarasi untuk menyesuaikan perilakunya:
```
<Editor Placeholder="Enter multi-line text here"
        AutoSize="TextChanges"
        MaxLength="200"
        IsSpellCheckEnabled="false"
        IsTextPredictionEnabled="false" />
```
Kode ini mengatur properti yang menyesuaikan perilaku Editor. Properti AutoSize diatur ke TextChanges, yang menunjukkan bahwa tinggi Editor akan meningkat ketika diisi dengan teks, dan berkurang saat teks dihapus. Properti MaxLength membatasi panjang input yang diizinkan untuk Editor. Selain itu, IsSpellCheckEnabled properti diatur ke untuk false menonaktifkan pemeriksaan ejaan, sementara IsTextPredictionEnabled properti diatur ke false untuk menonaktifkan prediksi teks dan prediksi teks otomatis.
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 Editor dalam dan amati bahwa tinggi Editor peningkatan saat diisi dengan teks, dan berkurang saat teks dihapus, dan bahwa jumlah maksimum karakter yang dapat dimasukkan adalah 200:

Di Visual Studio untuk Mac, hentikan aplikasi.

Untuk informasi selengkapnya tentang menyesuaikan Editor perilaku, lihat Xamarin.Forms panduan Editor .

Share via

Xamarin.Forms Editor Tutorial

Membuat editor

Merespons perubahan teks

Menyesuaikan perilaku

Selamat!

Langkah berikutnya

Share via

Xamarin.Forms Editor Tutorial

Membuat editor

Merespons perubahan teks

Menyesuaikan perilaku

Selamat!

Langkah berikutnya

Tautan terkait