Tutorial WPF untuk Pemula

Apa itu WPF?

WPF adalah kerangka untuk membangun Windows Aplikasi yang memungkinkan pengembang untuk membuat antarmuka pengguna yang kaya dengan animasi 3D dan warna yang kaya menggunakan kompleksitas kode yang lebih rendah. Ini adalah mesin rendering berbasis vektor yang menggunakan akselerasi perangkat keras kartu grafis modern, yang membuat UI lebih cepat dan sangat skalabel. WPF adalah singkatan dari... Windows presentasi Foundation.

WPF dapat dianggap sebagai evolusi dari WinForms. WPF menyediakan sistem tampilan grafis yang mudah dioperasikan untuk... Windows dan menawarkan pemisahan yang jelas antara UI dan logika bisnis.

Aplikasi WPF biasanya diimplementasikan sebagai program desktop mandiri, dan juga dapat dihosting sebagai objek tersemat dalam aplikasi lain.

Mengapa WPF?

Ada banyak alasan untuk menggunakan platform WPF. Beberapa alasan utamanya adalah:

• Platform ideal untuk digunakan jika Anda perlu berurusan dengan berbagai jenis media
• WPF memungkinkan Anda membuat antarmuka pengguna yang dapat disesuaikan tampilannya. WPF juga membantu Anda saat perlu memuat sebagian UI atau ingin mengikat data XML.
• Ini memungkinkan Anda memanfaatkan perpustakaan kelas .NET yang besar saat ia dibangun teknologi .NET
• Independensi resolusi, sehingga aplikasi yang dikembangkan menggunakan WPF dapat berjalan di layar tablet kecil atau monitor 20 inci.
• WPF dibangun di atas DirectX, bukan WinAPI. Ia menggunakan sistem grafis komputer klien, sehingga menawarkan daya rendering grafis yang lebih besar.
• Mendukung model dokumen alur yang memungkinkan kualitas tata letak "penerbitan desktop".
• Tampilan dan perilaku memiliki keterkaitan yang longgar. Hal ini memungkinkan perancang dan pengembang untuk mengerjakan dua model yang terpisah.
• Dalam kerangka kerja WPF, Anda dapat mendesain alat secara grafis menggunakan dokumen XML sederhana alih-alih mengurai kode.
• Memungkinkan Anda menggunakan akselerasi perangkat keras untuk menggambar GUI, untuk kinerja yang lebih baik

Selanjutnya, mari kita lihat bagaimana kerangka kerja tersebut berkembang dari waktu ke waktu.

Sejarah WPF

Windows 1.0 adalah lingkungan GUI pertama dari MicrosoftSistem ini bekerja sebagai lapisan di atas DOS, mengandalkan sistem GDI dan USER untuk grafis dan antarmuka pengguna.

DirectX diperkenalkan pada tahun 1995 sebagai sistem grafis berkinerja tinggi yang ditujukan untuk game dan lingkungan terkait grafis lainnya. Selama bertahun-tahun, banyak versi dirilis, dan DirectX 9 menyediakan pustaka yang dapat digunakan dengan kode .NET terkelola.

versi WPF	rilis Tahun	.Versi Bersih	Versi Visual Studio	Fitur
3.0	2006	3.0	N / A	Peluncuran pertama. Namun pengembangan WPF bisa dilakukan dengan VS 2005.
3.5	2007	3.5	vs 2008	Modifikasi dan perbaikan pada: Model aplikasi, pengikatan, kontrol, dokumen, anotasi, dan elemen UI 3D.
3.5 SP1	2008	3.5 SP1	N / A	Dukungan layar splash asli. Kontrol browser web baru, dukungan DirectX pixel shader.
4.0	2010	4.0	vs 2010	Kontrol baru: Kalender, DataGrid, Pemilih Tanggal. Dukungan Multi-Touch dan Manipulasi.
4.5	2012	4.5	vs 2012	Startup lebih cepat, performa lebih baik saat menampilkan kumpulan data besar. Kontrol Ribbon baru dan antarmuka INotifyDataErrorInfo untuk validasi data.
4.5.1	2013	4.5.1	vs 2013	Peningkatan kecil pada kinerja dan keandalan.
4.5.2	2014	4.5.2	NA	Tidak Ada Perubahan Besar
4.6	2015	4.6	vs 2015	Dukungan jendela anak transparan Peningkatan HDPI dan Sentuh
4.8	2019	4.8	vs 2019	Rilis utama terakhir .NET Framework, dengan perbaikan DPI tinggi dan peningkatan aksesibilitas.
.NET Core 3.0 ke atas	2019-sekarang	.NET Core 3.0 hingga .NET 10	VS 2019/2022	WPF menjadi open source dan disertakan dengan .NET modern (aplikasi tetap berjalan). Windows-hanya).

WPF tidak lagi memiliki versi terpisah dari .NET. Sejak 2019, WPF telah dirilis sebagai komponen sumber terbuka dari platform .NET modern, dan rilis terbarunya disertakan dengan .NET 10, yang hadir pada November 2025 sebagai versi dukungan jangka panjang (LTS).

Fitur WPF

Diagram di bawah ini mengelompokkan kemampuan utama WPF, yang dijelaskan secara detail setelahnya.

• Dokumen dan Percetakan
• Keamanan, Aksesibilitas & Lokalisasi
• Menawarkan Interoperabilitas dengan Windows Kontrol formulir
• Direct3D digunakan dalam aplikasi grafis yang mengutamakan kinerja
• Menggunakan perangkat keras kartu video untuk rendering
• Grafik berbasis vektor memungkinkan Anda untuk memperbesar atau memperkecil ukuran aplikasi tanpa kehilangan kualitas.
• WPF mendukung sistem piksel logika floating-point dan warna ARGB 32-bit.
• Definisikan Ulang Gaya dan Templat Kontrol
• Membangun font internasional dari font komposit
• Rendering teks WPF memanfaatkan teknologi ClearType.
• Memungkinkan Anda menggunakan teknik cache teks yang telah dirender sebelumnya dalam memori video
• Pendekatan berbasis sumber daya untuk setiap kontrol
• Pengatur waktu presentasi diinisialisasi & dikelola oleh WPF
• Hubungan antara video dan animasi juga didukung
• Dalam WPF, style adalah sekumpulan properti yang harus diterapkan pada konten yang digunakan untuk rendering visual.
• Template di WPF membantu Anda mengubah UI dokumen Anda.
• Perintah lebih absoluttract dan versi peristiwa yang terhubung secara longgar
• Dukungan WPF untuk perintah mengurangi jumlah kode yang perlu kita tulis

Selanjutnya di WPF ini tutorial C#, kita akan mempelajari tentang tipe inti dan infrastruktur WPF.

Jenis dan Infrastruktur Inti WPF

Kelas di WPF dibagi menjadi empat jenis berbeda:

• Elemen UI
• Elemen Kerangka
• Elemen Konten
• FrameworkContentElement

Kelas-kelas ini dikenal sebagai kelas elemen dasar. Kelas-kelas ini menyediakan fondasi untuk model penyusunan antarmuka pengguna.

Antarmuka pengguna WPF terdiri dari elemen-elemen yang disusun dalam hierarki pohon yang disebut pohon elemen. Pohon elemen adalah cara intuitif untuk menata antarmuka pengguna, dan merupakan struktur yang memungkinkan Anda mendapatkan layanan UI yang canggih.

xaml

Extensible Application Markup Language, yang disebut “XAML” (diucapkan “zammel”), adalah cara deklaratif untuk mendefinisikan antarmuka pengguna.

Berikut adalah definisi XAML dari tombol sederhana:

<Button
FontSize="16"
HorizontalAlignment="Center"
VerticalAlignment="Center"
>
Say Hello Guru99</Button>

Keunggulan menggunakan bahasa XAML:

• XAML memisahkan tampilan antarmuka pengguna (front-end) dari logika sistem (back-end).
• XAML adalah metode termudah untuk mewakili antarmuka pengguna
• XAML bekerja secara efektif dengan alat desain.

Kontrol

Kerangka kerja WPF mendukung banyak kontrol yang berguna seperti:

• Kontrol pengeditan seperti TeksBox, MemeriksaBox, Tombol radio
• Kontrol daftar seperti DaftarBox, Tampilan Daftar, Tampilan Pohon
• Informasi pengguna seperti Label, WPF ProgressBar, ToolTip
• Tindakan seperti Menu, Tombol, dan ToolBar
• Penampilan seperti Border, WPF Image, dan Viewbox
• Kotak dialog umum seperti OpenFileDialog dan PrintDialog
• Kontainer seperti TabControl, ScrollBar, dan GroupBox
• Tata letak seperti DockPanel, StackPanel, dan Grid.
• Navigasi seperti Frame dan Hyperlink

Tampilan kontrol dapat disesuaikan dengan gaya dan templat tanpa pemrograman. Anda juga dapat membuat kontrol kustom dengan menurunkan kelas baru dari kelas dasar yang sesuai.

Penampilan

WPF menyediakan fitur untuk menyesuaikan tampilan aplikasi Anda. Ini memungkinkan Anda mengatur objek dan nilai untuk hal-hal seperti font, latar belakang, dll.

Fitur gaya memungkinkan Anda melakukan standarisasi tampilan spesifik untuk keseluruhan produk. Ini memungkinkan Anda mengganti tampilan default sambil mempertahankan perilaku defaultnya.

Templat data memungkinkan Anda mengontrol visualisasi default dari data yang terikat. Dengan bantuan tema, Anda dapat dengan mudah menerapkan gaya visual sistem operasi.

Tata Letak & Panel

Tata letak membantu Anda dalam penempatan dan pengaturan ukuran kontrol yang tepat. Ini adalah bagian dari proses penyusunan presentasi untuk pengguna. Kerangka kerja WPF memudahkan proses tata letak dan menawarkan kemampuan adaptasi tampilan UI yang lebih baik.

Infrastruktur tata letak ditawarkan oleh lima kelas utama: 1) StackPanel 2) DockPanel 3) WrapPanel 4) Grid dan 5) Canvas

Grafis

WPF menyediakan sistem grafis yang lebih baik:

• WPF menggunakan unit yang tidak bergantung pada perangkat, sehingga memungkinkan resolusi dan independensi perangkat. Setiap piksel yang tidak bergantung pada perangkat secara otomatis menyesuaikan skalanya dengan pengaturan titik per inci (dots-per-inch) sistem.
• WPF menggunakan double bukan float dan mendukung lebih banyak pilihan warna
• Mesin grafis WPF dirancang sedemikian rupa sehingga dapat memanfaatkan perangkat keras grafis bila tersedia

Dokumen dan Percetakan

Kerangka kerja WPF menawarkan tiga jenis dokumen:

• Memperbaiki dokumen: Jenis dokumen ini mendukung WYSIWpresentasi YG.
• Dokumen aliran: Memungkinkan Anda menyesuaikan dan mengubah alur konten berdasarkan variabel run-time seperti ukuran jendela dan resolusi perangkat.
• Dokumen XPS: Representasi kertas elektronik yang dipaginasi dalam format berbasis XML. XPS adalah format dokumen terbuka dan terstandarisasi.

WPF memungkinkan kontrol yang lebih baik atas sistem pencetakan, termasuk pencetakan jarak jauh dan antrean. Selain itu, dokumen XPS dapat dicetak langsung tanpa mengonversinya ke format cetak.

Setelah membahas elemen-elemen dasar, mari kita lihat bagaimana bagian-bagian ini saling terhubung secara internal.

WPF Architekstur

WPF merupakan bagian dari kerangka kerja .NET. WPF berisi kode terkelola (managed) dan tidak terkelola (unmanaged). Komponen-komponen penting dari arsitektur WPF dijelaskan pada gambar di bawah ini:

Komponen arsitektur WPF

• Kerangka Presentasi: Membantu Anda membuat elemen tingkat atas seperti kontrol, gaya, tata letak, jendela, dll.
• Inti Presentasi: Ini berisi tipe dasar seperti UIElement dan Visual, dari mana semua kontrol dan bentuk dalam PresentationFramework.dll diturunkan.
• CLR: Itu membuat proses pengembangan menjadi produktif dengan menawarkan fitur-fitur seperti manajemen memori, penanganan kesalahan, dll.
• inti susu: Milcore adalah bagian dari kode tidak terkelola yang menawarkan integrasi erat dengan DirectX.
• DirectX: Ini adalah API tingkat rendah yang merender grafis WPF. DirectX berinteraksi dengan driver dan merender konten.
• Pengguna32: Ini adalah API inti yang banyak digunakan oleh berbagai program. API ini mengelola memori dan pemisahan proses. User32 membantu Anda menentukan elemen mana yang akan ditempatkan di mana pada layar.
• Kernel: Input berasal dari sinyal pada driver perangkat mode kernel dan dialihkan ke proses yang benar dengan menghubungkan dengan Windows kernel dan Pengguna32.

Pengikatan Data WPF

Pengikatan data (data binding) adalah salah satu konsep paling ampuh di WPF. Alih-alih menulis kode yang secara manual menyalin nilai antara kontrol dan objek, Anda mendeklarasikan koneksi di XAML, dan WPF secara otomatis menjaga kedua sisi tetap sinkron. Misalnya:

<TextBox Text="{Binding Path=StudentName, Mode=TwoWay}" />

WPF mendukung empat mode pengikatan:

• SATU ARAH: Kontrol diperbarui ketika data sumber berubah.
• Dua Arah: Perubahan aliran terjadi di kedua arah antara kontrol dan sumber.
• OneTime: Kontrol tersebut hanya membaca nilai sumber sekali, yaitu pada saat pemuatan.
• OneWayToSource: Kontrol tersebut mengirimkan nilainya ke sumber, tidak pernah sebaliknya.

Pengikatan data juga merupakan mesin di balik pola MVVM (Model-View-ViewModel), arsitektur yang paling umum untuk aplikasi WPF profesional, karena memungkinkan tampilan tetap berada di XAML sementara logika berada di kelas C# yang dapat diuji.

💡 Kiat: Implementasikan antarmuka INotifyPropertyChanged pada kelas data Anda. Tanpa itu, UI tidak akan diperbarui ketika nilai properti berubah dalam kode.

Instalasi WPF

Silakan kunjungi tautan ini untuk menginstal WPF: https://www.guru99.com/download-install-visual-studio.html

Selanjutnya dalam tutorial aplikasi WPF ini, kita akan membangun aplikasi WPF pertama kita.

Bagaimana Cara Membuat Aplikasi WPF pertama Anda?

Dalam contoh WPF ini, kita akan mengembangkan aplikasi WPF dasar. Jadi, mari kita mulai implementasi sederhana dengan mengikuti langkah-langkah yang diberikan dalam contoh aplikasi WPF di bawah ini.

Langkah 1) Di Visual Studio, buka File > Baru > Proyek.

Langkah 2) Di jendela proyek baru

1. Pilih Aplikasi WPF
2. Masukkan Nama sebagai “MyWPF”
3. klik OK

Langkah 3) Visual Studio membuat dua file secara default

• File XAML (Jendela Utama.xaml)
• File CS (Jendela Utama.xaml.cs)

MainWindow.xaml memiliki

1. Jendela Desain
2. Berkas XAML

Di jendela XAML, tag-tag berikut ditulis secara default:

Grid adalah elemen pertama secara default.

File MainWindow.xaml.cs berisi kode di belakang layar (code-behind) yang sesuai untuk file desain XAML:

Langkah 4) Di dalam kotak peralatan,

1. Seret TeksBox elemen ke jendela desain
2. Sebuah teksBox akan muncul di jendela desain
3. Anda akan melihat kode XAML untuk Teks tersebut.Box menambahkan

Langkah 5) Ubah teks menjadi “Program WPF Pertama.”

Langkah 6) Klik Tombol Mulai

Langkah 7) Anda akan melihat Jendela di output.

Selamat! Anda telah merancang dan membuat aplikasi WPF pertama Anda. Selanjutnya dalam tutorial WPF untuk pemula ini, kita akan melihat perbedaan antara WPF dan WinForms.

WPF vs.WinForms

WPF	WinForm
Ini adalah kerangka kerja yang lebih baru, sehingga lebih selaras dengan standar saat ini.	Ini lebih tua, jadi lebih banyak dicoba dan diuji.
Fleksibel dan kaya fitur. Anda dapat mendesain aplikasi yang sangat kompleks tanpa perlu coding atau membeli kontrol.	Tidak terlalu kaya fitur
Pengembang 3rd Kontrol pihak terkait difokuskan pada kompatibilitas dengan WPF karena itulah masa depan.	Ada banyak kontrol pihak ketiga yang bisa Anda beli atau dapatkan secara gratis.
XAML memungkinkan Anda membuat dan mengedit GUI dengan mudah. ​​Ini memungkinkan pembagian kerja antara perancang (XAML) dan pemrogram (C#, VB.NET, dll.).	In Windows Pada formulir, semua kode ditulis di satu tempat.
Keterampilan XAML dapat langsung diterapkan pada framework yang lebih baru seperti WinUI 3, .NET MAUI, dan Avalonia UI.	Keterampilan WinForms terutama berlaku untuk versi klasik. Windows pengembangan desktop.
Rangkaian kontrol dalam kotak WPF terbatas	Kontrol dalam kotak sangatlah kuat

Jenis Aplikasi yang dibangun dengan WPF

• WPF digunakan untuk aplikasi mandiri. Windows aplikasi desktop seperti perangkat lunak bisnis perusahaan, dasbor, terminal perdagangan, dan perangkat lunak desain
• Windows Formulir dan halaman WPF bisa hidup berdampingan dalam aplikasi yang sama
• Anda dapat mengembangkan aplikasi bergaya navigasi halaman/jendela.

WPF di .NET Modern

Microsoft WPF dirilis sebagai open source pada Desember 2018, dan sejak .NET Core 3.0 (2019) framework ini telah disertakan dalam setiap rilis .NET modern, hingga dan termasuk .NET 10. Memindahkan aplikasi ke .NET modern menghadirkan waktu startup yang lebih cepat, penyebaran yang lebih sederhana melalui penerbitan mandiri, dan akses ke fitur bahasa C# terkini, sementara model pemrograman WPF tetap sama.

WPF tetap ada Windows-saja. Jika Anda memilih kerangka kerja desktop hari ini, perbandingan ini akan membantu:

Kerangka	terbaik Untuk
WPF	Dewasa, kaya fitur Windows aplikasi desktop dengan ekosistem yang sangat besar
Windows UI 3	Aplikasi baru yang menargetkan kebutuhan modern. Windows 11 tampilan dan nuansa
.NET MAUI	Aplikasi lintas platform yang mencakup Windows, macOS, Android, dan iOS

Karena WPF terus dikembangkan dan tertanam kuat dalam perangkat lunak perusahaan, mempelajarinya tetap merupakan investasi yang praktis. Setelah Anda merasa nyaman membangun aplikasi-aplikasi ini, ada baiknya mempraktikkan teknik-teknik yang paling umum digunakan. Pertanyaan wawancara WPF untuk mengunci konsep-konsep seperti XAML, pengikatan data, dan pohon visual.

Pertanyaan Umum Demo Slot