Xamarin.Forms Tutorial Tombol

Artikel
Developer (Pemula)
7 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.FormsButton di XAML.
Menanggapi yang Button sedang diketuk.
Ubah tampilan Button.

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

Tersisa 6 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 ButtonTutorial.

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama ButtonTutorial. 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 ButtonTutorial, 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="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Button dalam StackLayout. Properti Button.Text menentukan teks yang muncul di Button.
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:

Perhatikan bahwa secara default Button cenderung menempati semua ruang yang diizinkan untuk itu - dalam hal ini, lebar penuh induknya ( StackLayout).

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

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama ButtonTutorial. 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 ButtonTutorial , 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="ButtonTutorial.MainPage">
   <StackLayout Margin="20,35,20,20">
       <Button Text="Click me" />
   </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Button dalam StackLayout. Properti Button.Text menentukan teks yang muncul di Button.
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:

Perhatikan bahwa secara default Button cenderung menempati semua ruang yang diizinkan untuk itu - dalam hal ini, lebar penuh induknya ( StackLayout).

Di Visual Studio untuk Mac, hentikan aplikasi.

Menangani klik

Tersisa 4 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Button deklarasi sehingga mengatur handler untuk Clicked peristiwa:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Kode ini mengatur peristiwa ke Clicked penanganan aktivitas bernama OnButtonClicked yang akan dibuat di langkah berikutnya.
Di Penjelajah Solusi, dalam proyek ButtonTutorial, perluas MainPage.xaml dan klik dua kali MainPage.xaml.cs untuk membukanya. Kemudian, di MainPage.xaml.cs, tambahkan OnButtonClicked penanganan aktivitas ke kelas:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Ketika diketuk Button , metode akan OnButtonClicked dijalankan. Argumen sender adalah objek yang Button bertanggung jawab untuk menembakkan Clicked peristiwa, dan dapat digunakan untuk mengakses Button objek. Penanganan aktivitas ini memperbarui teks yang ditampilkan oleh Button.

Catatan

Clicked Selain peristiwa, Button juga menentukan Pressed dan Released peristiwa. Untuk informasi selengkapnya, lihat Menekan dan merilis tombol di Xamarin.Forms panduan Tombol .
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. Button Klik dan amati bahwa teks yang ditampilkannya berubah:

Untuk informasi selengkapnya tentang menangani klik tombol, lihat Klik tombol Penanganan diXamarin.Forms panduan Tombol.

Di MainPage.xaml, ubah Button deklarasi sehingga mengatur handler untuk Clicked peristiwa:
```
<Button Text="Click me"
        Clicked="OnButtonClicked" />
```
Kode ini mengatur peristiwa ke Clicked penanganan aktivitas bernama OnButtonClicked yang akan dibuat di langkah berikutnya.
Di Solution Pad, dalam proyek ButtonTutorial , perluas MainPage.xaml dan klik dua kali MainPage.xaml.cs untuk membukanya. Kemudian, di MainPage.xaml.cs, tambahkan OnButtonClicked penanganan aktivitas ke kelas:
```
void OnButtonClicked(object sender, EventArgs e)
{
    (sender as Button).Text = "Click me again!";
}
```
Ketika diketuk Button , metode akan OnButtonClicked dijalankan. Argumen sender adalah objek yang Button bertanggung jawab untuk menembakkan Clicked peristiwa, dan dapat digunakan untuk mengakses Button objek. Penanganan aktivitas ini memperbarui teks yang ditampilkan oleh Button.

Catatan

Clicked Selain peristiwa, Button juga menentukan Pressed dan Released peristiwa. Untuk informasi selengkapnya, lihat Menekan dan merilis tombol di Xamarin.Forms panduan Tombol .
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. Button Klik dan amati bahwa teks yang ditampilkannya berubah:

Untuk informasi selengkapnya tentang menangani klik tombol, lihat Klik tombol Penanganan diXamarin.Forms panduan Tombol.

Ubah tampilan

Tersisa 2 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Button deklarasi untuk mengubah tampilan visualnya:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Kode ini mengatur properti yang mengubah tampilan Buttonvisual . Properti TextColor mengatur warna Button teks, dan BackgroundColor properti mengatur warna latar belakang ke teks. Properti BorderColor mengatur warna area di sekitar Button, dan BorderWidth properti mengatur lebar batas. Secara default, Button persegi panjang, tetapi dapat diberikan sudut bulat dengan mengatur CornerRadius properti ke nilai yang sesuai. Selain itu, ukuran Button diubah dengan mengatur properti dan HeightRequest miliknyaWidthRequest.
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. Amati bahwa Button penampilan telah berubah:

Di Visual Studio, hentikan aplikasi.

Untuk informasi selengkapnya tentang pengaturan Button tampilan, lihat Tampilan tombol di Panduan tombolXamarin.Forms.

Di MainPage.xaml, ubah Button deklarasi untuk mengubah tampilan visualnya:
```
<Button Text="Click me"
        Clicked="OnButtonClicked"
        TextColor="Blue"
        BackgroundColor="Aqua"
        BorderColor="Red"
        BorderWidth="5"
        CornerRadius="5"
        WidthRequest="150"
        HeightRequest="75" />
```
Kode ini mengatur properti yang mengubah tampilan Buttonvisual . Properti TextColor mengatur warna Button teks, dan BackgroundColor properti mengatur warna latar belakang ke teks. Properti BorderColor mengatur warna area di sekitar Button, dan BorderWidth properti mengatur lebar batas. Secara default, Button persegi panjang, tetapi dapat diberikan sudut bulat dengan mengatur CornerRadius properti ke nilai yang sesuai. Selain itu, ukuran Button diubah dengan mengatur properti dan HeightRequest miliknyaWidthRequest.
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. Amati bahwa Button penampilan telah berubah:

Di Visual Studio untuk Mac, hentikan aplikasi.

Untuk informasi selengkapnya tentang pengaturan Button tampilan, lihat Tampilan tombol di Panduan tombolXamarin.Forms.

Xamarin.Forms Tutorial Tombol

Membuat tombol

Menangani klik

Ubah tampilan

Selamat!

Langkah berikutnya

Xamarin.Forms Tutorial Tombol

Membuat tombol

Menangani klik

Ubah tampilan

Selamat!

Langkah berikutnya

Tautan terkait