Sign in Subscribe

Membuat Aplikasi Desktop C# Modern dengan Gaya Fluent Design Terbaru

Angga Pixa

Angga Pixa

— 3 min read
Membuat Aplikasi Desktop C# Modern dengan Gaya Fluent Design Terbaru
Photo by Edwin Yang/Unsplash

C# emang udah jadi bahasa pemrograman andalan buat bikin aplikasi desktop. Tapi, jujur aja, tampilan aplikasi C# kadang-kadang keliatan agak... ketinggalan zaman. Nah, gimana caranya biar aplikasi C# kita keliatan modern, keren, dan bikin betah penggunanya? Jawabannya: Fluent Design System!

Fluent Design System itu kayak seperangkat alat yang dikasih Microsoft buat bikin tampilan aplikasi yang lebih hidup, responsif, dan enak dilihat. Bayangin aja, aplikasi kamu nggak cuma fungsional, tapi juga cantik!

Kenapa Fluent Design Penting?

Gini deh, di era digital sekarang, orang makin picky soal tampilan. Aplikasi yang tampilannya kaku dan jadul, ya ditinggalin. Fluent Design hadir buat ngasih pengalaman yang lebih menyenangkan. Beberapa keuntungannya:

  • Tampilan Lebih Menarik: Dengan efek blur, cahaya, dan kedalaman, aplikasi jadi lebih hidup dan nggak ngebosenin.
  • User Experience Lebih Baik: Animasi yang halus dan transisi yang mulus bikin navigasi jadi lebih intuitif dan mudah.
  • Branding yang Kuat: Tampilan yang konsisten dengan Fluent Design bikin aplikasi kamu keliatan lebih profesional dan terpercaya.
  • Adaptif: Fluent Design dirancang buat bekerja di berbagai ukuran layar dan perangkat, dari desktop sampe tablet.

Yuk, Mulai Bikin Aplikasi C# Modern dengan Fluent Design!

Oke, sekarang kita langsung terjun ke caranya. Ada beberapa hal yang perlu kita siapin:

  1. Visual Studio: Udah pasti, ini IDE (Integrated Development Environment) andalan kita buat ngoding C#. Pastiin kamu udah install versi terbaru.
  2. .NET SDK: Versi .NET SDK terbaru bakal ngasih kita fitur dan performa yang paling oke.
  3. Windows UI Library (WinUI): Nah, ini dia bintangnya! WinUI itu kayak kumpulan kontrol UI modern yang dibangun dengan Fluent Design. Kita bakal pakai ini buat bikin tampilan aplikasi kita.

Langkah-Langkahnya:

  1. Bikin Project Baru:

* Buka Visual Studio, pilih "Create a new project". * Cari template "Blank App (WinUI 3 in Desktop)". Pastiin kamu pilih yang WinUI 3 ya, karena ini versi terbaru dan paling recommended. * Kasih nama project kamu, misalnya "MyFluentApp". * Klik "Create".

  1. Install NuGet Packages:

* Klik kanan di project kamu di Solution Explorer. * Pilih "Manage NuGet Packages...". * Di tab "Browse", cari "Microsoft.UI.Xaml". * Install package tersebut. Ini penting banget buat nambahin kontrol WinUI ke project kita. * Ulangi langkah ini buat install package "CommunityToolkit.Mvvm". Package ini bakal bantu kita dalam implementasi arsitektur MVVM (Model-View-ViewModel), yang bikin kode kita lebih rapi dan mudah di-maintain.

  1. Modifikasi App.xaml:

* Buka file App.xaml di project kamu. * Tambahin resource dictionary WinUI di dalam tag :

xml

* Ini penting biar aplikasi kita tahu cara pakai kontrol WinUI.

  1. Edit MainWindow.xaml:

* Buka file MainWindow.xaml. Ini tempat kita bakal mendesain tampilan utama aplikasi kita. * Ganti konten default dengan kontrol WinUI yang lebih modern. Misalnya, ganti dengan . * Tambahin beberapa kontrol, contohnya:

xml
  1. Handle Event di MainWindow.xaml.cs:

* Buka file MainWindow.xaml.cs. * Tambahin kode buat handle event Click dari button:

csharp
        private void MyButton_Click(object sender, RoutedEventArgs e)
        {
            if (sender is Button button)
            {
                greetingOutput.Text = $"Hello, {nameInput.Text}!";
            }
        }

* Jangan lupa tambahin deklarasi TextBox bernama nameInput di class MainWindow:

csharp
        private TextBox nameInput;

* Dan inisialisasi nameInput di constructor MainWindow:

csharp
        public MainWindow()
        {
            this.InitializeComponent();
            nameInput = this.FindName("Your Name") as TextBox; // Pastikan "Your Name" sesuai dengan Header TextBox
        }
  1. Jalankan Aplikasi:

* Tekan Ctrl+F5 buat nge-build dan jalanin aplikasi kamu. * Voila! Kamu udah punya aplikasi C# dengan tampilan Fluent Design yang sederhana.

Tips Tambahan Biar Makin Keren:

  • Acrylic Material: Bikin background control kamu jadi transparan dan blur dengan Background="{ThemeResource SystemControlAcrylicWindowBrush}". Ini bakal nambahin kesan mewah.
  • Reveal Highlight: Tambahin efek highlight saat mouse hover di atas control dengan IsTapEnabled="True" UseSystemFocusVisuals="True". Ini bikin interaksi jadi lebih interaktif.
  • Icons: Pakai ikon dari Segoe Fluent Icons buat nambahin visual appeal. Kamu bisa cari ikon yang cocok di internet dan tambahin ke project kamu.
  • Themeing: Dukung dark mode dan light mode biar pengguna bisa milih tema yang mereka suka. Gunain ThemeSettingsService buat ngatur tema aplikasi. (Cari tutorialnya di internet, banyak kok!)
  • MVVM: Gunain arsitektur MVVM biar kode kamu lebih terstruktur dan mudah di-maintain. Ini penting banget buat project yang lebih besar.
  • Adaptive Layout: Desain tampilan yang responsif biar aplikasi kamu tetep oke di berbagai ukuran layar. Gunain RelativePanel atau Grid buat ngatur layout.

Lebih Dalam Soal WinUI 3:

WinUI 3 itu kayak "mainan" baru buat para developer C#. Dibandingin WPF atau UWP, WinUI 3 punya beberapa keunggulan:

  • Performa Lebih Baik: WinUI 3 dibangun dengan fokus pada performa, jadi aplikasi kamu bakal lebih responsif.
  • Kontrol UI Modern: WinUI 3 ngasih kita akses ke kontrol UI terbaru dengan Fluent Design, kayak NavigationView, PipsPager, dan masih banyak lagi.
  • Independen dari Windows: Aplikasi WinUI 3 bisa dijalankan di berbagai versi Windows, nggak cuma versi terbaru.

Contoh Kode Lebih Kompleks:

Misalnya, kita mau bikin tampilan navigasi dengan NavigationView. Berikut contoh kodenya di MainWindow.xaml:

xml

Terus, di MainWindow.xaml.cs, kita handle event SelectionChanged dari NavigationView buat nampilin konten yang sesuai:

csharp
private void NavigationView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
    if (args.SelectedItemContainer is NavigationViewItem selectedItem)
    {
        string tag = selectedItem.Tag.ToString();
        switch (tag)
        {
            case "home":
                ContentFrame.Navigate(typeof(HomePage));
                break;
            case "settings":
                ContentFrame.Navigate(typeof(SettingsPage));
                break;
        }
    }
}

Jangan lupa bikin HomePage.xaml dan SettingsPage.xaml buat konten masing-masing halaman.

Kesimpulan:

Bikin aplikasi desktop C# modern dengan Fluent Design itu nggak sesulit yang dibayangin. Dengan WinUI 3, kita bisa bikin tampilan aplikasi yang lebih menarik, responsif, dan user-friendly. Jangan takut buat bereksperimen dan coba berbagai kontrol UI yang ada. Yang penting, terus belajar dan ikutin perkembangan teknologi terbaru. Selamat ngoding!

Read more