Antarmuka dan input pengguna

Artikel ini memberikan gambaran umum tentang kerangka kerja Windows UI yang saat ini dikelola oleh Microsoft dan membandingkan kemampuannya.

Microsoft menghasilkan kerangka kerja UI dan platform aplikasi. Platform aplikasi biasanya menyertakan kerangka kerja UI, sementara kerangka kerja UI mandiri (tidak dikirim dengan platform aplikasi) atau dapat digunakan dengan beberapa platform aplikasi (lihat Memilih platform aplikasi Anda).

Kerangka kerja yang dibahas di sini meliputi WinUI untuk SDK Aplikasi Windows (WinUI 3) dan UWP (WinUI 2), Windows Presentation Foundation (WPF), dan Formulir Windows (WinForms).

Dasar-dasar antarmuka pengguna

Saat membangun aplikasi Windows modern, Anda memiliki pilihan kerangka kerja UI untuk dipilih. Kerangka kerja UI memberi aplikasi Anda kontrol bawaan, gaya, animasi, penanganan input, dan banyak lagi.

Ada lima komponen utama yang masuk ke pembuatan antarmuka pengguna untuk aplikasi Windows Anda. Komponen-komponen ini biasanya dibangun ke dalam setiap kerangka kerja UI.

• Kontrol dan gaya

  • Kontrol adalah elemen UI yang menampilkan konten atau mengaktifkan interaksi. Kontrol adalah blok penyusun antarmuka pengguna.

    Berikut adalah contoh kontrol Tombol yang tersedia di UWP, WinUI 2, dan WinUI 3. Saat Anda menempatkan kontrol ini ke dalam aplikasi, kontrol ini secara otomatis menerima desain default yang disediakan kerangka kerja UI.

    

  • Gaya terdiri dari warna, tipografi, ikon, bahan Fasih, dan banyak lagi yang dapat digunakan di seluruh desain aplikasi Anda untuk menciptakan pengalaman yang benar-benar unik.

    Berikut adalah contoh komponen gaya yang disebut Acrylic, tersedia di WinUI 2 dan WinUI 3. Akrilik adalah kuas yang dapat Anda gunakan di permukaan dalam aplikasi Anda atau sebagai latar belakang aplikasi Anda. Ini menyediakan tekstur tembus.

    

• Input dan interaksi

  Pengguna akhir dapat berinteraksi dengan aplikasi Anda dan memberikan input ke aplikasi Anda (seperti pemilihan atau pengetikan) melalui metode yang berbeda. Beberapa contoh input adalah:

  • Mouse
  • Sentuh
  • Gamepad
  • Pena
  • Keyboard
  • Putar-putar Permukaan
  • Touchpad
  • Ucapan

• Dukungan perangkat

  Pengguna akhir mengakses aplikasi Windows di berbagai perangkat, dan kerangka kerja UI hanya dapat mendukung yang tertentu. Beberapa perangkat umum untuk aplikasi Windows yang akan dijalankan adalah:

  • PC (sering disebut sebagai "desktop", tetapi termasuk laptop juga)
  • Tablet
  • HoloLens
  • Xbox
  • Surface Hub

• Gerakan dan animasi

  Animasi bawaan benar-benar dapat memberi aplikasi Anda tampilan dan nuansa yang dipolihkan, dan memberikan konsistensi dengan aplikasi pihak pertama di seluruh Windows.

  Contoh animasi bawaan di UWP, WinUI 2, dan WinUI 3 adalah animasi yang terjadi ketika pengguna akhir beralih antara mode terang dan gelap. Ketika pengguna akhir beralih mode untuk seluruh PC mereka, UI aplikasi akan secara otomatis diperbarui serta dengan animasi transisi.

• Kegunaan dan aksesibilitas

  Untuk memastikan aplikasi Anda menyenangkan digunakan untuk setiap pengguna, Anda harus memperhitungkan aksesibilitas.

  Kerangka kerja UI menyediakan aksesibilitas bawaan ke kontrol dan gaya dengan perilaku keyboard yang sengaja, dukungan screenreader, dan banyak lagi. Banyak juga menyediakan API untuk tindakan yang dapat diakses dalam kontrol kustom, seperti berinteraksi dengan screenreader.

Kerangka kerja UI

Setiap kerangka kerja UI yang dirilis oleh Microsoft memiliki kemampuan unik, mengikuti bahasa desain yang berbeda, dan memberikan pengalaman yang berbeda kepada pengguna akhir. Bagian ini akan membandingkan semua kerangka kerja UI utama yang akan Anda pilih saat mulai membuat aplikasi.

Tabel di bawah ini memperlihatkan ringkasan singkat beberapa kemampuan utama antara kerangka kerja UI ini. Untuk detail selengkapnya tentang setiap kerangka kerja, navigasikan melalui tab lebih lanjut di bawah ini.

Kemampuan	SDK Aplikasi Windows (WinUI 3)	WinUI 2 untuk UWP	WPF	WinForms
Bahasa yang didukung	C#/.NET 6 dan yang lebih baru, C++/WinRT	C#/.NET Native, C++/WinRT, C++/CX, VB	C#/.NET 6 (dan yang lebih baru) dan .NET Framework, C++/CLI (Ekstensi Terkelola untuk C++), F#, VB	C#/.NET 6 (dan yang lebih baru) dan .NET Framework, C++/CLI (Ekstensi Terkelola untuk C++), F#, VB
Perangkat yang didukung	PC (termasuk laptop dan tablet), dukungan untuk semua perangkat Windows 10 segera hadir	Semua perangkat Windows 10 (PC, tablet, HoloLens, Xbox, Surface Dial, dan banyak lagi)	PC dan laptop desktop	PC dan laptop desktop
Input didukung	Semua input Windows 10 didukung	Semua input Windows 10 didukung	Mouse dan keyboard	Mouse dan keyboard
Versi OS Windows didukung	Windows 10 versi 1809 atau yang lebih baru	Windows 10 versi 1703 atau yang lebih baru	Windows XP atau yang lebih baru	Windows XP atau yang lebih baru
Dukungan WebView	WebView2 berbasis Chromium	WebView Non-kromium	Dukungan WebView2 segera hadir	Dukungan WebView2 segera hadir
Sumber Terbuka	Segera hadir	Ya	Ya (.NET 6 dan yang lebih baru saja)	Ya (.NET 6 dan yang lebih baru saja)

Untuk informasi selengkapnya tentang masing-masing kerangka kerja UI ini, lihat informasi pada tab berikut.

SDK Aplikasi Windows (WinUI 3)

SDK Aplikasi Windows (WinUI 3)

Untuk sebagian besar aplikasi Windows baru, kami sarankan WinUI dengan SDK Aplikasi Windows (WinUI 3) untuk membangun antarmuka pengguna Anda. WinUI 3 memberikan pengalaman yang konsisten, intuitif, dan dapat diakses menggunakan pola antarmuka pengguna (UI) terbaru.

WinUI 3 sepenuhnya dipisahkan dari OS Windows dan dikirim sebagai bagian dari SDK Aplikasi Windows, yang merupakan serangkaian alat dan komponen yang mewakili evolusi berikutnya di platform pengembangan aplikasi Windows.

WinUI 3 adalah generasi terbaru dari WinUI. WinUI 2 dan 3 memiliki banyak kontrol, gaya, dan dasar-dasar UI yang sama (lihat Perbandingan WinUI 2 dan WinUI 3).

Skenario aplikasi kunci diaktifkan oleh WinUI 3

• Aplikasi Windows modern yang perlu berjalan pada berbagai perangkat modern, dengan berbagai input modern
• Aplikasi Desktop/Win32 yang ditulis dalam C++
• Aplikasi atau game berat grafis yang ingin memanfaatkan DirectX dan Win2D
• Aplikasi dengan banyak konten web terintegrasi yang membutuhkan performa tinggi
• Aplikasi yang berusaha memberikan pengalaman yang "cocok dengan" pada OS Windows dan dengan aplikasi Windows pihak pertama lainnya

Dokumentasi bermanfaat untuk WinUI 3

• Ringkasan: WinUI 3
• Memulai: Membuat proyek WinUI 3 pertama Anda
• Menulis XAML: Platform XAML
• Referensi API: Referensi API WinUI
• Kontrol: Gambaran umum kontrol
• Input: Input dan interaksi
• Gerakan: Gerakan untuk aplikasi Windows
• Aksesibilitas: Kegunaan untuk aplikasi Windows
• Sampel: Aplikasi Galeri WinUI 3

WinUI 2 untuk UWP

WinUI 2 untuk UWP

Untuk sebagian besar aplikasi UWP, sebaiknya gunakan WinUI 2 untuk membangun antarmuka pengguna Anda. WinUI 2 adalah kerangka kerja UI mandiri yang dikirim dalam paket NuGet dan dapat dengan mudah ditambahkan ke aplikasi UWP apa pun untuk memodernisasi desain dan pengalaman keseluruhan.

WinUI 2 dan 3 memiliki banyak kontrol, gaya, dan dasar-dasar UI yang sama (lihat Perbandingan WinUI 2 dan WinUI 3).

Skenario aplikasi utama diaktifkan oleh WinUI 2

• Aplikasi UWP yang ingin bekerja downlevel ke semua versi Windows 10 dan Windows 11
• Aplikasi atau game berat grafis yang ingin memanfaatkan DirectX dan Win2D
• Aplikasi UWP yang perlu berjalan pada berbagai perangkat modern, dengan berbagai input modern
• Aplikasi yang berusaha memberikan pengalaman yang "cocok dengan" pada OS Windows dan dengan aplikasi Windows pihak pertama lainnya

Dokumentasi bermanfaat untuk WinUI 2

• Ringkasan: WinUI 2
• Memulai: Mulai menggunakan Pustaka Windows UI 2.x
• Menulis XAML: Platform XAML
• Referensi API: Referensi API WinUI
• Kontrol: Gambaran umum kontrol
• Input: Input dan interaksi
• Gerakan: Gerakan untuk aplikasi Windows
• Aksesibilitas: Kegunaan untuk aplikasi Windows
• Sampel: Aplikasi Galeri WinUI 2

WPF

WPF

Windows Presentation Framework (WPF) adalah model aplikasi untuk membangun aplikasi desktop dengan kerangka kerja .NET 6 (dan yang lebih baru) atau .NET. Ini adalah platform sumber terbuka yang dikelola oleh tim Windows dan .NET.

Kerangka kerja UI yang dikirim dalam WPF menyediakan kontrol, gaya, dan kemampuan yang didukung downlevel melalui Windows XP.

Skenario aplikasi utama diaktifkan oleh WPF

• Aplikasi yang perlu berjalan downlevel ke versi Windows sebelumnya Windows 10
• Aplikasi yang hanya berjalan pada PC, dan tidak memerlukan berbagai input seperti sentuhan
• Aplikasi yang membutuhkan kontrol bawaan yang lebih kompleks: WPF memiliki serangkaian kontrol bawaan terbesar yang tersedia untuk pengembangan Windows

Dokumentasi bermanfaat untuk WPF

• Gambaran Umum: Panduan Desktop (WPF .NET)
• Memulai: Tutorial: Membuat aplikasi WPF baru
• Menulis XAML: Gambaran Umum XAML (WPF .NET)
• Referensi API: Referensi .NET API
• Kontrol: Kontrol (WPF)
• Input: Input (WPF)
• Gerakan: Gambaran umum animasi
• Aksesibilitas: Praktik terbaik aksesibilitas
• Sampel: Repositori GitHub Sampel WPF

Formulir Windows

Formulir Windows

Formulir Windows menyediakan Visual Studio Designer bawaan yang unik untuk membangun aplikasi .NET desktop. Dengan Perancang, Anda membangun antarmuka pengguna dengan menyeret dan menghilangkan kontrol bawaan langsung ke UI aplikasi Anda.

Formulir Windows adalah proyek sumber terbuka.

Perhatikan bahwa Formulir Windows tidak memiliki animasi bawaan, tidak seperti kerangka kerja UI lain yang disebutkan dalam artikel ini. Ini juga tidak mendukung markup XAML - Anda harus menggunakan Perancang atau kode untuk membuat UI aplikasi Anda.

Skenario aplikasi utama diaktifkan oleh Formulir Windows

• Pengembang atau desainer yang ingin membangun aplikasi tanpa mengetahui atau menulis XAML
• Aplikasi yang perlu berjalan downlevel ke versi Windows sebelumnya Windows 10
• Aplikasi yang hanya berjalan pada PC, dan tidak memerlukan berbagai input seperti sentuhan
• Aplikasi yang tidak ingin membuat kontrol kustom atau UI yang sangat kustom

Dokumentasi bermanfaat untuk Formulir Windows

• Gambaran Umum: Panduan Desktop (Formulir Windows .NET)
• Memulai: Tutorial: Membuat aplikasi WinForms baru (Formulir Windows .NET)
• Referensi API: Referensi .NET API
• Kontrol: Gambaran umum penggunaan kontrol (Formulir Windows .NET)
• Input: Input pengguna (Formulir Windows)
• Aksesibilitas: Aksesibilitas Formulir Windows
• Sampel: Repositori GitHub Sampel Winforms

Lainnya

Lainnya

Ada beberapa kerangka kerja UI yang belum dibahas dalam artikel ini, termasuk Win32/ComCtl32 dan MFC. Meskipun kerangka kerja UI ini masih tersedia untuk digunakan, kerangka kerja tersebut tidak dikelola secara teratur dan tidak memenuhi standar aksesibilitas dan desain yang sama dengan yang disediakan Windows saat ini. Disarankan agar Anda menggunakan kerangka kerja yang lebih modern saat membuat aplikasi Windows baru.

Jika Anda ingin mempelajari tentang memodernisasi aplikasi yang menggunakan kerangka kerja UI yang lebih lama, lihat Memodernisasi aplikasi desktop Anda.

Untuk informasi selengkapnya tentang kerangka kerja UI ini, lihat dokumentasi berikut ini:

• Gambaran Umum MFC
• Win32/ComCtl32