Bagikan melalui

Tutorial: Membuat aplikasi WPF dengan .NET

Dalam tutorial ini, Anda mempelajari cara menggunakan Visual Studio untuk membuat aplikasi Windows Presentation Foundation (WPF). Dengan Visual Studio, Anda menambahkan kontrol ke jendela dan menangani peristiwa. Pada akhir tutorial ini, Anda memiliki aplikasi sederhana yang menambahkan nama ke kotak daftar.

Di tutorial ini, Anda akan:

  • Buat aplikasi WPF baru.
  • Tambahkan kontrol ke jendela.
  • Menangani peristiwa kontrol untuk menyediakan fungsionalitas aplikasi.
  • Jalankan aplikasi.

Berikut adalah pratinjau aplikasi yang dibuat saat mengikuti tutorial ini:

Aplikasi sampel yang sudah selesai untuk tutorial WPF

Prasyarat

Membuat aplikasi WPF

Langkah pertama untuk membuat aplikasi baru adalah membuka Visual Studio dan menghasilkan aplikasi dari templat.

  1. Buka Visual Studio.

  2. Pilih Buat proyek baru.

    Cuplikan layar dialog mulai dari Visual Studio 2026. Tombol 'buat proyek baru' disorot dengan kotak merah.

  3. Dalam kotak Cari templat , ketik wpf, dan tunggu hingga hasil pencarian muncul.

  4. Di menu dropdown bahasa kode, pilih C# atau Visual Basic.

  5. Dalam daftar templat, pilih Aplikasi WPF lalu pilih Berikutnya.

    Penting

    Jangan pilih templat Aplikasi WPF (.NET Framework).

    Gambar berikut menunjukkan templat proyek C# dan Visual Basic .NET. Jika Anda menerapkan filter bahasa kode , templat yang sesuai akan dicantumkan.

    Cuplikan layar dialog 'Buat proyek baru' Visual Studio dengan 'wpf' di kotak pencarian dan templat Aplikasi WPF disorot.

  6. Di jendela Konfigurasikan proyek baru Anda , atur Nama proyek ke Nama dan pilih Berikutnya.

    Anda juga dapat menyimpan proyek Anda ke folder lain dengan menyesuaikan jalur Lokasi .

    Cuplikan layar dialog 'konfigurasikan proyek baru Anda' dari Visual Studio 2026. Kotak teks 'Nama proyek' memiliki kata 'Nama' di dalamnya dan disorot dengan kotak merah. Tombol 'Berikutnya' juga disorot dengan kotak merah.

  7. Terakhir, di jendela Informasi tambahan , pilih .NET 10.0 (Dukungan Jangka Panjang) untuk pengaturan Kerangka Kerja , lalu pilih Buat.

    Cuplikan layar dialog 'Informasi tambahan' dari Visual Studio 2026. Kotak dropdown 'Kerangka Kerja' memiliki '.NET 10 (Dukungan Jangka Panjang)' dipilih dan disorot dengan kotak merah. Tombol 'Buat' juga disorot dengan kotak merah.

Setelah Visual Studio menghasilkan aplikasi, aplikasi akan membuka jendela perancang XAML untuk jendela default, MainWindow. Jika perancang tidak terlihat, klik dua kali pada file MainWindow.xaml di jendela Penjelajah Solusi untuk membuka perancang.

Bagian penting dari Visual Studio

Dukungan untuk WPF di Visual Studio memiliki lima komponen penting yang berinteraksi dengan Anda saat membuat aplikasi:

Komponen penting Visual Studio 2026 yang harus Anda ketahui saat membuat proyek WPF untuk .NET.

  1. Penjelajah Solusi

    Semua file proyek, kode, jendela, dan sumber daya Anda muncul di jendela ini.

  2. Karakteristik

    Jendela ini memperlihatkan pengaturan properti yang dapat Anda konfigurasi berdasarkan konteks item yang dipilih. Misalnya, jika Anda memilih item dari Penjelajah Solusi, pengaturan yang terkait dengan file akan ditampilkan. Jika objek di Perancang dipilih, properti kontrol atau jendela ditampilkan.

  3. Kotak Peralatan

    Kotak alat berisi semua kontrol yang dapat Anda tambahkan ke permukaan desain. Untuk menambahkan kontrol ke permukaan saat ini, klik dua kali kontrol atau seret dan letakkan kontrol ke perancang. Sebagai gantinya, gunakan jendela editor kode XAML untuk merancang antarmuka pengguna (UI), saat menggunakan jendela desainer XAML untuk mempratinjau hasilnya.

  4. Perancang XAML

    Ini adalah perancang untuk dokumen XAML. Ini interaktif dan Anda dapat menyeret dan meletakkan objek dari Kotak Alat. Dengan memilih dan memindahkan item di perancang, Anda dapat menyusun UI secara visual untuk aplikasi Anda.

    Ketika perancang dan editor terlihat, perubahan pada perancang tercermin di sisi lain.

    Saat Anda memilih item di perancang, jendela Properti menampilkan properti dan atribut tentang objek tersebut.

  5. Editor kode XAML

    Ini adalah editor kode XAML untuk dokumen XAML. Editor kode XAML adalah cara untuk membuat UI Anda dengan tangan tanpa perancang. Perancang mungkin secara otomatis mengatur properti pada kontrol saat kontrol ditambahkan dalam perancang. Editor kode XAML memberi Anda lebih banyak kontrol.

    Ketika perancang dan editor terlihat, perubahan pada perancang tercermin di sisi lain. Saat Anda menavigasi tanda sisipan teks di editor kode, jendela Properti menampilkan properti dan atribut tentang objek tersebut.

Memeriksa XAML

Setelah Anda membuat proyek, editor kode XAML terbuka. Ini menunjukkan jumlah kode XAML minimal untuk menampilkan jendela. Jika editor tidak terbuka, klik dua kali item MainWindow.xaml di jendela Penjelajah Solusi. Anda akan melihat XAML yang mirip dengan contoh berikut:

<Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Penting

Jika Anda mengkoding di Visual Basic, XAML sedikit berbeda, khususnya x:Class=".." atribut . XAML di Visual Basic menggunakan nama kelas objek dan menghilangkan namespace ke kelas.

Untuk lebih memahami XAML, mari kita uraikan. XAML hanyaLAH XML yang diproses WPF untuk membuat UI. Untuk memahami XAML, Anda harus, minimal, terbiasa dengan dasar-dasar XML.

Akar <Window> dokumen mewakili jenis objek yang dijelaskan oleh file XAML. File mendeklarasikan delapan atribut, dan umumnya termasuk dalam tiga kategori:

  • Namespace XML

    Namespace XML menyediakan struktur ke XML. Ini menentukan konten XML apa yang dapat Anda deklarasikan dalam file.

    Atribut utama xmlns mengimpor namespace XML untuk seluruh file. Dalam hal ini, ia memetakan ke jenis yang dideklarasikan oleh WPF. Namespace XML lainnya mendeklarasikan awalan dan mengimpor jenis dan objek lain untuk file XAML. Misalnya, xmlns:local namespace mendeklarasikan local awalan dan peta ke objek yang dideklarasikan oleh proyek Anda, yang dideklarasikan dalam Names namespace kode.

  • atribut x:Class

    Atribut ini memetakan <Window> ke jenis yang ditentukan oleh kode Anda: file MainWindow.xaml.cs atau MainWindow.xaml.vb , yang merupakan Names.MainWindow kelas di C# dan MainWindow di Visual Basic.

  • atribut Title

    Atribut normal apa pun yang Anda deklarasikan pada objek XAML mengatur properti objek tersebut. Dalam hal ini, Title atribut mengatur Window.Title properti .

Mengubah jendela

Untuk contoh aplikasi kami, jendela ini terlalu besar, dan bilah judul tidak deskriptif. Mari kita perbaiki itu.

  1. Pertama, jalankan aplikasi dengan menekan tombol F5 atau dengan memilih Debug>Mulai Debugging dari menu.

    Anda melihat jendela default yang dihasilkan oleh templat, tanpa kontrol apa pun, dan judul MainWindow:

    Aplikasi WPF kosong

  2. Ubah judul jendela dengan mengatur ke TitleNames.

  3. Ubah ukuran jendela dengan mengatur ke Height180 dan Width ke 260.

    <Window x:Class="Names.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Menyiapkan tata letak

WPF menyediakan sistem tata letak yang kuat dengan banyak kontrol tata letak yang berbeda. Kontrol tata letak membantu menempatkan dan mengukur kontrol anak, dan bahkan dapat melakukannya secara otomatis. Kontrol tata letak default yang disediakan dalam XAML ini adalah <Grid> kontrol.

Kontrol kisi memungkinkan Anda menentukan baris dan kolom, seperti tabel, dan menempatkan kontrol dalam batas kombinasi baris dan kolom tertentu. Anda dapat menambahkan sejumlah kontrol anak atau kontrol tata letak lainnya ke kisi. Misalnya, Anda dapat menempatkan kontrol lain <Grid> dalam kombinasi baris dan kolom tertentu, dan kisi baru tersebut kemudian dapat menentukan lebih banyak baris dan kolom dan memiliki anaknya sendiri.

Kontrol kisi menempatkan kontrol turunannya dalam baris dan kolom. Kisi selalu memiliki satu baris dan kolom yang dideklarasikan, artinya, kisi secara default adalah sel tunggal. Pengaturan default tersebut tidak memberi Anda banyak fleksibilitas dalam menempatkan kontrol.

Sesuaikan tata letak kisi untuk kontrol yang diperlukan untuk aplikasi ini.

  1. Tambahkan atribut baru ke <Grid> elemen: Margin="10".

    Pengaturan ini membawa kisi masuk dari tepi jendela dan membuatnya terlihat sedikit lebih bagus.

  2. Tentukan dua baris dan dua kolom, membaguskan kisi menjadi empat sel:

    <Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

  3. Pilih grid di editor kode XAML atau perancang XAML. Perancang XAML memperlihatkan setiap baris dan kolom:

    Aplikasi WPF dengan margin yang diatur pada kisi

Menambahkan kontrol pertama

Sekarang setelah kisi dikonfigurasi, Anda dapat mulai menambahkan kontrol ke dalamnya. Pertama, tambahkan kontrol label.

  1. Buat elemen baru <Label> di <Grid> dalam elemen, setelah definisi baris dan kolom. Atur konten elemen ke nilai Namesstring :

    <Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>

    <Label>Names</Label> menentukan konten Names. Beberapa kontrol memahami cara menangani konten, yang lain tidak. Konten kontrol memetakan ke Content properti . Jika Anda mengatur konten melalui sintaks atribut XAML, gunakan format ini: <Label Content="Names" />. Kedua cara mencapai hal yang sama, mengatur konten label untuk menampilkan teks Names.

    Label teks memenuhi setengah dari jendela, karena secara otomatis diposisikan ke baris pertama dan kolom pertama dari kisi. Untuk baris pertama, Anda tidak memerlukan banyak ruang karena Anda hanya akan menggunakan baris tersebut untuk label.

  2. Height Ubah atribut yang pertama <RowDefinition> dari * ke Auto.

    Nilai Auto secara otomatis mengukur baris kisi ke ukuran kontennya, dalam hal ini, kontrol label.

    <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

    Desainer sekarang menunjukkan label yang menempati sejumlah kecil dari tinggi yang tersedia. Masih ada lebih banyak ruang untuk ditempati oleh baris berikutnya.

    Aplikasi WPF dengan margin diatur pada kisi dan kontrol label di baris pertama

Penempatan kontrol

Mari kita bicara tentang penempatan kontrol. Label yang Anda buat di bagian sebelumnya secara otomatis ditempatkan pada kisi di baris 0 dan kolom 0. Penomoran untuk baris dan kolom dimulai pada 0 dan kenaikan sebesar 1. Kontrol tidak tahu apa-apa tentang kisi, dan kontrol tidak menentukan properti apa pun untuk mengontrol penempatannya dalam kisi.

Bagaimana Anda memberi tahu kontrol untuk menggunakan baris atau kolom yang berbeda ketika kontrol tidak memiliki pengetahuan tentang kisi? Properti terlampir! Kisi memanfaatkan sistem properti yang disediakan oleh WPF.

Kontrol kisi mendefinisikan properti baru yang dapat dilampirkan oleh kontrol turunan ke dirinya sendiri. Properti sebenarnya tidak ada pada pengendali tersebut, tetapi tersedia bagi pengendali begitu ditambahkan ke grid.

Kisi menentukan dua properti untuk menentukan penempatan baris dan kolom kontrol anak: Grid.Row dan Grid.Column. Jika Anda menghilangkan properti ini dari kontrol, nilai defaultnya adalah 0. Jadi, kontrol ditempatkan dalam baris 0 dan kolom 0 kisi. Coba ubah penempatan <Label> kontrol dengan mengatur Grid.Column atribut ke 1:

<Label Grid.Column="1">Names</Label>

Perhatikan bahwa label dipindahkan ke kolom kedua. Anda dapat menggunakan properti terlampir Grid.Row dan Grid.Column untuk menempatkan kontrol berikutnya yang akan Anda buat. Namun untuk saat ini, pulihkan label ke kolom 0.

Buat kotak daftar nama

Sekarang setelah kisi berukuran benar dan label dibuat, tambahkan kontrol kotak daftar pada baris di bawah label.

  1. Deklarasikan kontrol di <ListBox /> bawah <Label> kontrol.

  2. Atur properti Grid.Row ke 1.

  3. Atur properti x:Name ke lstNames.

    Setelah kontrol diberi nama, Anda dapat mereferensikannya di code-behind. Tetapkan nama ke kontrol dengan menggunakan x:Name atribut .

Berikut tampilan XAML:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Menambahkan kontrol yang tersisa

Tambahkan kotak teks dan tombol. Pengguna menggunakan kontrol ini untuk memasukkan nama untuk ditambahkan ke kotak daftar. Alih-alih membuat lebih banyak baris dan kolom di kisi untuk menyusun kontrol ini, masukkan kontrol ini ke dalam <StackPanel> kontrol tata letak.

Panel stack berbeda dari grid dalam cara penempatannya menempatkan kontrol. Saat Anda menggunakan properti terlampir Grid.Row dan Grid.Column untuk mengatur posisi kontrol pada grid, stack panel berfungsi secara otomatis. Ini menjabarkan setiap kontrol anaknya secara berurutan. Ini "menumpuk" setiap kontrol setelah yang lain.

  1. Deklarasikan kontrol di <StackPanel> bawah <ListBox> kontrol.

  2. Atur properti Grid.Row ke 1.

  3. Atur properti Grid.Column ke 1.

  4. Atur Margin ke 5,0,0,0.

    <Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>

    Anda sebelumnya menggunakan Margin atribut pada kisi, tetapi Anda hanya memasukkan satu nilai, 10. Margin ini memiliki nilai 5,0,0,0, yang sangat berbeda dari 10. Properti margin adalah Thickness jenis dan dapat menginterpretasikan kedua nilai. Ketebalan menentukan ruang di sekitar setiap sisi bingkai persegi panjang, kiri, atas, kanan, bawah, masing-masing. Jika nilai untuk margin adalah nilai tunggal, nilai tersebut menggunakan nilai tersebut untuk keempat sisi.

  5. <StackPanel> Di dalam kontrol, buat <TextBox /> kontrol.

    1. Atur properti x:Name ke txtName.

  6. Terakhir, setelah <TextBox>, masih di dalam <StackPanel>, buat <Button> kontrol.

    1. Atur properti x:Name ke btnAdd.
    2. Atur Margin ke 0,5,0,0.
    3. Atur konten ke Add Name.

Berikut tampilan XAML:

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Tata letak untuk jendela selesai. Namun, aplikasi tidak memiliki logika untuk benar-benar berfungsi. Selanjutnya, Anda perlu menghubungkan peristiwa kontrol ke kode dan membuat aplikasi benar-benar berfungsi.

Menambahkan kode untuk peristiwa Klik

Yang <Button> Anda buat memiliki Click event yang dipicu oleh aplikasi saat pengguna menekan tombol. Berlangganan ke peristiwa ini dan tambahkan kode untuk menambahkan nama ke kotak daftar. Gunakan atribut XAML untuk berlangganan peristiwa, sama seperti Anda menggunakannya untuk mengatur properti.

  1. <Button> Temukan kontrol.

  2. Atur Click atribut ke ButtonAddName_Click.

    <StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

  3. Buat kode penanganan aktivitas. Klik kanan dan ButtonAddName_Click pilih Buka Definisi.

    Tindakan ini menghasilkan metode di code-behind yang cocok dengan nama handler yang Anda berikan.

    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}

    Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub

  4. Selanjutnya, tambahkan kode berikut untuk melakukan tiga langkah berikut:

    1. Pastikan kotak teks berisi nama.
    2. Validasi bahwa nama yang dimasukkan dalam kotak teks belum ada.
    3. Tambahkan nama ke kotak daftar.
    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

    Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

Menjalankan aplikasi

Setelah menangani peristiwa, jalankan aplikasi. Jendela muncul, dan Anda dapat memasukkan nama di kotak teks. Tambahkan nama dengan memilih tombol .

Menjalankan WPF untuk aplikasi .NET di Visual Studio 2026.

Konten terkait

  • Last updated on