Pengandalan kontrol dan pola

Dalam pengembangan aplikasi Windows, kontrol adalah elemen UI yang menampilkan konten atau mengaktifkan interaksi. Anda membuat UI untuk aplikasi dengan menggunakan kontrol seperti tombol, kotak teks, dan kotak kombo untuk menampilkan data dan mendapatkan input pengguna.

API penting: Namespace layanan Windows.UI.Xaml.Controls

Pola adalah resep untuk memodifikasi kontrol atau menggabungkan beberapa kontrol untuk membuat sesuatu yang baru. Misalnya, pola daftar/detail adalah cara Anda dapat menggunakan kontrol SplitView untuk navigasi aplikasi. Demikian pula, Anda dapat menyesuaikan templat kontrol NavigationView untuk mengimplementasikan pola tab.

Dalam banyak kasus, Anda dapat menggunakan kontrol apa adanya. Tetapi XAML mengontrol fungsi terpisah dari struktur dan tampilan, sehingga Anda dapat membuat berbagai tingkat modifikasi agar sesuai dengan kebutuhan Anda. Di bagian Gaya , Anda bisa mempelajari cara menggunakan gaya XAML dan templat kontrol untuk mengubah kontrol.

Di bagian ini, kami memberikan panduan untuk setiap kontrol XAML yang dapat Anda gunakan untuk membangun UI aplikasi Anda. Untuk memulai, artikel ini menunjukkan cara menambahkan kontrol ke aplikasi Anda. Ada 3 langkah utama untuk menggunakan kontrol ke aplikasi Anda:

• Tambahkan kontrol ke UI aplikasi Anda.
• Atur properti pada kontrol, seperti lebar, tinggi, atau warna latar depan.
• Tambahkan kode ke penanganan aktivitas kontrol sehingga melakukan sesuatu.

Menambahkan kontrol

Anda dapat menambahkan kontrol ke aplikasi dengan beberapa cara:

• Gunakan alat desain seperti Blend untuk Visual Studio atau perancang Microsoft Visual Studio Extensible Application Markup Language (XAML).
• Tambahkan kontrol ke markup XAML di editor Visual Studio XAML.
• Tambahkan kontrol dalam kode. Kontrol yang Anda tambahkan dalam kode terlihat saat aplikasi berjalan, tetapi tidak terlihat di perancang Visual Studio XAML.

Di Visual Studio, saat menambahkan dan memanipulasi kontrol di aplikasi, Anda dapat menggunakan banyak fitur program, termasuk Kotak Alat, perancang XAML, editor XAML, dan jendela Properti.

Visual Studio Toolbox menampilkan banyak kontrol yang dapat Anda gunakan di aplikasi Anda. Untuk menambahkan kontrol ke aplikasi Anda, klik dua kali di Kotak Alat. Misalnya, saat Anda mengklik dua kali kontrol TextBox, XAML ini ditambahkan ke tampilan XAML.

<TextBox HorizontalAlignment="Left" Text="TextBox" VerticalAlignment="Top"/>

Anda juga dapat menyeret kontrol dari Kotak Alat ke perancang XAML.

Mengatur nama kontrol

Untuk bekerja dengan kontrol dalam kode, Anda mengatur atribut x:Name-nya dan mereferensikannya berdasarkan nama dalam kode Anda. Anda dapat mengatur nama di jendela Properti Visual Studio atau di XAML. Berikut cara mengatur nama kontrol yang saat ini dipilih dengan menggunakan kotak teks Nama di bagian atas jendela Properti.

Untuk memberi nama kontrol

1. Pilih elemen yang akan dinamai.
2. Di panel Properti, ketik nama ke dalam kotak teks Nama.
3. Tekan Enter untuk menerapkan nama.

Berikut cara mengatur nama kontrol di editor XAML dengan menambahkan atribut x:Name.

<Button x:Name="Button1" Content="Button"/>

Mengatur properti kontrol

Anda menggunakan properti untuk menentukan tampilan, konten, dan atribut kontrol lainnya. Saat Anda menambahkan kontrol menggunakan alat desain, beberapa properti yang mengontrol ukuran, posisi, dan konten mungkin diatur untuk Anda oleh Visual Studio. Anda dapat mengubah beberapa properti, seperti Lebar, Tinggi, atau Margin, dengan memilih dan memanipulasi kontrol dalam tampilan Desain. Ilustrasi ini memperlihatkan beberapa alat pengukur ukuran yang tersedia dalam tampilan Desain.

Anda mungkin ingin membiarkan kontrol berukuran dan diposisikan secara otomatis. Dalam hal ini, Anda dapat mengatur ulang properti ukuran dan posisi yang ditetapkan Visual Studio untuk Anda.

Untuk mengatur ulang properti

1. Di panel Properti, klik penanda properti di samping nilai properti. Menu properti terbuka.
2. Di menu properti, klik Reset.

Anda dapat mengatur properti kontrol di jendela Properti, di XAML, atau dalam kode. Misalnya, untuk mengubah warna latar depan untuk Tombol, Anda mengatur properti Latar Depan kontrol. Ilustrasi ini menunjukkan cara mengatur properti Latar Depan dengan menggunakan pemilih warna di jendela Properti.

Berikut cara mengatur properti Latar Depan di editor XAML. Perhatikan jendela Visual Studio IntelliSense yang terbuka untuk membantu Anda dengan sintaks.

Berikut adalah XAML yang dihasilkan setelah Anda mengatur properti Latar Depan.

<Button x:Name="Button1" Content="Button" 
        HorizontalAlignment="Left" VerticalAlignment="Top"
        Foreground="Beige"/>

Berikut cara mengatur properti Latar Depan dalam kode.

Button1.Foreground = new SolidColorBrush(Windows.UI.Colors.Beige);

Button1().Foreground(Media::SolidColorBrush(Windows::UI::Colors::Beige()));

Buat penanganan aktivitas

Setiap kontrol memiliki peristiwa yang memungkinkan Anda merespons tindakan dari pengguna atau perubahan lain di aplikasi Anda. Misalnya, kontrol Tombol memiliki peristiwa Klik yang dimunculkan saat pengguna mengklik Tombol. Anda membuat metode, yang disebut penanganan aktivitas, untuk menangani peristiwa. Anda dapat mengaitkan peristiwa kontrol dengan metode penanganan aktivitas di jendela Properti, di XAML, atau dalam kode. Untuk informasi selengkapnya tentang peristiwa, lihat Gambaran umum peristiwa dan peristiwa yang dirutekan.

Untuk membuat penanganan aktivitas, pilih kontrol lalu klik tab Peristiwa di bagian atas jendela Properti. Jendela Properti mencantumkan semua peristiwa yang tersedia untuk kontrol tersebut. Berikut adalah beberapa peristiwa untuk Tombol.

Untuk membuat penanganan aktivitas dengan nama default, klik ganda kotak teks di samping nama peristiwa di jendela Properti. Untuk membuat penanganan aktivitas dengan nama kustom, ketik nama pilihan Anda ke dalam kotak teks dan tekan enter. Penanganan aktivitas dibuat dan file code-behind dibuka di editor kode. Metode penanganan aktivitas memiliki 2 parameter. Yang pertama adalah sender, yang merupakan referensi ke objek tempat handler dilampirkan. Parameter sender adalah jenis Objek . Anda biasanya melemparkan sender ke jenis yang lebih tepat jika Anda ingin memeriksa atau mengubah status pada objek itu sender sendiri. Berdasarkan desain aplikasi Anda sendiri, Anda mengharapkan jenis yang aman untuk ditransmisikan sender , berdasarkan tempat handler dilampirkan. Nilai kedua adalah data peristiwa, yang umumnya muncul dalam tanda tangan sebagai e parameter atau args .

Berikut adalah kode yang menangani peristiwa Klik tombol bernama Button1. Saat Anda mengklik tombol, properti Latar Depan tombol yang Anda klik diatur ke biru.

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button b = (Button)sender;
    b.Foreground = new SolidColorBrush(Windows.UI.Colors.Blue);
}

#MainPage.h
struct MainPage : MainPageT<MainPage>
    {
        MainPage();
        ...
        void Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Windows::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

Anda juga dapat mengaitkan penanganan aktivitas di XAML. Di editor XAML, ketik nama peristiwa yang ingin Anda tangani. Visual Studio memperlihatkan jendela IntelliSense saat Anda mulai mengetik. Setelah menentukan peristiwa, Anda dapat mengklik <New Event Handler> dua kali di jendela IntelliSense untuk membuat penanganan aktivitas baru dengan nama default, atau memilih penanganan aktivitas yang ada dari daftar.

Berikut jendela IntelliSense yang muncul. Ini membantu Anda membuat penanganan aktivitas baru atau memilih penanganan aktivitas yang ada.

Contoh ini memperlihatkan cara mengaitkan peristiwa Klik dengan penanganan aktivitas bernama Button_Click di XAML.

<Button Name="Button1" Content="Button" Click="Button_Click"/>

Anda juga dapat mengaitkan peristiwa dengan penanganan aktivitasnya di kode di belakang. Berikut cara mengaitkan penanganan aktivitas dalam kode.

Button1.Click += new RoutedEventHandler(Button_Click);

Button1().Click({ this, &MainPage::Button1_Click });

Topik terkait

• Indeks kontrol menurut fungsi
• Namespace Windows.UI.Xaml.Controls
• Layout
• Gaya
• Kegunaan