Hellow World Tutorial di Visual Studio 2012 - C# - WPF

Disini cuma diperlihatkan penggunaan button, label, textbox, textblock, dan cara ngubah2 propertinya. Trs source code disini yang diperlihatkan adalah hasil akhirnya, untuk selengkapnya silahkan lihat vidionya... :-)

Tampilan GUI :

Source code XML :

Source code C# :

Selengkapnya langsung ke vidionya hehehe... :-)

FontViewer sederhana menggunakan SharpDevelop

Pada postingan ini akan dibuat aplikasi sederhana menggunakan C# yang akan memperlihatkan jenis-jenis font yang telah terinstall secara default dalam windows yang kita miliki. Project ini dibuat dalam sharpdevelop. Ok pertama-tama mari kita buat project barunya :

Setelah itu atur tampilan GUI-nya. Pada tab "Design", drag 1 biji textblock dan listbox (beri nama : fontlist) :

Kemudian tambahkan textbox, dan 4 buah texblock seperti terlihat di bawah :

Beri nama pada textbox sebagai "sourceText", kemudian untuk 4 biji textblock yang berada dibawahnya masing-masing bernama tb1 sampai t4. Contoh xml-nya bisa dilihat di bawah :

Pada tb2, ganti ukuran font-nya menjadi 16, tb3 menjadi 20 dan tb4 menjadi 24. Kemudian beri text pada textbox, terserah aja text-nya, klu disini :

Kemudian untuk textblok yang berada di atas listbox, textnya diganti menjadi : "Silahkan pilih jenis font :". Nah sampai disini, jika programnya kita run, hasilnya :

Beralih ke tab "source" atau file xml-nya, pada listbox, tambahkan kode xml berikut :

Kode xml tersebut akan membuat itemSource pada listbox mengacu pada Font.SystemFontFamilies yang merupakan jenis-jenis font yang terdapat dalam windows. Nah...klu projectnya di run, listbox akan berisi jenis-jenis font seperti terlihat di bawah :

Ok.... Sederhanakan... :D... Next beralih ke tb1. pada tb1 tambahkan kode xml berikut(komponen Text="TextBlock" diapus dulu tapi) :

Di sini kita menggunakan teknik "binding" untuk menghubungkan komponen-komponen dalam GUI yang telah dibuat. Perhatikan Text = "{Binding ElementName = sourceText.... Maksudnya Text pada TextBlock ini terhubung ke sourceText yang berupa TextBox. Pada TextBox terdapat element "Text", nah text ini yang diambil oleh TextBlock dan dimasukkan ke komponen text-nya. Jadi intinya apapun text yang terdapat pada sourceText akan ditampilkan pula text yang sama pada tb1 ini. Kemudian, pada fontFamiliy kita lihat terhubung ke fontList (ListBox), Pathnya adalah selectedItem. Sow... tb1 ini akan mempunya jenis font sesuai dengan yang font yang dipilih pada fontList. Untuk melihat contohnya, projectnya bisa dijalankan, kemudian ganti text pada sourceText, dan pilih-pilih jenis font pada fontlist, maka kita akan lihat perubahan langsung terjadi pada tb1 ini.

Nah gambar diatas adalah tampilan awal, Coba kita ganti text pada textBox menjadi hellow Poipo, kemudian pilih salah-satu fontlist :

Terlihat text pada tb1 secara otomatis berubah ketika text pada sourceText kita ganti. Begitu pula ketika kita memilih salah-satu jenis font pada fontlist, terlihat fontnya juga langsung berubah... :D

Nah.... 2 baris kode tersebut ditambahkan juga ke tb2, tb3, dan tb4 (jangan lupa komponen Text="TextBlock" diapus dulu):

Nah... selese deh.... Coba kita lihat hasilnya :

Yah.... Silahkan dicoba-coba.... :D

Sekian.... Semoga bermanfaat..... ;-)

SharpDevelop at First Glance

Pada postingan ini akan diperkenalkan tentang sharpdevelop. Disini akan diperlihatkan cara membuat project baru, menambakan item-item toolbox sharpdevelop, mengkompile/re/build project, dan merunning projectnya. Ummm.... Ok,, silahkan buka program sharpdevelopnya, begitu pertama kali dibuka akan muncul gambar berikut, cantik banget... :D

Kemudian pas udah masuk :

Eeum.... Tampilannya klasik, mirip-mirip eclipse eheheh... :D, terus sharpdevelop ini juga lebih terasa ringan dari visual studio dan juga eclipse. Begitu dibuka, loading dikit, trs udaaah... padahal pengen loading lama-lama biar liad gambar ikannya lebih lamaa hahaha... Waaah... First glance SharpDevelop kereun deh.... :-) Moga-moga nanti tidak mengecewakan karena banyak bugs atw fiturnya tidak memadai untuk pengembangan program di C#...Aamiin.. :-)

Ok... Terus... pada menu file, pilih new, terus pilih solution, atw boleh langsung tekan Ctrl+Shift+N seperti terlihat di bawah :

Terus pilih C#, pilih WPF, terakhir WPF Application, tambahkan juga namaproject dan lokasinya :

Terus, tinggal tekan tombol "Create", Nah... tampilan pertama yang bisa kita lihat :

Tab "Tools" di atas adalah tempat semua komponen-komponen GUI yang bisa langsung di drag ke mainWindow. Terus disini, bagian xml dipisain sama tampilan GUInya langsung, jadi agak beda yah dengan di visual studio :D. Terus coba kita tambahkan 1 button ke dalam main window, untuk itu pertama-tama klik tab "Design", dan tab "Tools", terus dari tab "Tools" tersebut drag 1 biji button ke main window :

Bagian "properties" ada disebelah kanan seperti terlihat pada gambar di atas, nah dari situ kita bisa mengubah konfigurasi button tanpa harus melalui kode xml secara langsung. Terus nama dari button bisa diisikan pada label "name", tepat di bawah kata "properties". Di sini nama button tersebut belum ada. Terus klu kita langsung double klik buttonnya, akan langsung lompat ke file cs-nya, sama persis dengan visual studio, cuman di sharpdevelop ini, kode bawaannya lebih menawan, bisa dilihat :

Yang perlu digaris-bawahi adalah kode yang di line 33, itu adalah kode bawaan dari sharpdevelop dan tidak boleh di eksekusi, makanya dijadiin comment di sini. Jadi yang dieksekusi ketika button di pencet hanya message box-nya saja :

Untuk menjalankan programnya bisa langsung tekan tombol "run" :

Atau klik kanan pada project, "pilih run project" :

Pada gambar diatas, terlihat bahwa kita juga dapat memilih Build, Rebuild, Clean, Set as StartUp Project, dsb....

Kemudian jika konfigurasi "debug" ingin diganti ke "release" :

Terusss... apa lagi  yah...???


Saya pikir cukup demikian,,, moga bermanfaat sesi pengenalannya ke SharpDevelop... :-)

Membuat berbagai macam chart menggunakan ~Toolkit.dll di C# - WPF

Sebelumnya kita telah membuat chart dari scratch {pie chart} seperti yang terdapat pada postingan ini. Nah di postingan ini akan dibuat chart kembali, tetapi dengan  menggunakan dll, yaitu System.Windows.Controls.DataVisualization.Toolkit.dll. Jadi silahkan download dulu dll tersebut lewat google atau kalau Hisoka sendiri, ngedownloadnya dari link ini. Di web tersebut donwload source code dari "DatavisualizationDemos.zip",

Nah setelah projectnya didownload, terus extract, terus kompile atw run projectnya {eeeh..klu g' dicompile sm di run juga gpp :D}, terus di project tersebut masuk ke folder toolkit, nah didalam folder toolkit ini tersimpan file dll-nya sesuai dengan versi net framework yang kita gunakan, silahkan dilihat-dilihat terus dipilih :D.

Ok setelah dll-nya ketemu, pertama-tama mari kita buat project baru di visual studio 2010.

Kemudian silahkan tempatkan toolkit.dll pada folder debug dalam project ini:

Terus tambahkan referensi, dengan klik kanan pada "Reference" pilih "Add Reference..." :

Pilih tab "Browse" dan arahkan ke lokasi dll tersebut berada :

Nah setelah menekan tombol "OK", maka referensi baru akan ditambahkan ke dalam project ini, seperti terlihat di bawah :

Naah..berarti kita telah dapat menggunakan dll tersebut untuk project yang kita gunakan saat ini.

Ok... Mari kita menata tampilan GUI-nya pertama kali. Masukkan tab control, dan atur konfigurasi tab control ini sebagai berikut :

Kemudian pada collection dibagian item, tambahkan 6 items yaitu, Bar Series, Line Series, Column Series, Area Series, Pie Series, & Scatter Series :

Untuk menambahkan tab-tab pada control, lebih jelasnya bisa dilihat disini, klu memang yang gambar diatas belum jelas. Nah sampai disini GUI yang telah dibuat seperti terlihat di bawah :

Terus pada file xml-nya, ganti "/>" pada tiap-tiap tab item menjadi </TabItem> :

Next, kita tambahkan element baru pada komponen xml main window yang mengacu ke file dll yang telah kita masukkan sebelumnya, element xml yang ditambahkan adalah :
xmlns:Poipo_DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit", seperti terlihat di bawah :

Komponen "Poipo_DVC" itulah yang akan kita gunakan untuk membuat chart pada project ini. Sebagai catatan, sebenarnya ada banyak jenis chart yang bisa dibuat dari dll tersebut, cuman yang baru dicobain baru 6 biji, jadi disini cuma dibuat 6 biji saja hehehe... :D, dan sebagai tambahan juga langkah-langkah untuk membuat masing-masing chart tersebut sama, cuma nama tiap chart aja yang dibedain. So, disini cuma diperlihatkan secara rinci satu cara saja untuk membuat chart, sedangkan chart-chart yang lainnya itu sama saja cuma namanya aja yang dibedain. Ok, mari kita buat chart yang pertama yaitu "bar series", pada TabItem bar series tambahkan :

Nah perhatikan, nama element untuk Poipo_DVC:Chart tersebut yaitu "barChartSeries" dengan fitur height dan width adalah auto. Sebenarnya masih ada beberapa fitur-fitur lain yang bisa kita tambahkan, seperti warna background, ukuran text, dsb yang bisa kita edit langsung dari propertiesnya, contoh :

Sow, silahkan edit-edit sendiri propertiesnya sesuai keinginan. Balik ke xml, tambahkan element berikut :

Terus dalam komponen Chart.Series diatas tambahkan :

Kemudian letakkan kursor pada komponen barChartSeries, kemudian pilih icon listrik(event) pada pada visual studio, cari "initialized", kemudian masukkan nama fungsi misalnya "barSeriesInitialized", ilustrasi :

Setelah memasukkan nama fungsi di bagian initialized, tekan enter, maka kita secara otomatis beralih ke file .xml.cs tepat didalam fungsi "barSeriesInitialized". Biar lebih aman, tambahkan "using System.Windows.Controls.DataVisualization.Charting; " , kemudian dalam fungsi tersebut tambahkan kode di bawah :

Perhatikan barChartSeries adalah nama dari chart yang telah kita buat sebelumnya pada file xml, kemudian ("Hisoka", 12 ) dkk.. adalah komponen yang akan ditampilkan pada bar chart ini. Hasilnya seperti terlihat di bawah :

Nah... Untuk chart-chart berikutnya, langkah-langkahnya persis sama. Ummm... sebenarnya ini cuma salah-satu cara saja yang digunakan, masih ada beberapa langkah atau kode lain yang bisa kita gunakan untuk memanfaatkan pembuatan chart dari file dll ini, cuman hisoka pake cara yang ini aja :D

Ok, , kemudian untuk line series, pada file xml tambahkan kode xml yang sama, cuman namanya aja yang dibedain, jenis chart dan  nama fungsi initializednya :

Terus dalam fungsi "lineSeriesInitialized", tambahkan kode yang sama juga, cuman namanya aja yang beda :

Hasilnya :

Beralih ke tab Column Series, kode xml-nya juga hampir sama seperti terlihat di bawah :

Kode untuk columnSeriesInitialized :

Hasilnya :

Terus beralih ke Area Series, kode xml :

Kode untuk fungsi areaSeriesInitialized :

Daan... Hasilnya :

Lanjut untuk pie chart series, kode xml :

Kode untuk fungsi pieSeriesInitialized :

Hasil yang diperoleh untuk pie chart :

Siip... Yang terakhir untuk project ini adalah Scatter series, kode xml-nya :

Kode untuk fungsi scatterSeriesInitialized :

Hasilnya :

Alhamdulillah.....Selesee... demikian pemaparan beberapa jenis chart yang terdapat pada file toolkit.dll ini, seperti yang disebutkan diawal tadi, masih ada banyak jenis chart yang lain. Jadi silahkan diexplore untuk jenis-jenis chart yang lain. :-)

Sekian... semoga bermanfaat.... :-)