Sunday, 6 November 2016

Membuat Form Material Design di WPF Application Vb.NET

  No comments


Pastinya teman semua pernah merasa bosan dengan tampilan form yang klasik, ditambah button yang kaku dengan bentuk kotak pada saat membangun sebuah aplikasi di vb.net, dan teman merasa ingin membuat design yang modern yang mengikuti jaman seperti material design ala Google.  Pada kesempatan kali ini saya akan membuat tutorial sederhana tentang Membuat Form Material Design di WPF Application Vb.NET

Berikut langkah-langkahnya

1. Buka Visual Studio, klik File-New-Project Lalu pilih Visual basic-WPF Application dan beri nama.


2. Pada toolbar pilih Tools-NuGet Package Manager-Manages NuGet Package Manager for Solution..


3. Pada tab Browse cari "MaterialDesignThemes" lalu install


4. Selanjutnya Pada Solution Explorer double klik Application.xaml tambahkan kode di bawah <Application.Resources>

<ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>



5. Double klik juga pada MainWindow.xaml dan tambahkan kode di bawah ini

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"


6. Kembali ke form design MainWindow.xaml. Coba teman tambahkan sebuah button, jika hasil nya seperti gambar dibawah ini berarti teman sudah siap mendesgin form Material Design Ala google. Selanjutnya terserah teman semua. Selesai :)


Berikut ini contoh hasil form login dengan material design


Untuk documentation lebih lanjut teman semua bisa kunjungi Disini




No comments :

Post a Comment

Pesan untuk komentar