Pengenalan kontrol dan kejadian

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

API Penting: Namespace Microsoft.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.

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. Anda dapat menggunakan gaya XAML dan templat kontrol untuk memodifikasi 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.

Tambah kontrol

Anda dapat menambahkan kontrol ke aplikasi dengan beberapa cara:

• Tambahkan kontrol ke markup XAML di editor XAML Visual Studio.
• Tambahkan kontrol dalam kode. Kontrol yang Anda tambahkan dalam kode terlihat saat aplikasi berjalan, tetapi tidak terlihat di perancang XAML Visual Studio.

Dalam Visual Studio, saat menambahkan dan memanipulasi kontrol di aplikasi, Anda dapat menggunakan banyak fitur program, termasuk Toolbox, editor XAML, dan Properties window.

Kotak Alat Visual Studio 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 ganda kontrol TextBox, XAML ini ditambahkan ke tampilan XAML.

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

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 Visual Studio Properties window atau di XAML. Berikut cara mengatur nama kontrol yang saat ini dipilih dengan menggunakan kotak teks Nama di bagian atas Properties window.

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 mengonfirmasi nama.

properti

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 dengan Visual Studio.

Anda dapat mengatur properti kontrol di dalam 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 Properties window.

pemilih warna

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 pengendali event

Setiap kontrol memaparkan peristiwa yang memungkinkan Anda merespons tindakan pengguna atau perubahan lain di aplikasi Anda. Tombol, misalnya, mengeluarkan Click peristiwa saat pengguna mengkliknya. Untuk menanggapi peristiwa tersebut, Anda menulis penanganan peristiwa—metode yang berjalan ketika peristiwa dipicu. Anda dapat menghubungkan penanganan aktivitas di Properties window, di XAML, atau di code-behind. Untuk informasi selengkapnya tentang peristiwa, lihat Gambaran umum Peristiwa dan peristiwa yang dirutekan.

Parameter penanganan aktivitas

Setiap penanganan aktivitas menerima dua parameter:

• sender – Referensi ke objek yang memicu event. Ini diketik sebagai Objek, jadi Anda biasanya mentransmisikannya ke jenis yang lebih spesifik (seperti Button) saat Anda perlu memeriksa atau mengubah status pengirim. Ubah ke tipe yang aman berdasarkan lokasi penempatan handler.
• e (atau args) – Data peristiwa, yang membawa informasi khusus untuk peristiwa tersebut.

Contoh berikut menangani Click peristiwa Tombol bernama Button1. Ketika tombol diklik, warna latar depannya 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::Microsoft::UI::Xaml::RoutedEventArgs const& e);
    };
    
#MainPage.cpp
void MainPage::Button1_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
    {
        auto b{ sender.as<winrt::Microsoft::UI::Xaml::Controls::Button>() };
        b.Foreground(Media::SolidColorBrush(Windows::UI::Colors::Blue()));
    }

Mengaitkan penanganan aktivitas di XAML

Di editor XAML, mulai ketik nama peristiwa yang ingin Anda tangani. Visual Studio membuka jendela IntelliSense saat Anda mengetik. <New Event Handler> Klik ganda untuk membuat handler dengan nama default, atau pilih handler yang ada dari daftar.

Contoh ini mengaitkan Click event dengan pengendali bernama Button_Click di XAML:

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

Mengaitkan penanganan aktivitas dalam kode

Anda juga dapat menyambungkan handler sepenuhnya di dalam code-behind:

Button1.Click += new RoutedEventHandler(Button_Click);

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

Topik terkait

• Indeks kontrol menurut fungsi
• namespace Microsoft.UI.Xaml.Controls
• Tata letak
• Gaya
• Kegunaan