Xamarin.Forms StackLayout Tutorial

Artikel
Developer (Pemula)
10 menit untuk menyelesaikan

Sebelum mencoba tutorial ini, Anda seharusnya berhasil menyelesaikan:

Buat mulai cepat aplikasi pertama Xamarin.Forms Anda.

Dalam tutorial ini, Anda akan mempelajari cara:

Buat Xamarin.FormsStackLayout di XAML.
Tentukan orientasi StackLayout.
Mengontrol perataan dan ekspansi tampilan anak dalam StackLayout.

Anda akan menggunakan Visual Studio 2019, atau Visual Studio untuk Mac, untuk membuat aplikasi sederhana yang menunjukkan cara menyelaraskan kontrol dalam StackLayout. 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 tumpukan

Tersisa 9 menit

StackLayout adalah tata letak yang mengatur turunannya dalam tumpukan satu dimensi, baik secara horizontal maupun vertikal. Secara default, berorientasi StackLayout vertikal.

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

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusi diberi nama StackLayoutTutorial. 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 StackLayoutTutorial, 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="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari tiga Label instans dalam .StackLayout Posisi StackLayout tampilan anaknya ( Label instans) dalam satu baris, yang berorientasi vertikal secara default. Selain itu, Margin properti menunjukkan posisi penyajian dari StackLayout dalam ContentPage.

Catatan

Selain Margin properti , Padding dan Spacing properti juga dapat diatur pada StackLayout. Nilai Padding properti menentukan jarak antara tampilan dalam StackLayout, dan Spacing nilai properti menentukan jumlah ruang antara setiap elemen turunan StackLayoutdalam . Untuk informasi selengkapnya, lihat Margin dan Padding.
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 informasi selengkapnya tentang StackLayout, lihat Xamarin.Forms StackLayout.

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

Penting

Cuplikan C# dan XAML dalam tutorial ini mengharuskan solusi diberi nama StackLayoutTutorial. 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 StackLayoutTutorial , 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="StackLayoutTutorial.MainPage">
    <StackLayout Margin="20,35,20,25">
        <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
        <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
        <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
    </StackLayout>
</ContentPage>
```
Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari tiga Label instans dalam .StackLayout Posisi StackLayout tampilan anaknya ( Label instans) dalam satu baris, yang berorientasi vertikal secara default. Selain itu, Margin properti menunjukkan posisi penyajian dari StackLayout dalam ContentPage.

Catatan

Selain Margin properti , Padding dan Spacing properti juga dapat diatur pada StackLayout. Nilai Padding properti menentukan jarak antara tampilan dalam StackLayout, dan Spacing nilai properti menentukan jumlah ruang antara setiap elemen turunan StackLayoutdalam . Untuk informasi selengkapnya, lihat Margin dan Padding.
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:

Untuk informasi selengkapnya tentang StackLayout, lihat Xamarin.Forms StackLayout.

Tentukan orientasi

Tersisa 6 menit

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah StackLayout deklarasi sehingga menyelaraskan anak-anaknya secara horizontal, alih-alih secara vertikal:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Kode ini mengatur properti ke OrientationHorizontal.

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 menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS jarak jauh yang Anda pilih atau emulator Android:

Perhatikan bahwa Label instans dalam StackLayout sekarang selaras secara horizontal, bukan secara vertikal.

Di MainPage.xaml, ubah StackLayout deklarasi sehingga menyelaraskan anak-anaknya secara horizontal, alih-alih secara vertikal:

<StackLayout Margin="20,35,20,25"
             Orientation="Horizontal">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

Kode ini mengatur properti ke OrientationHorizontal.

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 menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Perhatikan bahwa Label instans dalam StackLayout sekarang selaras secara horizontal, bukan secara vertikal.

Mengontrol perataan dan ekspansi

Tersisa 4 menit

Ukuran dan posisi tampilan anak dalam bergantung StackLayout pada nilai tampilan HeightRequest dan WidthRequest properti anak, dan nilai HorizontalOptions properti dan VerticalOptions .

Properti HorizontalOptions dan VerticalOptions dapat diatur ke bidang dari LayoutOptions struktur, yang merangkum dua preferensi tata letak:

Perataan – perataan pilihan tampilan anak, yang menentukan posisi dan ukurannya dalam tata letak induknya.
Ekspansi – menunjukkan apakah tampilan anak harus menggunakan ruang ekstra, jika tersedia (hanya digunakan oleh StackLayout).

Visual Studio
Visual Studio untuk Mac

Di MainPage.xaml, ubah StackLayout deklarasi untuk mengatur opsi perataan dan ekspansi untuk setiap Label:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Kode ini menetapkan preferensi perataan pada empat Label instans pertama, dan preferensi ekspansi pada empat Label instans akhir. Bidang Start, Center, End, dan Fill digunakan untuk menentukan perataan Label instans dalam induk StackLayout. Bidang StartAndExpand, CenterAndExpand, EndAndExpand, dan FillAndExpand digunakan untuk menentukan preferensi perataan, dan apakah tampilan akan menempati lebih banyak ruang jika tersedia dalam induk StackLayout.

Catatan

Nilai default properti dan VerticalOptions tampilan HorizontalOptions adalah Fill.

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 menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS jarak jauh yang Anda pilih atau emulator Android:

Hanya StackLayout menghormati preferensi perataan pada tampilan anak yang berada di arah yang berlawanan dengan StackLayout orientasi. Oleh karena itu, Label tampilan anak dalam properti yang HorizontalOptions berorientasi StackLayout vertikal diatur ke salah satu bidang perataan:
- Start, yang memposisikan Label di sisi StackLayoutkiri .
- Center, yang berpusat LabelStackLayoutdi .
- End, yang memposisikan Label di sisi StackLayoutkanan .
- Fill, yang memastikan bahwa Label mengisi lebar StackLayout.
Hanya StackLayout dapat memperluas tampilan anak ke arah orientasinya. Oleh karena itu, berorientasi StackLayout vertikal dapat memperluas Label tampilan anak yang mengatur propertinya VerticalOptions ke salah satu bidang ekspansi. Ini berarti bahwa, untuk perataan vertikal, masing-masing Label menempati jumlah ruang yang sama dalam StackLayout. Namun, hanya final Label, yang mengatur propertinya VerticalOptions untuk FillAndExpand memiliki ukuran yang berbeda.

Penting

Ketika semua ruang dalam StackLayout digunakan, preferensi ekspansi tidak berpengaruh.

Di Visual Studio, hentikan aplikasi.

Untuk informasi selengkapnya tentang perataan dan ekspansi, lihat Opsi Tata Letak di Xamarin.Forms.

Di MainPage.xaml, ubah StackLayout deklarasi untuk mengatur opsi perataan dan ekspansi untuk setiap Label:

<StackLayout Margin="20,35,20,25">
    <Label Text="Start"
           HorizontalOptions="Start"
           BackgroundColor="Gray" />
    <Label Text="Center"
           HorizontalOptions="Center"
           BackgroundColor="Gray" />
    <Label Text="End"
           HorizontalOptions="End"
           BackgroundColor="Gray" />
    <Label Text="Fill"
           HorizontalOptions="Fill"
           BackgroundColor="Gray" />
    <Label Text="StartAndExpand"
           VerticalOptions="StartAndExpand"
           BackgroundColor="Gray" />
    <Label Text="CenterAndExpand"
           VerticalOptions="CenterAndExpand"
           BackgroundColor="Gray" />
    <Label Text="EndAndExpand"
           VerticalOptions="EndAndExpand"
           BackgroundColor="Gray" />
    <Label Text="FillAndExpand"
           VerticalOptions="FillAndExpand"
           BackgroundColor="Gray" />
</StackLayout>

Catatan

Nilai default properti dan VerticalOptions tampilan HorizontalOptions adalah Fill.

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 menyerupan tombol Putar) untuk meluncurkan aplikasi di dalam simulator iOS yang Anda pilih atau emulator Android:

Hanya StackLayout menghormati preferensi perataan pada tampilan anak yang berada di arah yang berlawanan dengan StackLayout orientasi. Oleh karena itu, Label tampilan anak dalam properti yang HorizontalOptions berorientasi StackLayout vertikal diatur ke salah satu bidang perataan:
- Start, yang memposisikan Label di sisi StackLayoutkiri .
- Center, yang berpusat LabelStackLayoutdi .
- End, yang memposisikan Label di sisi StackLayoutkanan .
- Fill, yang memastikan bahwa Label mengisi lebar StackLayout.
Hanya StackLayout dapat memperluas tampilan anak ke arah orientasinya. Oleh karena itu, berorientasi StackLayout vertikal dapat memperluas Label tampilan anak yang mengatur propertinya VerticalOptions ke salah satu bidang ekspansi. Ini berarti bahwa, untuk perataan vertikal, masing-masing Label menempati jumlah ruang yang sama dalam StackLayout. Namun, hanya final Label, yang mengatur propertinya VerticalOptions untuk FillAndExpand memiliki ukuran yang berbeda.

Penting

Ketika semua ruang dalam StackLayout digunakan, preferensi ekspansi tidak berpengaruh.

Di Visual Studio untuk Mac, hentikan aplikasi.

Untuk informasi selengkapnya tentang perataan dan ekspansi, lihat Opsi Tata Letak di Xamarin.Forms.

Bagikan melalui

Xamarin.Forms StackLayout Tutorial

Membuat tumpukan

Tentukan orientasi

Mengontrol perataan dan ekspansi

Selamat!

Langkah berikutnya

Bagikan melalui

Xamarin.Forms StackLayout Tutorial

Membuat tumpukan

Tentukan orientasi

Mengontrol perataan dan ekspansi

Selamat!

Langkah berikutnya

Tautan terkait