Tutorial: Menggunakan Grid dan StackPanel untuk membuat aplikasi cuaca sederhana

Gunakan XAML untuk membuat tata letak untuk aplikasi cuaca sederhana menggunakan elemen Grid dan StackPanel . Dengan alat-alat ini, Anda dapat membuat aplikasi yang terlihat hebat yang berfungsi pada perangkat apa pun yang menjalankan Windows. Tutorial ini membutuhkan waktu 10-20 menit.

API penting: Kelas kisi, kelas StackPanel

Prasyarat

• Windows 10 dan Microsoft Visual Studio 2015 atau yang lebih baru. (Visual Studio terbaru direkomendasikan untuk pembaruan pengembangan dan keamanan saat ini) Instal alat untuk SDK Aplikasi Windows.
• Pengetahuan tentang cara membuat aplikasi "Halo Dunia" dasar dengan menggunakan XAML dan C#. Jika Anda belum memilikinya, klik di sini untuk mempelajari cara membuat aplikasi "Halo Dunia".

Langkah 1: Membuat aplikasi kosong

1. Di menu Visual Studio, pilih File>Proyek Baru.
2. Di panel kiri kotak dialog Proyek Baru , pilih Visual C#>Windows>Universal atau Visual C++>Windows>Universal.
3. Di panel tengah, pilih Aplikasi Kosong.
4. Dalam kotak Nama , masukkan WeatherPanel, dan pilih OK.
5. Untuk menjalankan program, pilih Debug>Mulai Debugging dari menu, atau pilih F5.

Langkah 2: Tentukan Kisi

Di XAML , Kisi terdiri dari serangkaian baris dan kolom. Dengan menentukan baris dan kolom elemen dalam Kisi, Anda dapat menempatkan dan memberi spasi elemen lain dalam antarmuka pengguna. Baris dan kolom ditentukan dengan elemen RowDefinition dan ColumnDefinition .

Untuk mulai membuat tata letak, buka MainPage.xaml dengan menggunakan Penjelajah Solusi, dan ganti elemen Grid yang dihasilkan secara otomatis dengan kode ini.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="5*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="2*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
</Grid>

Grid baru membuat satu set dua baris dan kolom, yang menentukan tata letak antarmuka aplikasi. Kolom pertama memiliki Lebar "3*", sedangkan kolom kedua memiliki "5*", membagi ruang horizontal di antara kedua kolom dengan rasio 3:5. Dengan cara yang sama, kedua baris memiliki Tinggi masing-masing "2*" dan "*", sehingga Kisi mengalokasikan dua kali lebih banyak ruang untuk baris pertama seperti untuk baris kedua ("*" sama dengan "1*"). Rasio ini dipertahankan meskipun jendela diubah ukurannya atau perangkat diubah.

Untuk mempelajari tentang metode lain untuk mengukur baris dan kolom, lihat Menentukan tata letak dengan XAML.

Jika Anda menjalankan aplikasi sekarang, Anda tidak akan melihat apa pun kecuali halaman kosong, karena tidak ada area Kisi yang memiliki konten apa pun. Untuk menunjukkan grid mari kita memberikan beberapa warna.

Langkah 3: Warnai Kisi

Untuk mewarnai Kisi , kami menambahkan tiga elemen Batas , masing-masing dengan warna latar belakang yang berbeda. Masing-masing juga ditetapkan ke baris dan kolom di Grid induk dengan menggunakan atribut Grid.Row dan Grid.Column . Nilai atribut ini default ke 0, sehingga Anda tidak perlu menetapkannya ke Batas pertama. Tambahkan kode berikut ke elemen Grid setelah definisi baris dan kolom.

<Border Background="#2f5cb6"/>
<Border Grid.Column ="1" Background="#1f3d7a"/>
<Border Grid.Row="1" Grid.ColumnSpan="2" Background="#152951"/>

Perhatikan bahwa untuk Batas ketiga kita menggunakan atribut tambahan, Grid.ColumnSpan, yang menyebabkan Batas ini menjangkau kedua kolom di baris bawah. Anda dapat menggunakan Grid.RowSpan dengan cara yang sama, dan bersama-sama atribut ini memungkinkan Anda menjangkau elemen di atas sejumlah baris dan kolom. Sudut kiri atas rentang seperti itu selalu Grid.Column dan Grid.Row yang ditentukan dalam atribut elemen.

Jika Anda menjalankan aplikasi, hasilnya akan terlihat seperti ini.

Langkah 4: Mengatur konten dengan menggunakan elemen StackPanel

StackPanel adalah elemen UI kedua yang akan kami gunakan untuk membuat aplikasi cuaca kami. StackPanel adalah bagian mendasar dari banyak tata letak aplikasi dasar, memungkinkan Anda untuk menumpuk elemen secara vertikal atau horizontal.

Dalam kode berikut, kita membuat dua elemen StackPanel dan mengisi masing-masing dengan tiga TextBlocks. Tambahkan elemen StackPanel ini ke Kisi di bawah elemen Batas dari Langkah 3. Ini menyebabkan elemen TextBlock dirender di atas Kisi berwarna yang kami buat sebelumnya.

<StackPanel Grid.Column="1" Margin="40,0,0,0" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="Today - 64° F"/>
    <TextBlock Foreground="White" FontSize="25" Text="Partially Cloudy"/>
    <TextBlock Foreground="White" FontSize="25" Text="Precipitation: 25%"/>
</StackPanel>
<StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal"
            HorizontalAlignment="Center" VerticalAlignment="Center">
    <TextBlock Foreground="White" FontSize="25" Text="High: 66°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Low: 43°" Margin="0,0,20,0"/>
    <TextBlock Foreground="White" FontSize="25" Text="Feels like: 63°"/>
</StackPanel>

Di Stackpanel pertama, setiap tumpukan TextBlock secara vertikal di bawah berikutnya. Ini adalah perilaku default StackPanel, jadi kita tidak perlu mengatur atribut Orientation . Di StackPanel kedua, kami ingin elemen anak menumpuk secara horizontal dari kiri ke kanan, jadi kami mengatur atribut Orientasi ke "Horizontal". Kita juga harus mengatur atribut Grid.ColumnSpan ke "2", sehingga teks dipusatkan di atas Batas bawah.

Jika Anda menjalankan aplikasi sekarang, Anda akan melihat sesuatu seperti ini.

Langkah 5: Tambahkan ikon gambar

Terakhir, mari kita isi bagian kosong di Grid kita dengan gambar yang mewakili cuaca saat ini—sesuatu yang bertuliskan "sebagian berawan."

Unduh gambar di bawah ini dan simpan sebagai PNG bernama "partially-cloudy".

Di Penjelajah Solusi, klik kanan folder Aset , dan pilih Tambahkan ->Item yang Ada... Temukan partially-cloudy.png di browser yang muncul, pilih, dan klik Tambahkan.

Selanjutnya, di MainPage.xaml, tambahkan elemen Gambar berikut di bawah StackPanels dari Langkah 4.

<Image Margin="20" Source="Assets/partially-cloudy.png"/>

Karena kita menginginkan Gambar di baris dan kolom pertama, kita tidak perlu mengatur atribut Grid.Row atau Grid.Column , yang memungkinkannya default ke "0".

Dan itu saja! Anda berhasil membuat tata letak untuk aplikasi cuaca sederhana. Jika Anda menjalankan aplikasi dengan menekan F5, Anda akan melihat sesuatu seperti ini:

Jika mau, coba bereksperimen dengan tata letak di atas, dan jelajahi berbagai cara Anda mungkin mewakili data cuaca.

Artikel terkait

• Untuk pengantar merancang tata letak aplikasi Windows, lihat siluet aplikasi Windows
• Untuk mempelajari tentang membuat tata letak responsif yang beradaptasi dengan ukuran layar yang berbeda, lihat Menentukan Tata Letak Halaman dengan XAML