Berkenalan Dengan Wpf

Apa itu WPF? Minimal itu pertanyaan pertama yang timbul di kepala saya ketika pertama mendengarnya. WPF yang merupakan abreviasi dari Windows Presentation Foundation yakni pendekatan terbaru Microsoft kepada kerangka kerja GUI. WPF ini digunakan serentak dengan .NET Framework. GUI sendiri merupakan akronim Graphical User Interface yang memiliki arti antarmuka pengguna secara grafis. Dengan kata lain tampilan aplikasi atau web yang pribadi dipakai user untuk berinteraksi. Perbedaan Windows Form (WinForm) dan WPF Perbedaan utamanya yakni ketika menyertakan control pada winform kita tinggal memilih dan memposisikan pada container nya. Sementara pada WPF kita mesti mendefinisikan sendiri dengan XAML. XAML (eXtensible Application Markup Language) merupakan kombinasi XML milik Microsoft untuk mendeskripsikan GUI. Kesan pertama saya mengenal WPF adalah "coding windows app rasa HTML". Kenapa? Karena untuk membuat UI dan menyertakan sebuah control kita memakai tag dalam kurung sudut mirip HTML. Di satu sisi WPF tampaklebih ribet alasannya harus menciptakan UI dengan code manual. Tapi di sisi lain kita mendapatkan kelonggaran untuk memodifikasi control sesuai keperluan. Untuk lebih jelasnya mari kita lihat keunggulan masing-masing. Kelebihan Menggunakan WPF: Teknologi lebih baru dan cocok dengan persyaratan terkini. Microsoft juga menggunakan WPF untuk banyak aplikasi terbarunya (misalnya: Visual Studio) Lebih fleksible, dapat melakukan lebih banyak tanpa mesti menulis ataupun berbelanja kontrol gres. Pengembang kontrol pihak ketiga akan lebih berkonsentrasi pada WPF alasannya ialah teknologi yang lebih gres. XAML mempermudah kita dalam membuat dan mengedit GUI, serta memungkinkan pekerjaan untuk dipisah antara desainer (XAML) dan programmer (C#, VB.NET, dll). Istilah sekarang Front-End dan Back-End gitu. Databinding memungkinkan kita lebih higienis dalam memisahkan antara data dan layout. Memungkinkan kita menciptakan UI untuk aplikasi windows maupun aplikasi web. (Silverlight/XBAP) Kelebihan Menggunakan Windows Form: Teknologi yang lebih dulu muncul jadi sudah banyak dicoba dan teruji. Sudah terdapat banyak kontrol pihak ketiga baik yang gratis maupun berbayar. Designer di Visual Studio masih lebih tenteram untuk menulis WinForms daripada WPF, alasannya adalah dengan WPF lebih banyak hal yang mesti dijalankan. Semoga dengan uraian diatas mampu menolong kalian lebih mengerti WPF dan mengambil keputusan untuk membuat aplikasi dengan WinForm atau WPF.
Sumber http://rani-irsan.blogspot.com

Wpf C#: Menciptakan Aplikasi Pertama Hello World!

Meskipun WPF bisa ditulis menggunakan notepad dan dicompile dengan command prompt. Tapi Rani ga bakal pilih cara itu lah hehe... Seperti kebanyakan coder lainnya mungkin lebih memilih IDE Visual Studio Community dari Microsoft yang dapat diunduh gratis di: https://www.visualstudio.com/vs/community/ Setelah download dan Install, kita siap belajar membuat aplikasi WPF pertama kita. Rani pakai versi Visual Studio Community 2017. Untuk membuat project baru klik File -> New -> Project .... Kemudian pada New Project dialog, pilih Visual C# -> Windows Desktop -> WPF App (.NET Framework) Kemudian beri nama project (rani kasih nama HelloWPF) kemudian pilih lokasi penyimpanan. Centang Create directory for solution supaya penyimpanan solution file masuk ke dalam 1 folder. Kita bisa bebas memilih framework yang tersedia, Rani pilih terbaru yang ada di list yaitu 4.5.1. Terakhir klik  OK . Tampilan awal project akan seperti berikut: Step yang ini tergantung preferensi temen-temen yah, klo rani lebih suka tampilan ful yang bisa di switch antara design dan XAML. Jadi rani tarik bordernya seperti gambar di bawah. Hasilnya seperti berikut, switch design dan XAML ada di bagian bawah. Kita akan membuat aplikasi pertama yang sangat mainstream, yaitu "Hello World!". Teks ini akan kita buat menggunakan TextBlock. Code-nya sebagai berikut: Window x : Class ="HelloWPF.MainWindow"         xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns : d= "http://schemas.microsoft.com/expression/blend/2008"          xmlns : mc= "http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns : local ="clr-namespace:HelloWPF"         mc : Ignorable ="d"         Title ="MainWindow" Height ="450" Width ="800">      Grid >         TextBlock HorizontalAlignment = "Center" VerticalAlignment ="Center" FontSize ="48">             Hello World!         TextBlock >      / Grid > / Window > Code yang rani beri highlight kuning ialah embel-embel/pergeseran. Kemudian kita coba running program dan balasannya selaku berikut:
Sumber http://rani-irsan.blogspot.com

Bekerja Dengan App.Xaml

Ketika kita membuat aplikasi kita memulainya di App.xaml, Visual Studio akan otomatis membuatnya saat kita membuat project WPF baru termasuk code-behind yang bernama App.xaml.cs. Penggunaan yang paling umum file App.xaml untuk menyimpan resource yang perlu diakses secara global. App.xaml.cs merupakan perluasan class aplikasi yang merupakan kelas pusat pada aplikasi WPF. Class ini juga yang memuat instruksi awal dan menentukan window mana yang akan duluan muncul. Disini juga event-event aplikasi seperti application start dan unhandled exceptions berada. App.xaml juga memuat pengaturan StartupUri yang digunakan untuk menentukan window mana yang akan dimuat pertama aplikasi dijalankan. Secara default akan mengarah ke MainWindow.xaml, tapi kita bisa dengan mudah menggantinya. Sebagai contoh kita akan membuat sebuah window baru bernama Window1.xaml yang akan kita jadikan sebagai window startup. Di solution explorer, klik kanan diatas node nama project -> Add -> Window... Pilih WPF -> Window (WPF) -> Beri Nama -> Klik Add Untuk nama, rani buat seadanya aja Window1.xaml. Kemudian sedikit mengubah code untuk membedakan dengan tampilan MainWindow.xaml (highlight kuning) Lalu kita buat StartupUri ke window yang baru saja kita buat. Coba run applikasi. Kita juga dapat mendefinisikan Startup untuk menambahkan procedure saat aplikasi mulai berjalan, dengan cara menuliskan code seperti highlight kunin di bawah. Klik kanan -> Go To Definition untuk men-generate code otomatis di file .cs Hasilnya mirip gambar di bawah: Sebagai acuan kita akan memindahkan procedure untuk membuat window1 selaku startup window ke  Application_Startup dan mengubah title window dengan code seperti berikut: using System; using   System.Collections.Generic; using   System.Configuration; using   System.Data; using   System.Linq; using   System.Threading.Tasks; using System.Windows; namespace HelloWPF     ///      ///   Interaction logic for App.xaml     ///     public partial class App : Application             private void Application_Startup( object sender, StartupEventArgs e)                     // membuat startup window             Window1 wind = new  Window1 ();             // kita bisa tambahkan procedure lain             wind.Title = "Renamed Title" ;                         // panggil windows dengan .Show()             wind.Show();             Supaya tidak gesekan, StartupUri kita hapus. Coba run aplikasi!
Sumber http://rani-irsan.blogspot.com

Wpf C#: Textblock Control

Meskipun TextBlock tidak mewarisi class Control, tapi penggunaannya mirip-mirip control. Jadi simple nya kita sebut control aja ya. TextBlock merupakan salah satu control paling mendasar dalam WPF yang sangat bermanfaat. Seperti label dengan TextBlock kita bisa menuliskan teks di layar dengan cara yang lebih sederhana. Jika pada label kita hanya bisa menampilkan teks satu baris (tapi bisa memuat gambar), sementara TextBlock walau hanya memuat teks (string) saja tami mampu menampilkan dalam beberapa baris (multiline). Keduanya memiliki kelebihan masing-masing tinggal penggunaannya disesuaikan dengan kebutuhan. Kita memang sudah pernah coba menggunakannya di aplikasi "Hello World!", tapi ayo kita coba lagi mulai dari yang paling sederhana. Window x : Class ="HelloWPF.Window1"         xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns : d ="http://schemas.microsoft.com/expression/blend/2008"          xmlns : mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns : local ="clr-namespace:HelloWPF"         mc : Ignorable ="d"         Title ="Window1" Height ="150" Width ="500">      Grid >         TextBlock >Teks ini menggunakan TextBlock TextBlock >     Grid > Window > Hasilnya: Menambahkan Margin Window  x : Class ="HelloWPF.Window1"          xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns : d ="http://schemas.microsoft.com/expression/blend/2008"          xmlns : mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"          xmlns : local ="clr-namespace:HelloWPF"          mc : Ignorable ="d"          Title ="Window1"   Height ="150"   Width ="500">      Grid >         TextBlock  Margin ="10" >Teks ini menggunakan TextBlock TextBlock >      Grid > Window > Hasilnya: TextBlock dengan Teks yang Panjang Kemudian kita akan melihat beberapa cara TextBlock menangani teks yang panjang. Window  x : Class ="HelloWPF.Window1"        xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"        xmlns : d ="http://schemas.microsoft.com/expression/blend/2008"        xmlns : mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"        xmlns : local ="clr-namespace:HelloWPF"        mc : Ignorable ="d"        Title ="Window1"   Height ="150"   Width ="500">    Grid >        StackPanel Margin ="20">           TextBlock Margin ="5" Foreground ="Red">           Ini adalah contoh TextBlock untuk menangani LineBreak />   teks panjang dengan "Line Break".           TextBlock >           TextBlock Margin ="5" TextTrimming ="CharacterEllipsis" Foreground ="Green">   Menggunakan elipsis (titik tiga) untuk mempersingkat teks yang kepanjangan.           TextBlock >           TextBlock Margin ="5" TextWrapping ="Wrap" Foreground ="Blue">   Teks akan otomatis pindah ke bawah (multiline) jika kepanjangan karena property            TextWrapping.            TextBlock >       StackPanel >   Grid > Window > Hasilnya: Bold, Italic dan Underline Formating cetak tebal, miring, dan garis bawah langsung di baris teks. Window  x : Class ="HelloWPF.Window1"          xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns : d ="http://schemas.microsoft.com/expression/blend/2008"          xmlns : mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"          xmlns : local ="clr-namespace:HelloWPF"          mc : Ignorable ="d"          Title ="Window1"   Height ="150"   Width ="500">      Grid >         TextBlock Margin ="20" TextWrapping ="Wrap"> TextBlock dengan format teks Bold > Cetak Tebal Bold > , Italic > Cetak Miring Italic >          dan  Underline > Garis Bawah Underline > yang diformat langsung dalam          baris teks bersangkutan.         TextBlock >      Grid > Window > Hasilnya: Span Seperti saya bilang sebelumnya, ini berasa seperti HTML. Dalam TextBlock kita dapat menyisipkan span untuk kerperluan tampilan seperti font-size, style, weight, warna background, warna foreground, dll. Selain itu di dalam span kita tetap bisa menyisipkan elemen inline. Untuk lebih jelasnya mari kita lihat contoh di bawah. Window  x : Class ="HelloWPF.Window1"          xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns : d ="http://schemas.microsoft.com/expression/blend/2008"          xmlns : mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"          xmlns : local ="clr-namespace:HelloWPF"          mc : Ignorable ="d"          Title ="Window1"   Height ="150"   Width ="500">      Grid >          TextBlock Margin ="15" TextWrapping ="Wrap">     Ini Span FontWeight ="Bold"> merupakan Span > sebuah     Span Background ="Silver" Foreground ="Maroon"> TextBlock Span >     dengan Span TextDecorations ="Underline"> beberapa     Span FontStyle ="Italic"> elemen span,     Span Foreground ="Blue">     menggunakan Bold > beberapa Bold > macam Italic > style Italic >     .              Grid > Window > Hasilnya: Format TextBlock dengan C# dari Code-Behind (Kode belakang) Untuk melihat cara kerjanya kita bersihkan dulu code XAML menjadi seperti berikut: Window  x : Class ="HelloWPF.Window1"          xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns : x ="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns : d ="http://schemas.microsoft.com/expression/blend/2008"          xmlns : mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"          xmlns : local ="clr-namespace:HelloWPF"          mc : Ignorable ="d"          Title ="Window1"   Height ="150"   Width ="500">      Grid >      Grid > Window > Kemudian kita ubah isyarat di belakang nya pada Window1.xaml.cs menjadi sebagai berikut: using System; using   System.Collections.Generic; using   System.Linq; using   System.Text; using   System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using   System.Windows.Data; using System.Windows.Documents; using   System.Windows.Input; using System.Windows.Media; using   System.Windows.Media.Imaging; using   System.Windows.Shapes; namespace HelloWPF     ///     /// Interaction logic for Window1.xaml     ///     public partial class Window1 : Window             public Window1()                     InitializeComponent();             TextBlock tb = new TextBlock ();             tb.TextWrapping = TextWrapping .Wrap;             tb.Margin = new Thickness (15);             tb.Inlines.Add( "Sebuah acuan " );             tb.Inlines.Add( new  Run ( "kendali TextBlock " ) FontWeight = FontWeights .Bold );             tb.Inlines.Add( "menggunakan " );             tb.Inlines.Add( new  Run ( "format teks " ) FontStyle = FontStyles .Italic );             tb.Inlines.Add( new  Run ( "inline " ) Foreground = Brushes .Blue );             tb.Inlines.Add( "dengan C# " );             tb.Inlines.Add( new  Run ( "dari arahan belakang" )                            TextDecorations = TextDecorations .Underline );             tb.Inlines.Add( "." );             this.Content = tb;             Hasilnya:
Sumber http://rani-irsan.blogspot.com