Saya membuat library yang memungkinkan UI aplikasi saya tampil di taskbar Windows 11

(github.com/airtaxi)

2 poin oleh kck4156 5 jam lalu | 2 komentar | Bagikan ke WhatsApp

Baru-baru ini saya merilis sebuah library yang memungkinkan UI aplikasi disisipkan langsung ke dalam taskbar Windows 11. Namanya Deskband11Lib, dan jika diinstal lewat NuGet, Anda bisa membuat aplikasi WinUI 3 atau WPF menjadi widget taskbar.

Saya akan lanjut menjelaskan kenapa saya membuatnya, bagaimana cara kerjanya, dan sampai widget PoC yang benar-benar saya daftarkan ke Store.

Latar belakang: deskband yang hilang di Windows 11

Sampai Windows 10, ada fitur Deskbands yang menampilkan toolbar kecil di taskbar. Saat beralih ke Windows 11, fitur ini dihapus sepenuhnya. Bagi yang ingin menaruh “widget kecil yang selalu tampil” seperti kontrol media, monitor sistem, atau peluncur cepat di taskbar, ini adalah perubahan yang cukup disayangkan.

Inspirasi: Deskband11 dari zadjii

Beberapa waktu lalu saya melihat zadjii/Deskband11 di GitHub, dan pendekatan intinya benar-benar keren.

Meletakkan sebuah jendela WinUI 3 transparan di atas taskbar, menjadikan jendela itu sebagai child HWND dari taskbar dengan SetParent, lalu menetapkan area clip sesuai ukuran konten agar terlihat seperti bagian dari taskbar.

Pada akhirnya ini “hanya jendela yang melayang di atas taskbar”, tetapi idenya sangat cerdas. Namun, proyek aslinya sendiri menyebutnya sebagai “kode sekelas hackathon”, dan ada beberapa kekurangan jika ingin dipakai di produk nyata.

Jadi saya membuatnya menjadi library

Karena idenya terlalu sayang untuk dilewatkan, saya menulis ulang menjadi library agar siapa pun bisa memakainya hanya dengan satu baris dotnet add package.

GitHub: https://github.com/airtaxi/Deskband11Lib
NuGet: Deskband11Lib.WinUI / Deskband11Lib.Wpf

Cara pakainya sederhana

Buat satu jendela WinUI 3 lalu berikan ke TaskbarContentHost, selesai.

var window = new MainWindow();  
var host = new TaskbarContentHost(window, rootElement, new TaskbarContentHostOptions  
{  
    PreferredWidth = 360,  
    PreferredHeight = 48  
});  
  
await host.AttachWhenLayoutReadyAsync();  
window.Activate();

Di WPF, API-nya juga hampir sama. Library ini akan menangani sendiri deteksi perataan taskbar (kiri/tengah), pencegahan tumpang tindih dengan tombol Start dan area notifikasi, pemulihan saat Explorer di-restart, hingga animasi perubahan layout.

Butuh waktu cukup lama agar semuanya benar-benar bekerja

Saat saya menjalankan kode aslinya apa adanya, memang bisa berjalan, tetapi posisi dan ukuran jendelanya jadi aneh. Karena kode aslinya dibuat saat hackathon, awalnya sulit memastikan apakah ini karena implementasi taskbar Windows 11 berubah setelah pembaruan, atau memang kodenya sendiri dari awal sudah meleset. Keduanya mungkin saja jadi penyebab, jadi satu-satunya cara adalah membongkar bagian taskbar satu per satu dan memeriksa langsung bagaimana semuanya benar-benar terdeteksi di build Windows saat ini. Selain itu, versi asli sama sekali tidak mempertimbangkan kasus tombol Start berada di tengah atau elemen seperti tombol widget, jadi saat dijadikan library ada banyak hal baru yang perlu diperhatikan.

Karena itu, dari proyek asli saya hanya mengambil referensi cara penggunaan UI Automation dan beberapa Win32 API untuk menentukan ukuran/posisi jendela, sementara logika perhitungan ruang kosongnya sendiri saya tulis ulang dari nol. Saya harus membaca posisi tombol Start, grup tombol aplikasi taskbar, tombol widget, dan area notifikasi untuk menghitung ruang yang tersisa, dan posisi ruang kosong ini juga berubah tergantung apakah taskbar diratakan ke kiri atau ke tengah, jadi bagian seperti ini juga perlu dipertimbangkan kembali.

Saya benar-benar membuat satu aplikasi dan mengunggahnya ke Store: BarPlay

Saya ingin memastikan library ini benar-benar layak dipakai, jadi saya membuat satu aplikasi dengan library ini lalu mendaftarkannya ke Microsoft Store. Namanya BarPlay.

Ini adalah widget yang menampilkan thumbnail, judul, dan kontrol media yang sedang diputar langsung di taskbar. Semua aplikasi yang mendukung Windows System Media Transport Controls (SMTC), seperti Spotify, browser, dan aplikasi YouTube PWA, dapat bekerja dengannya. Aplikasi ini dikompilasi dengan NativeAOT untuk meminimalkan kecepatan startup dan penggunaan sumber daya.

Link aplikasi Microsoft Store

Saya sempat memperkenalkannya lebih dulu ke beberapa kenalan di sekitar saya, dan tanggapannya cukup bagus.

Bisa dipakai untuk apa

Konten yang dibuat dengan WinUI 3 atau WPF bisa ditempatkan di area yang selalu terlihat tanpa harus membuka jendela terpisah. Anda bisa membayangkan penggunaan seperti timer, kontrol pemutaran media (seperti BarPlay), status build atau notifikasi CI, monitor sistem, peluncur cepat atau pergantian akun, hingga indikator notifikasi.

Karena Anda bisa membawa kontrol dan gaya aplikasi sendiri secara utuh ke taskbar, menurut saya ini adalah hampir satu-satunya library .NET yang memungkinkan pengalaman seperti ini diwujudkan di Windows 11 setelah deskband menghilang.

Kumpulan tautan

Berlisensi MIT, dan Anda bisa mulai dengan menyalin proyek sampel (Deskband11Lib.WinUI.Sample, Deskband11Lib.Wpf.Sample). Feedback, issue, dan PR semuanya sangat diterima. Kalau Anda membuat widget taskbar yang menarik, kabari saya.

2 komentar

turtlehwan 4 jam lalu

Wah, idenya bagus banget

kck4156 4 jam lalu

Terima kasih! Sebenarnya saya hanya menjadikannya sebagai library, dan menurut saya ini berkat ide dari orang yang awalnya membuatnya.. hehe