Apa itu WPF?? Apa itu Windows Presentation Foundation?? Pernahkah anda mendengarnya?? Bila anda programmer Visual Studio pasti selalu melihat/membaca/bersentuhan dengan WPF ini. Dalam bahasa Visual C++ kita mengenal ‘GUI Framework’ seperti MFC (Microsoft Foundation Class), nah, WPF ini kita kenal dalam bahasa Visual C# dan Visual Basic. Baik MFC maupun WPF merupakan sebuah UI atau Template atau Layout, atau kalau saya pribadi lebih suka menyebutnya sebagai framework, ya, framework yang berjalan di dalam framework .NET. Microsoft memang sangat kreatif menciptakan beragam teknologi yang dapat dipilih developer untuk berkreasi dengan program buatannya sendiri.
WPF merupakan kepanjangan dari Windows Presentation Foundation. Sebuah teknologi lain dari Komunitas Visual Studio yang memberikan sebuah pilihan kepada developer untuk user interfacenya. Teknologi yang unik ini tersusun dari tag-tag XAML (Extensible Application Markup Language). Teknologi WPF ini merupakan terknologi GUI Framework terbaru dari Microsoft untuk .NET Framework dan Microsoft pun juga banyak sekali membuat software dengan teknologi ini termasuk Visual Studio. Anda dapat menggunakan WPF ini untuk Windows Aplication maupun Web Aplication (Silverlight).
Dengan menggunakan teknologi ini anda dapat mensetting tampilan program aplikasi anda dari XAML sedangkan untuk logic nya (code-behind) anda dapatmenggunakan bahasa visual studio (c#, Visual basic). Jadi merupakan kombinasi yang sangat bagus, akan jauh lebih mudah dimengerti bila anda juga familiar dengan asp.net. Dan yang lebih mengagumkan, XAML itu sangat mudah dimengerti, mudah dipahami. Sehingga teknologi ini sangat mempermudah untuk pengguna baik yang baru dalam pemrograman visual maupun yang telah mahir untuk efisiensi design dan waktu dalam pembuatan aplikasi
WPF Merupakan sebuah rich framework yang tidak akan bisa habis bila kita bahas. Penjelasan saya di atas sudah lebih dari cukup untuk menjelaskan apa itu WPF (Windows Presentation Foundation). Mungkin perlu saya tambahkan, secara garis besar WPF terdiri dari:
•Controls
•Input and Commanding
•Layout
•Data Binding
•Graphics
•Animation
•Media
•Text and Typography
•Documents
Kelebihan WPF (Window Presentation Foundation)
a.Merupakan teknologi GUI Framework terbaru Microsoft.
b.Memiliki fleksibelitas yang jauh melebihi dari teknologi standar Microsoft (WinForms).
c.Teknologi ini digunakan Microsoft dalam pembuatan banyak aplikasi termasuk Visual Studio itu sendiri.
d.Sangat flexible terhadap bahasa pemrograman Microsoft (C# atau Visual Basic).
e.Tersusun dari XAML, sehingga kita dapat dengan mudah mengedit GUI nya sementara kita juga dapat dengan mudah mengetik logic nya dengan C# ataupun Visual Basic.
f.Dapat digunakan untuk interface Windows Aplication maupun Web Aplication.
g.Dan sebagainya.
Nah, bagi pecinta Visual C# dan Visual Basic, jangan lewatkan sebuah teknologi terbaru dari Microsoft untuk GUI kita ini. Flexible, sangat mudah setingannya, serta didukung oleh .NET.
Mari kita membuat sebuah percobaan transfer data antar WPF Forms.
1.Terlebih dahulu kita buat project baru.
Project WPF Pertama kita ini berisikan kode kode untuk interaksi antar Form.
Saya di sini menggunakan bahasa Visual Basic sebagai jembatan pemrogramannya, anda pun dapat menggunakan C# sesuai dengan taste/kesenangan anda.
Pilih Visual Basic --- Windows --- WPF Application.
Kemudian project ini saya berikan nama adalah FirstWPF.
Lihat gambar 1:
2.Perhatikan project yang baru saja kita buat, lihatlah tampilan utama window.
Perhatikan juga Properties Window dan Solution Explorer, bila kedua Window ini belum muncul di Visual Studio anda, anda dapat menampilkannya dari Menu View.
Setelah berhasil membuat project, secara otomatis, kita akan disuguhkan tampilan design view dan window XAML. Pada design view berisi sebuah window form kita. Anda dapat melihat pada gambar di bawah ini.
Lihat gambar 2:
Pada window kita ini terdapat sebuah Grid, coba arahkan mouse anda ke tengah window, maka nanti akan tampil border biru tebal seperti pada gambar di atas. Itu adalah Grid. Baik window maupun grid memiliki beragam properties yang dapat anda setting pada Properties Window.
Sebetulnya tidak hanya menggunakan Properties Window untuk mengedit properties nya, WPF itu sangat fleksible jadi anda pun tinggal mengedit kode XAML untuk mengedit properties.
Mari kita lihat Properties Window dari Form ini. Silahkan klik form nya (klik saja title window) dan lihatlah properties window.
Lihat gambar 3:
Secara default, setiap komponen pada WPF Form, baik itu Formnya, Grid nya, Button nya, TextBox nya, terdiri dari banyak sekali properties yang dikompokan ke dalam group-group seperti pada gambar di atas yaitu Brush, Appearance, Common, Layout, Text, dan Miscellaneous.
Yang perlu di perhatikan lagi adalah Class kita. Window utama kita ini nama class nya adalah ‘MainWindow’. Class ini sangat penting karena nanti kita akan menggunakannya untuk interaksi antar form. Gambar berikut ini adalah class yang perlu kita perhatikan.
Lihat gambar 4:
3.Yuk kita permak tampilan Form kita, anda dapat menggunakan Properties Window untuk mempermaknya.
Saya melakukan permak dengan menambahkan warna gradient pada grid supaya terlihat lebih elegan seperti pada gambar berikut ini. Anda dapat melakukannya dengan memilih ‘Brush’ pada properties window anda.
Lihat gambar 5:
Secara otomatis pula, kode XAML pun berubah menyesuakan dengan pengaturan gradien kita. Menyenangkan bukan? Anda tidak akan menemukan yang seperti ini pada WinForms.
4.Mari kita tambahkan komponen TextBox dan Button.
Silahkan anda drag and drop komponen TextBox dan Button dari Toolbox.
Saya akan memberikan nama ‘TextBoxGreeting’ pada TextBox dan ‘ButtonSubmit’ pada button.
Anda pun dapat mengedit lebih lanjut tampilannya pada Properties Window.
Lihat gambar 6:
Ingat, nama TextBox kita adalah ‘TextBoxGreeting’.
Nama Button kita adalah ‘ButtonSubmit’.
Pada textbox di atas saya memberikan default tulisan yaitu ‘Tuliskan Greeting anda’.
5.Mari kita buat WPF baru untuk Greeting.
Perhatikan Solution Explorer Window anda. Untuk menambahkan WPF form baru, Klik kanan project --- Add --- New Item --- Pilih WPF ---- Pilih Window (WPF).
Saya akan memberikan nama/class adalah ‘GreetingWindow’.
Lihat gambar 7:
Perhatikan pula pada Solution expoler, project kita akan bertambah satu class lagi yaitu ‘GreetingWindow.xaml’.
Lihat gambar 8:
6.Sekarang saatnya kita mempermak ‘GreetingWindow’ kita biar terlihat ramai.
Ingat, ini adalah ‘GreetingWindow’. Bukan ‘MainWindow’. Beda lho ya :).
Sesuai dengan topik kita nantinya kita akan berinteraksi antar form.
Disini saya akan mempermak dengan memberikan gradient, cara memberikan gradient sama dengan yang sudah saya tulis di atas. Semua dapat anda lakukan dengan menggunakan Properties Window.
7.Mari kita tambahkan label pada ‘GreetingWindow’ kita.
Label disini saya berikan nama ‘LabelGreeting’.
Label ini nanti akan menampung text yang diketikan oleh user pada ‘MainWindow’. Jadi nanti kita akan mengirim text dari ‘MainWindow’ ke ‘GreetingWindow’.
Lihat gambar 9:
Nah, sekarang kita sudah memiliki dua buah form WPF yaitu ‘MainWindow’ dan ‘GreetingWindow’.
8.Mari kita mulai mengetikan kode. Kode awal yang kita ketikan adalah untuk mereset ‘TextBoxGreeting’.
Kode pertama yang ingin saya tambahkan adalah seperti pada gambar di bawah ini:
Lihat gambar 10:
Nah, hilangnya tulisan pada ‘TextBoxGreeting’ di atas dinamakan dengan ‘GotFocus’ event.
Cara menambahkanya anda dapat mengklik tombol event --- arahkan mouse ke GotFocus --- kemudian double click.
Lihat gambar 11:
Saat selesai menambahkan GotFocus, maka secara otomatis visual studio akan menambahkan fungsi seperti berikut ini:
TextBoxGreeting_GotFocus(sender As Object, e As RoutedEventArgs)
Nah, kita dapat melengkapi kodenya seperti pada gambar di bawah ini:
Private Sub TextBoxGreeting_GotFocus(sender As Object, e As RoutedEventArgs) Handles TextBoxGreeting.GotFocus
If (TextBoxGreeting.Text = "Tuliskan Greeting anda") Then
TextBoxGreeting.Text = ""
End If
End Sub
Kode fungsi di atas hanya untuk mereset agar supaya ‘TextBoxGreeting’ menjadi kosong saat user meng-klik untuk mengisikan text.
9.Berikutnya kita akan mengetikan kode untuk ‘ButtonSubmit’.
Saat kita mengclick ‘ButtonSubmit’, kita akan memunculkan ‘GreetingWindow’ dan mentransfer text pada kotak ‘TextBoxGreeting’ di ‘MainWindow’ ke ‘GreetingWindow’ seperti pada gambar di bawah ini:
Lihat gambar 12:
Pertama tama kita perlu menambahkan event Click pada ‘ButtonSubmit’.
Untuk menambahkan Event CLICK, kita perlu mengaktifkan ‘ButtonSubmit’ kita kemudian pada Properties Window silahkan pilih CLICK.
Lihat gambar 13:
Saat kita memberikan event CLICK, maka secara otomatis akan membuat sebuah method/fungsi baru yaitu:
Private Sub ButtonSubmit_Click(sender As Object, e As RoutedEventArgs)
Hal yang perlu di perhatikan bila menggunakan WPF adalah kita harus membuat sebuah object/instance untuk memanggil form lain. Tidak seperti WinForms yang hanya cukup memanggil class saja.
Perhatikan, tadi kita sudah membuat ‘MainWindow.xaml’ (class nya adalah ‘MainWindow’) dan ‘GreetingWindow.xaml’ (class nya adalah GreetingWindow’).
Nah, bila kita menggunakan WinForms, kita hanya cukup mengetikan kode berikut ini di ‘MainWindow’ untuk mengeset ‘LabelGreeting’ yang terdapat pada ‘GreetingWindow’.
GreetingWindow.LabelGreeting.content = “Hehehe, ni pakai winform gan!”
Nah, berbeda bila kita memakai WPF, sekarang kita perlu membuat object/instance. Ketikan kode berikut ini pada ‘MainWindow’ agar dapat mengeset ‘LabelGreeting’ pada ‘GreetingWindow’.
Private Sub ButtonSubmit_Click(sender As Object, e As RoutedEventArgs) Handles ButtonSubmit.Click
Dim Form2 As GreetingWindow = New GreetingWindow()
Form2.LabelGreeting.Content = TextBoxGreeting.Text
Form2.Show()
End Sub
Mudah bukan??
Perhatikan, kita membuat instance form2. Tanpa membuat instance, maka ‘intellisense’ tidak akan memunculkan fungsi show() dan komponen ‘LabelGreeting’. Intellisense itu adalah sebuah bantuan saat kita mengetikan kode. Bantuan dari intellisense ini nanti berisi properties dan method yang terkait dengan yang kita ketikan.
Oke, mudah mudahan tutorial ini bermanfaat untuk anda para pecinta Visual C# maupun Visual Basic. Download source codenya dan praktekan.
Dengan menggunakan teknologi ini anda dapat mensetting tampilan program aplikasi anda dari XAML sedangkan untuk logic nya (code-behind) anda dapatmenggunakan bahasa visual studio (c#, Visual basic). Jadi merupakan kombinasi yang sangat bagus, akan jauh lebih mudah dimengerti bila anda juga familiar dengan asp.net. Dan yang lebih mengagumkan, XAML itu sangat mudah dimengerti, mudah dipahami. Sehingga teknologi ini sangat mempermudah untuk pengguna baik yang baru dalam pemrograman visual maupun yang telah mahir untuk efisiensi design dan waktu dalam pembuatan aplikasi
WPF Merupakan sebuah rich framework yang tidak akan bisa habis bila kita bahas. Penjelasan saya di atas sudah lebih dari cukup untuk menjelaskan apa itu WPF (Windows Presentation Foundation). Mungkin perlu saya tambahkan, secara garis besar WPF terdiri dari:
•Controls
•Input and Commanding
•Layout
•Data Binding
•Graphics
•Animation
•Media
•Text and Typography
•Documents
Kelebihan WPF (Window Presentation Foundation)
a.Merupakan teknologi GUI Framework terbaru Microsoft.
b.Memiliki fleksibelitas yang jauh melebihi dari teknologi standar Microsoft (WinForms).
c.Teknologi ini digunakan Microsoft dalam pembuatan banyak aplikasi termasuk Visual Studio itu sendiri.
d.Sangat flexible terhadap bahasa pemrograman Microsoft (C# atau Visual Basic).
e.Tersusun dari XAML, sehingga kita dapat dengan mudah mengedit GUI nya sementara kita juga dapat dengan mudah mengetik logic nya dengan C# ataupun Visual Basic.
f.Dapat digunakan untuk interface Windows Aplication maupun Web Aplication.
g.Dan sebagainya.
Nah, bagi pecinta Visual C# dan Visual Basic, jangan lewatkan sebuah teknologi terbaru dari Microsoft untuk GUI kita ini. Flexible, sangat mudah setingannya, serta didukung oleh .NET.
Mari kita membuat sebuah percobaan transfer data antar WPF Forms.
1.Terlebih dahulu kita buat project baru.
Project WPF Pertama kita ini berisikan kode kode untuk interaksi antar Form.
Saya di sini menggunakan bahasa Visual Basic sebagai jembatan pemrogramannya, anda pun dapat menggunakan C# sesuai dengan taste/kesenangan anda.
Pilih Visual Basic --- Windows --- WPF Application.
Kemudian project ini saya berikan nama adalah FirstWPF.
Lihat gambar 1:
2.Perhatikan project yang baru saja kita buat, lihatlah tampilan utama window.
Perhatikan juga Properties Window dan Solution Explorer, bila kedua Window ini belum muncul di Visual Studio anda, anda dapat menampilkannya dari Menu View.
Setelah berhasil membuat project, secara otomatis, kita akan disuguhkan tampilan design view dan window XAML. Pada design view berisi sebuah window form kita. Anda dapat melihat pada gambar di bawah ini.
Lihat gambar 2:
Pada window kita ini terdapat sebuah Grid, coba arahkan mouse anda ke tengah window, maka nanti akan tampil border biru tebal seperti pada gambar di atas. Itu adalah Grid. Baik window maupun grid memiliki beragam properties yang dapat anda setting pada Properties Window.
Sebetulnya tidak hanya menggunakan Properties Window untuk mengedit properties nya, WPF itu sangat fleksible jadi anda pun tinggal mengedit kode XAML untuk mengedit properties.
Mari kita lihat Properties Window dari Form ini. Silahkan klik form nya (klik saja title window) dan lihatlah properties window.
Lihat gambar 3:
Secara default, setiap komponen pada WPF Form, baik itu Formnya, Grid nya, Button nya, TextBox nya, terdiri dari banyak sekali properties yang dikompokan ke dalam group-group seperti pada gambar di atas yaitu Brush, Appearance, Common, Layout, Text, dan Miscellaneous.
Yang perlu di perhatikan lagi adalah Class kita. Window utama kita ini nama class nya adalah ‘MainWindow’. Class ini sangat penting karena nanti kita akan menggunakannya untuk interaksi antar form. Gambar berikut ini adalah class yang perlu kita perhatikan.
Lihat gambar 4:
3.Yuk kita permak tampilan Form kita, anda dapat menggunakan Properties Window untuk mempermaknya.
Saya melakukan permak dengan menambahkan warna gradient pada grid supaya terlihat lebih elegan seperti pada gambar berikut ini. Anda dapat melakukannya dengan memilih ‘Brush’ pada properties window anda.
Lihat gambar 5:
Secara otomatis pula, kode XAML pun berubah menyesuakan dengan pengaturan gradien kita. Menyenangkan bukan? Anda tidak akan menemukan yang seperti ini pada WinForms.
4.Mari kita tambahkan komponen TextBox dan Button.
Silahkan anda drag and drop komponen TextBox dan Button dari Toolbox.
Saya akan memberikan nama ‘TextBoxGreeting’ pada TextBox dan ‘ButtonSubmit’ pada button.
Anda pun dapat mengedit lebih lanjut tampilannya pada Properties Window.
Lihat gambar 6:
Ingat, nama TextBox kita adalah ‘TextBoxGreeting’.
Nama Button kita adalah ‘ButtonSubmit’.
Pada textbox di atas saya memberikan default tulisan yaitu ‘Tuliskan Greeting anda’.
5.Mari kita buat WPF baru untuk Greeting.
Perhatikan Solution Explorer Window anda. Untuk menambahkan WPF form baru, Klik kanan project --- Add --- New Item --- Pilih WPF ---- Pilih Window (WPF).
Saya akan memberikan nama/class adalah ‘GreetingWindow’.
Lihat gambar 7:
Perhatikan pula pada Solution expoler, project kita akan bertambah satu class lagi yaitu ‘GreetingWindow.xaml’.
Lihat gambar 8:
6.Sekarang saatnya kita mempermak ‘GreetingWindow’ kita biar terlihat ramai.
Ingat, ini adalah ‘GreetingWindow’. Bukan ‘MainWindow’. Beda lho ya :).
Sesuai dengan topik kita nantinya kita akan berinteraksi antar form.
Disini saya akan mempermak dengan memberikan gradient, cara memberikan gradient sama dengan yang sudah saya tulis di atas. Semua dapat anda lakukan dengan menggunakan Properties Window.
7.Mari kita tambahkan label pada ‘GreetingWindow’ kita.
Label disini saya berikan nama ‘LabelGreeting’.
Label ini nanti akan menampung text yang diketikan oleh user pada ‘MainWindow’. Jadi nanti kita akan mengirim text dari ‘MainWindow’ ke ‘GreetingWindow’.
Lihat gambar 9:
Nah, sekarang kita sudah memiliki dua buah form WPF yaitu ‘MainWindow’ dan ‘GreetingWindow’.
8.Mari kita mulai mengetikan kode. Kode awal yang kita ketikan adalah untuk mereset ‘TextBoxGreeting’.
Kode pertama yang ingin saya tambahkan adalah seperti pada gambar di bawah ini:
Lihat gambar 10:
Nah, hilangnya tulisan pada ‘TextBoxGreeting’ di atas dinamakan dengan ‘GotFocus’ event.
Cara menambahkanya anda dapat mengklik tombol event --- arahkan mouse ke GotFocus --- kemudian double click.
Lihat gambar 11:
Saat selesai menambahkan GotFocus, maka secara otomatis visual studio akan menambahkan fungsi seperti berikut ini:
TextBoxGreeting_GotFocus(sender As Object, e As RoutedEventArgs)
Nah, kita dapat melengkapi kodenya seperti pada gambar di bawah ini:
Private Sub TextBoxGreeting_GotFocus(sender As Object, e As RoutedEventArgs) Handles TextBoxGreeting.GotFocus
If (TextBoxGreeting.Text = "Tuliskan Greeting anda") Then
TextBoxGreeting.Text = ""
End If
End Sub
Kode fungsi di atas hanya untuk mereset agar supaya ‘TextBoxGreeting’ menjadi kosong saat user meng-klik untuk mengisikan text.
9.Berikutnya kita akan mengetikan kode untuk ‘ButtonSubmit’.
Saat kita mengclick ‘ButtonSubmit’, kita akan memunculkan ‘GreetingWindow’ dan mentransfer text pada kotak ‘TextBoxGreeting’ di ‘MainWindow’ ke ‘GreetingWindow’ seperti pada gambar di bawah ini:
Lihat gambar 12:
Pertama tama kita perlu menambahkan event Click pada ‘ButtonSubmit’.
Untuk menambahkan Event CLICK, kita perlu mengaktifkan ‘ButtonSubmit’ kita kemudian pada Properties Window silahkan pilih CLICK.
Lihat gambar 13:
Saat kita memberikan event CLICK, maka secara otomatis akan membuat sebuah method/fungsi baru yaitu:
Private Sub ButtonSubmit_Click(sender As Object, e As RoutedEventArgs)
Hal yang perlu di perhatikan bila menggunakan WPF adalah kita harus membuat sebuah object/instance untuk memanggil form lain. Tidak seperti WinForms yang hanya cukup memanggil class saja.
Perhatikan, tadi kita sudah membuat ‘MainWindow.xaml’ (class nya adalah ‘MainWindow’) dan ‘GreetingWindow.xaml’ (class nya adalah GreetingWindow’).
Nah, bila kita menggunakan WinForms, kita hanya cukup mengetikan kode berikut ini di ‘MainWindow’ untuk mengeset ‘LabelGreeting’ yang terdapat pada ‘GreetingWindow’.
GreetingWindow.LabelGreeting.content = “Hehehe, ni pakai winform gan!”
Nah, berbeda bila kita memakai WPF, sekarang kita perlu membuat object/instance. Ketikan kode berikut ini pada ‘MainWindow’ agar dapat mengeset ‘LabelGreeting’ pada ‘GreetingWindow’.
Private Sub ButtonSubmit_Click(sender As Object, e As RoutedEventArgs) Handles ButtonSubmit.Click
Dim Form2 As GreetingWindow = New GreetingWindow()
Form2.LabelGreeting.Content = TextBoxGreeting.Text
Form2.Show()
End Sub
Mudah bukan??
Perhatikan, kita membuat instance form2. Tanpa membuat instance, maka ‘intellisense’ tidak akan memunculkan fungsi show() dan komponen ‘LabelGreeting’. Intellisense itu adalah sebuah bantuan saat kita mengetikan kode. Bantuan dari intellisense ini nanti berisi properties dan method yang terkait dengan yang kita ketikan.
Oke, mudah mudahan tutorial ini bermanfaat untuk anda para pecinta Visual C# maupun Visual Basic. Download source codenya dan praktekan.