Bagikan melalui

Tutorial: Membuat aplikasi WPF baru dengan .NET

Dalam tutorial ini, Anda mempelajari cara menggunakan Visual Studio untuk membuat aplikasi Windows Presentation Foundation (WPF) baru. Dengan Visual Studio, Anda menambahkan kontrol ke windows untuk merancang UI aplikasi, dan menangani peristiwa input dari kontrol tersebut untuk berinteraksi dengan pengguna. 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 2022. Tombol 'buat proyek baru' disorot dengan kotak merah.

  3. Dalam kotak Cari templat , ketik wpf, lalu tekan Enter.

  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, hanya templat untuk bahasa tersebut yang ditampilkan.

    Istilah 'wpf' ada di kotak pencarian dan disorot dengan panah merah. Dua templat dalam daftar hasil disorot dengan kotak merah, C# dan Visual Basic. Tombol 'Berikutnya' di kanan bawah layar disorot dengan kotak merah.

  6. Di jendela Konfigurasikan proyek baru Anda, lakukan hal berikut:

    1. Dalam kotak Nama proyek, masukkan Nama.
    2. Pilih kotak centang Tempatkan solusi dan proyek di direktori yang sama.
    3. Secara opsional, pilih Lokasi lain untuk menyimpan kode Anda.
    4. Pilih tombol Berikutnya.

    Cuplikan layar dialog 'konfigurasikan proyek baru Anda' dari Visual Studio 2022. Kotak teks 'Nama proyek' memiliki kata 'Nama' di dalamnya dan disorot dengan kotak merah. Kotak centang 'Tempatkan solusi dan proyek di direktori yang sama' dicentang dan diarahkan ke dengan panah merah. Tombol 'Berikutnya' juga disorot dengan kotak merah.

  7. Di jendela Informasi tambahan, pilih .NET 9.0 (Dukungan Istilah Standar) untuk Kerangka Kerja Target. Pilih tombol Create.

    Cuplikan layar dialog 'Informasi tambahan' dari Visual Studio 2022. Kotak dropdown 'Kerangka Kerja' memiliki '.NET 9.0 (Dukungan Istilah Standar)' dipilih dan disorot dengan panah merah. Tombol 'Buat' juga disorot dengan kotak merah.

Setelah aplikasi dibuat, Visual Studio harus 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 yang harus Anda ketahui saat membuat proyek WPF untuk .NET

  1. Penjelajah Solusi

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

  2. Karakteristik

    Jendela ini memperlihatkan pengaturan properti yang dapat Anda konfigurasi berdasarkan item yang dipilih. Misalnya, jika Anda memilih item dari Penjelajah Solusi, Anda akan melihat pengaturan properti yang terkait dengan file. Jika Anda memilih objek di Perancang, Anda akan melihat pengaturan untuk elemen tersebut. Mengenai gambar sebelumnya, bilah judul jendela dipilih di perancang.

  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 pada permukaan. 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 proyek Anda dibuat, editor kode XAML terlihat dengan 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 oleh 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. Ada delapan atribut yang dideklarasikan, dan umumnya termasuk dalam tiga kategori:

  • Namespace XML

    Namespace XML menyediakan struktur untuk XML, menentukan konten XML apa yang dapat dideklarasikan dalam file.

    Atribut utama xmlns mengimpor namespace XML untuk seluruh file, dan dalam hal ini, 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 dideklarasikan pada objek XAML menetapkan 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 akan melihat jendela default yang dihasilkan oleh templat yang ditampilkan, 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 untuk Anda 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. Itu tidak benar-benar 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 kisi di editor kode XAML atau perancang XAML, Anda akan melihat bahwa perancang XAML menampilkan setiap baris dan kolom:

    Aplikasi WPF dengan margin yang diatur pada kisi

Menambahkan kontrol pertama

Sekarang setelah kisi telah dikonfigurasi, kita dapat mulai menambahkan kontrol ke dalamnya. Pertama, mulailah dengan kontrol label.

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

    <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 . Mengatur konten melalui sintaks atribut XAML, Anda akan menggunakan format ini: <Label Content="Names" />. Kedua cara mencapai hal yang sama, mengatur konten label untuk menampilkan teks Names.

    Perhatikan bahwa label mengambil setengah jendela, karena secara otomatis diposisikan ke baris pertama dan kolom kisi. Untuk baris pertama kita, kita tidak membutuhkan banyak ruang karena kita hanya akan menggunakan baris itu 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>

    Perhatikan bahwa perancang sekarang menunjukkan label yang menempati sejumlah kecil tinggi yang tersedia. Sekarang ada lebih banyak ruang untuk diduduki 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 dibuat di bagian sebelumnya secara otomatis ditempatkan di baris 0 dan kolom 0 kisi. 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 kuat yang disediakan oleh WPF.

Kontrol kisi mendefinisikan properti baru yang dapat dilampirkan oleh kontrol turunan ke dirinya sendiri. Properti tidak benar-benar ada pada kontrol itu sendiri, properti tersedia untuk kontrol setelah ditambahkan ke kisi.

Kisi menentukan dua properti untuk menentukan penempatan baris dan kolom kontrol anak: Grid.Row dan Grid.Column. Jika properti ini dihilangkan dari kontrol, tersirat bahwa properti ini memiliki nilai default 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 kita 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, kontrol dapat dirujuk di kode-belakang. Nama ditetapkan ke kontrol dengan 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

Dua kontrol terakhir yang akan kita tambahkan adalah kotak teks dan tombol, yang digunakan pengguna untuk memasukkan nama untuk ditambahkan ke kotak daftar. Namun, alih-alih mencoba membuat lebih banyak baris dan kolom di kisi untuk mengatur kontrol ini, kita akan menempatkan kontrol ini ke <StackPanel> dalam kontrol tata letak.

Panel tumpukan berbeda dari kisi dalam cara kontrol ditempatkan. Meskipun Anda memberi tahu kisi tempat Anda ingin kontrol berada dengan Grid.Row properti dan Grid.Column terlampir, panel tumpukan bekerja secara otomatis meletakkan setiap kontrol turunannya 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>

    Atribut Margin sebelumnya digunakan pada kisi, tetapi kami 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 kami tidak memiliki logika apa pun di dalamnya untuk benar-benar berfungsi. Selanjutnya, kita perlu menghubungkan peristiwa kontrol untuk membuat kode dan membuat aplikasi benar-benar melakukan sesuatu.

Menambahkan kode untuk peristiwa Klik

Yang <Button> kami buat memiliki Click peristiwa yang dimunculkan ketika pengguna menekan tombol . Anda dapat berlangganan kejadian ini dan menambahkan kode untuk menambahkan nama ke kotak daftar. Atribut XAML digunakan untuk berlangganan peristiwa seperti yang digunakan untuk mengatur properti.

  1. <Button> Temukan kontrol.

  2. Atur atribut ke ClickButtonAddName_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 disediakan.

    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 peristiwa ditangani, jalankan aplikasi. Jendela ditampilkan dan Anda dapat memasukkan nama di kotak teks lalu menambahkannya dengan mengklik tombol .

Menjalankan Windows Presentation Foundation (WPF) untuk aplikasi .NET.

Konten terkait