Xamarin.Forms Label Tutorial

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.FormsLabel di XAML.
Ubah tampilan Label.
Sajikan teks, dalam satu Label, yang memiliki beberapa format.

Anda akan menggunakan Visual Studio 2019, atau Visual Studio untuk Mac, untuk membuat aplikasi sederhana yang menunjukkan cara menampilkan teks dalam Label. 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 label

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

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama LabelTutorial. 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 LabelTutorial, 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="LabelTutorial.MainPage">
 <StackLayout Margin="20,35,20,20">
 <Label Text="Welcome to Xamarin.Forms!"
 HorizontalOptions="Center" />
 </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Label dalam StackLayout. Properti Label.Text menentukan teks yang ditampilkan, dan HorizontalOptions properti menentukan bahwa Label akan dipusatkan secara horizontal.
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:

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

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusinya diberi nama LabelTutorial. 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 LabelTutorial , 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="LabelTutorial.MainPage">
 <StackLayout Margin="20,35,20,20">
 <Label Text="Welcome to Xamarin.Forms!"
 HorizontalOptions="Center" />
 </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Label dalam StackLayout. Properti Label.Text menentukan teks yang ditampilkan, dan HorizontalOptions properti menentukan bahwa teks akan dipusatkan secara horizontal.
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:

Ubah tampilan

Tersisa 4 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Label deklarasi untuk mengubah tampilan visualnya:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Kode ini mengatur properti yang mengubah tampilan Labelvisual . Properti TextColor mengatur warna Label teks. Properti FontAttributes mengatur font untuk label menjadi miring, dan FontSize properti mengatur ukuran font. Selain itu, dekorasi teks garis bawah diterapkan ke Label dengan mengatur propertinya TextDecorations , dan dipusatkan secara horizontal dengan mengatur HorizontalOptions properti ke Center.
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 Label penampilan telah berubah:

Untuk informasi selengkapnya tentang mengatur Label tampilan, lihat Panduan labelXamarin.Forms.

Di MainPage.xaml, ubah Label deklarasi untuk mengubah tampilan visualnya:
```
<Label Text="Welcome to Xamarin.Forms!"
 TextColor="Blue"
 FontAttributes="Italic"
 FontSize="22"
 TextDecorations="Underline"
 HorizontalOptions="Center" />
```
Kode ini mengatur properti yang mengubah tampilan Labelvisual . Properti TextColor mengatur warna Label teks. Properti FontAttributes mengatur font untuk label menjadi miring, dan FontSize properti mengatur ukuran font. Selain itu, dekorasi teks garis bawah diterapkan ke Label dengan mengatur propertinya TextDecorations , dan dipusatkan secara horizontal dengan mengatur HorizontalOptions properti ke Center.
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 Label penampilan telah berubah:

Untuk informasi selengkapnya tentang mengatur Label tampilan, lihat Panduan labelXamarin.Forms.

Sajikan teks yang diformat

Tersisa 2 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah Label deklarasi untuk menyajikan teks yang menggunakan beberapa format, dalam satu Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Kode ini menampilkan teks, dalam satu Label, yang menggunakan beberapa format. Teks dalam yang pertama Span ditampilkan menggunakan set pemformatan pada Label, sementara teks di instans kedua dan ketiga Span ditampilkan menggunakan pemformatan yang diatur pada Label dan set pemformatan tambahan pada setiap Span.

Catatan

Properti FormattedText berjenis FormattedString, yang terdiri dari satu atau beberapa Span instans.
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 Label penampilan telah berubah:

Di Visual Studio, hentikan aplikasi.

Untuk informasi selengkapnya tentang mengatur Span tampilan, lihat Teks yang diformat di Xamarin.Forms panduan Label .

Di MainPage.xaml, ubah Label deklarasi untuk menyajikan teks yang menggunakan beberapa format, dalam satu Label.
```
<Label TextColor="Gray"
 FontSize="Medium">
 <Label.FormattedText>
 <FormattedString>
 
 
 
 </FormattedString>
 </Label.FormattedText>
</Label>
```
Kode ini menampilkan teks, dalam satu Label, yang menggunakan beberapa format. Teks dalam yang pertama Span ditampilkan menggunakan set pemformatan pada Label, sementara teks di instans kedua dan ketiga Span ditampilkan menggunakan pemformatan yang diatur pada Label dan set pemformatan tambahan pada setiap Span.

Catatan

Properti FormattedText berjenis FormattedString, yang terdiri dari satu atau beberapa Span instans.
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 Label penampilan telah berubah:

Di Visual Studio untuk Mac, hentikan aplikasi.

Untuk informasi selengkapnya tentang mengatur Span tampilan, lihat Teks yang diformat di Xamarin.Forms panduan Label .

Bagikan melalui

Xamarin.Forms Label Tutorial

Membuat label

Ubah tampilan

Sajikan teks yang diformat

Selamat!

Langkah berikutnya

Bagikan melalui

Xamarin.Forms Label Tutorial

Membuat label

Ubah tampilan

Sajikan teks yang diformat

Selamat!

Langkah berikutnya

Tautan terkait