Menjalankan Microsoft Office & Foxit Reader menggunakan C#-WPF

Pada postingan kali ini akan diperlihatkan cara untuk membuka file docx dan pdf menggunakan C# (WPF). Untuk pertama-tama akan dibuat project baru di visual studio 2010 dengan tampilan seperti terlihat :

Pada mainWindow tersebut, button "MS Office" berguna untuk membuka file office jika tombol tersebut ditekan, dan button "Foxit Reader" berguna untuk membuka file pdf. Ok, sekarang tambahkan kode di dalam button "MS Office" tersebut seperti terlihat di bawah :

Nah,... sampai disini, jika tombol tersebut ditekan, maka file test2.docx akan otomatis dibuka menggukan microsoft office. Kode diatas adalah kode yang sederhana, jika kita menggunakan exception, hasilnya :

Kemudian, pada filename selalu digunakan tanda forward slash(/). Jadi secara default, jika kita mencopy lokasi file menggunakan menggunakan windows explorer, back slash(\)-nya harus selalu diganti menjadi forward slash.Namun, jika langsung menggunakan fungsi bawaan C# untuk memperoleh lokasi file, maka back slash(\) tidak perlu diganti menjadi forward slash(/). Terus, nama folder tempat file yang dibuka tidak boleh mengandung "spasi". Contohnya D:/my folder/test2.docx, Nah disini akan terjadi eksespsi Win32Exception karena terdapat spasi folder tempat file test2.docx disimpan.Terus untuk button "Foxit Reader", kode programnya sama persis dengan yang diatas, cuma filenya aja yang berbeda :

Terlihat, kode programnya sama dengan yang sebelumnya. Jadi sebenarnya yang membedakan pembukaan aplikasi di C# hanya jenis file yang akan dibuka. Jika secara default file pdf dibuka dengan adobe reader diwindows, maka ketika ps.Start() di eksekusi, adobe reader akan dijalankan bukan foxit reader.

sekian... semoga bermanfaat... :-)

WndProc di C# WPF - VS2010

Pada winFrom C#, jika ingin menggunakan wndProc, caranya sangat mudah, tinggal mengoverride fungsi void WndProc, contohnya :

protected override void WndProc(ref Message m)
{
    if (m.Msg == WM_DEVICECHANGE)
    {
        // Handle WM_DEVICECHANGE...
    }

    base.WndProc(ref m);
}

Namun jika kita menggunakan WPF, nah ceritanya beda lagi. Soalnya di WPF tidak ada fungsi untuk meng-override "WndProc". So.... Kita butuh fungsi lain yang dapat menghubungkan program kita dengan WndProc tersebut. Di C# WPF, dalam System.Windows.Interop, Terdapat HwndSource yang dapat kita gunakan untuk terhubung dengan WndProc. Jika melihat dokumentasi MSDN, 

"The HwndSource class implements its own window procedure.  This window procedure is used to process important window messages, such as those related to layout, rendering, and input.  However, you can also hook the window procedure for your own use.  You can specify your own hook during construction by setting the HwndSourceParameters.HwndSourceHook property, or you can also use AddHook and RemoveHook to add and remove hooks after the window has been created"

Nah terlihat HwndSource dapat digunakan untuk melakukan pemrosesan window message yang berhubungan dengan layout, render, atau input dan dapat pula digunakan untuk mengaitkan window message sesuai kebutuhan aplikasi yang kita gunakan. Contoh penggunaannya :

Misalkan ada GUI dengan xml :

Kemudian, untuk mengimplementasi HwndSource, kodenya seperti terlihat di bawah :

Progress Bar menggunakan Background Worker di C# WPF VS2010 - Basic

Pada postingan kali ini akan ditunjukkan cara menggunakan progress bar dengan background worker di C# wpf menggunakan visual studio 2010. Pertama-tama silahkan buat project baru dan tambahkan 1 buah textbox, 1 buah tombol, 1 buah listBox, dan 1 buah progressbar. Kemudian atur posisinya seperti terlihat di bawah :

Kemudian untuk pertama kali, tambahkan kode berikut didalam tombol start :

Kode didalam tombol start ini nantinya akan diupdate lagi, jad yang itu belum fix :-)
Ok. Kode program diatas adalah kode untuk menerima masukan angka dari user yang terletak pada textbox1. Kemudian angka tersebut dikonvert ke integer melalui fungsi convert.toInt32, nah fungsi convert ini ada eksepsinya, yaitu jika ternyata user memasukkan huruf bukan angka, maka formatException akan dieksekusi dengan menampilkan "format Exception" output visual studio. Kemudian jika user memasukkan angka terlalu besar atau melebihi daya tampung data integer, maka akan digenerate overflow exception.

Next, kita akan menambahkan kode untuk background workernya. Background worker bekerja di thread berbeda dengan main thread. Jadi boleh dikatakan penggunaan background worker ini sebenarnya adalah salah satu proses multithreading di C#. Program C#-nya seperti terlihat di bawah :

Mari kita telaah ketiga fungsi diatas, yaitu fungsi threadProcess, updateGUI, dan selesai. Pada project ini fungsi threadProcess berguna untuk memproses angka dari user(input dari textbox) dan memberikan event dan data kepada fungsi updateGUI. Pada line 64, variabel "args" mengambil input data dari user yang berupa argument pada variabel input "e". "mBilGanjil" adalah variabel untuk menampung jumlah bilangan ganjil yang berawal dari 0 sampai args, makanya di loop for itu (line 67) "i<args". Kemudian di line 69 terdapat variabel "presentase", variabel ini akan menampung jumlah presentasi dari keseluruhan proses, dan dari variabel inilah tampilan progressbar kita akan diupgrade. Terus untuk line 71, itu cuma buat ngecek bilangan ganjil atau bukan. Jika misalkan bilangan ganjil, maka mBilGanjil akan bertambah 1 (line 73). terus di Line 74, Nah inilah yang membuat updateGUI di run ketika line 74 tersebut di eksekusi. Di line 74 tersebut juga diberikan presentase, dan bilangan ganjil tersebut yang nantinya ditampilkan dalam listbox. Terus untuk kode dibagian else, itu sama dengan line 74, cuman yang dibawa ke GUI hanya presentase saja, sedangkan nilai yang genap g' dipake. Terus, diline 81, threadnya dibuat sleep biar ada jeda untuk update tampilan GUI-nya oleh fungsi updateGUI. Kemudian diline terakhir untuk (85), jumlah bilangan ganjilnya dikirim ke fungsi "selesai". fungsi "selesai" tersebut akan dieksekusi tepat setelah fungsi "threadProcess" selesai.

Beralih ke fungsi "updateGUI". Di line 90, progressBar akan diupdate nilainya sesuai dengan nilai presentasi dari fungsi threadProcess. Kemudian di line berikutnya dicek, jika userstate tidak nol {bilangan ganjil} maka bilangan tersebut akan ditambahkan ke listbox.

Untuk fungsi "selesai". Dia hanya menampilkan jumlah bilangan ganjil yang didapat dari fungsi threadProcess yaitu mBilGanjil.

Setelah ketiga fungsi diatas ditambahkan, maka boleh dikatakan kita telah membuat kerangka background worker dan telah siap digunakan. Untuk menggunakan background worker ini, tambahkan kode berikut didalam fungsi handle untuk button "start" seperti terlihat di bawah :

Ok, sekarang kita sudah dapat menggunakan aplikasi yang telah kita buat. Silahkan di run, dan masukkan nilai 100 pada textboxnya, kemudian tekan tombol "start" :

Ok,,,Terlihat programnya telah berjalan sesuai dengan yang diharapkan. Selanjutnya kita dapat melangkah untuk memberikan konfigurasi-konfigurasi untuk progressbar-nya, misalkan dengan mengubah warna hijaunya dengan warna ungu :

Hasilnya :

Cukup sekian permainan tentang progressbar dan background workernya. Moga bermanfaat... :-)


*Info lain seputar progressbar masih dalam proses... :-)

Menu Control in C# WPF - Basic

Berikut akan dipelajari dasar-dasar menambahkan menu control ke main window menggunakan c# wpf di visual studio 2010. Pertama-tama akan dibuat project baru seperti terlihat pada gambar di bawah :

Kemudian pada toolbox, drag 1 biji menu control ke main window :

Next, tambahkan submenu pada menu control tersebut dengan klik item collection :

Disitu ditambahkan 1 biji menu dengan nama File. Nah terlihat pada window tersebut kita bisa menambahkan icon pada menu, ataupun membuat menu tersebut berbentuk checkable. Dapat pula ditentukan konfigurasi-konfigurasi yang lain. Untuk project ini ditambahkan jumlah menu seperti terlihat di bawah :

Next, untuk membuat menu tersebut berada pada bagian atas. Ganti konfigurasinya seperti terlihat di bawah :

Setelah itu kita menambahkan menu baru di dalam "file". Caranya klik file tersebut kemudian tambahkan item collection sesuai keinginan, Caranya seperti diilustrasikan pada gambar di bawah :

Akan muncul menu :

Sampai disini, kita bisa menambahkan submenu yang lain sesuai dengan kebutuhan. Untuk menu file, submenunya sederhana saja seperti terlihat pada gambar di bawah :

Next, akan ditambahkan submenu untuk menu "Edit", pada menu edit ini akan ditambahkan juga icon untuk tiap-tiap submenunya. Langkah-langkahnya sama seperti di atas, cuman diisikan aja gambar di bagian icon, :

Coba kita lihat hasilnya jika dikompile :

Iconnya terlalu besar, jadi sebaiknya cari icon yang ukurannya kecil sesuai dengan ukuran textnya. Namun disini size image tersebut akan diubah. Efeknya tar gambarnya agk blur. Cara meresize bisa langsung menambahkan di file xml-nya atau lewat menu properti seperti terlihat di bawah :

Hasilnya :

Nah ukuran iconnya paling tidak sudah agak lebih baik dari yang sebelumnya :D
Untuk menambahkan submenu yang lain, dapat dilakukan dengan cara yang sama seperti diatas. Untuk menu edit tersebut hanya ditambahkan 3 biji, moga sudah dapat mewakili yang lain.

Berikutnya untuk menu "View". Pada menu view ini akan ditambahkan submenu dengan tipe "checkable". Caranya juga sangat mudah, tinggal klik item collection untuk view, kemudian tambahkan submenu dan beri tanda centang pada "isCheckable", seperti terlihat pada gambar di bawah :

Nah yang ini akan membuat submenunya dapat beri tanda centang oleh user, seperti terlihat :

Selanjutnya silahkan tambahkan submenu yang lain sesuai dengan kebutuhan, disini cuma ditambahkan 3 biji.

Next, untuk menu help. Pada menu help ini akan ditambahkan submenu dengan text yang warnanya berbeda-beda dan juga dipisahkan oleh separator. Caranya silahkan klik menu item collection untuk help. Kemudian masuk kebagian brushes, dan ganti warna buat foregroundnya, seperti terlihat di bawah :

Jika dikompile, hasilnya adalah :

Terlihat textnya berubah menjadi biru. Sebagai catatan, pada saat mengubah warna color foregroundnya, disini kita tidak dapat menggunakan color picker, jadi harus di ketik sendiri, kayak misalkan pengen warna merah, jadi textnya diubah menjadi "Red", atau mungkin kuning, berarti "Yellow", "Green", dsb atau bisa juga langsung menggunakan format hex RGB, contohnya #FF23E5D6, #FF000000 dst. Kemudian tambahkan separator untuk dibagian bawah about program, carannya tinggal tambahkan 1 baris kode tepat dibawah about program,

Sebenarnya dapat pula ditambahkan melalui items collection, Ganti menu item menjadi "separator", kemudian tekan tombol add:

Nggg... kemudian boleh ditambahkan tooltip pada about program ini caranya kembali ke item collection, kemudian masuk ke bagian other, dan isi sesuatu dibagian tooltipnya, seperti terlihat di bawah :

Jika dikompile, hasilnya adalah :

Nah terlihat tooltipnya dan garis separator dibawahnya. Silahkan tambahkan submenu yang lain untuk menu help ini sesuai dengan kebutuhan. Pada project ini ditambahkan submenu seperti terlihat dibawah :

Berikutnya kita akan menambahkan satu buah handle untuk satu buah submenu, soalnya untuk menambahkan handle pada submenu yang lain caranya sama saja. So, disini dipilih submenu untuk "open" pada menu file, Caranya silahkan pindahkan kursor ke dalam "file" tersebut kemudian klik event, dan masukkan nama fungsi pada bagian "click" :

Tanda garis merah itu maksudnya tempatkan kursor disitu, terus klik "Events", Nah masukkan nama fungsi dibagian "Click" seperti yang ditunjukkan panah merah. Setelah masukkan nama fungsinya, tekan "enter" kemudian VS akan secara otomasi membaca kita ke fungsi tersebut untuk mengisikan kode apa saja yang dibutuhkan, seperti terlihat pada gambar di bawah :

Nah disitu saya menggunakan nama fungsi "onOpen". Nggg... Isinya sederhana saja :D

Sip, jadi ketika submenu open di-klik, akan muncul pesan "Anda telah menekan submenu OPEN...", seperti terlihat pada gambar di bawah :

Ok... saya pikir cukup demikian permainan dengan menucontrol ini. Eeeeeh... mungkin warna background menucontrolnya bisa diubah dulu, biar g' default gitu, caranya juga simpel banget, klik bagian menunya terus masuk kebagian brushes, dan pilih warna background sesuai keinginan :

Terusss.... warna text-nya juga diubah dengk... :D
Sow, ganti warna black dibagian foreground :

Hasilnya :

Sekian.... Moga bermanfaat... :-)

Basic TabControl di C# WPF VS2010

Pada postingan kali ini akan dipelajari dasar-dasar penggunaan TabControl di C#-WPF. Pertama-tama, mari kita buat project baru di visual studio 2010 :

Tekan OK untuk masuk ke main project. Setelah itu tambahkan 1 buah TabControl,

Kemudian ganti properti dari TabControl tersebut seperti terlihat :

Kemudian tambahkan tabItem lain dalam TabControl dengan menggunakan klik item(collection) :

Klik tombol "Add" dan beri nama sesuai dengan keinginan :

Di sini ditambahkan 2 biji tab lagi seperti terlihat di bawah :

Kemudahan diberikan oleh C# adalah setelah kita menambahkan tabnya, kita bisa langsung memberi kontrol-kontrol diatas tab tersebut. Hal ini berbeda jauh jika menggunakan MFC. Nah jadi sebenarnya basicnya boleh dibilang sampai disini saja. Langkah selanjutnya terserah kita mau diarahkan kemana aplikasi yang dibuat. Misalnya dengan mengubah settingan lain pada tab, atau menambahkan element-element lain sesuai keinginan. Untuk project ini, pada tab pertama :

Di TabItem pertama ini digunakan 1 biji button dan imaje kontrol dan telah diisi dengan gambar bunga hehe.. :-). Nah untuk tabItem pertama ini kita bisa langsung men-drag item dari toolbox dengan mudah. Karena secara otomatis VS telah menambahkan element "grid" dalam tabItem ini. Namun untuk tabItem berikutnya kita harus menambahkan sendiri element grid-nya. Caranya bisa langsung diketik dibagian file xml :

Selain element grid, ditambahkan juga identitas untuk masing-masing tabItem tersebut yaitu second & third.
Next, kita bisa langsung drag element untuk tabItem kedua :

Untuk tabItem terakhir :

Nggg... berikutnya kita set visibility tabItem kedua dan ketiga ke "hidden" :

Jadi tabItem kedua dan ketiga tidak terlihat ketika pertama kali aplikasi di running, contohnya seperti terlihat

Oleh karenanya, ketika tombol next ditekan, maka tab kedua akan terlihat. Nah mari kita isi kode program di dalam button next tersebut. Double klik tombol next, kemudian tambahkan kode di bawah :

Line pertama dari kode tersebut membuat tabItem kedua menjadi visible dan membuat tabItem tersebut dipilih didalam tabControl. Jadi tar kita akan otomatis melompat ke tabItem berikutnya ketika tombol next dipencet. Ilustrasi seperti ini :

Next, kita akan menambahkan handle buat tombol "prev" dan "next" di tabItem kedua. Caranya juga sederhana, untuk tombol "prev" :

Jadi ketika tombol prev ditekan, tabControl cuma kembali ke tabItemb pertama. Kemudian untuk tombol "next", selain beralih ke tabItem terakhir, tabItem pertama dan kedua juga akan dihidden. Kodenya seperti terlihat di bawah :

Ilustrasi, jika programnya dijalankan :

Jadi terlihat, ketika kita berada di tabItem ketiga, maka tabItem pertama dan kedua menjadi hidden. Yang terakhir, kode untuk tombol prev di tabItem ketiga. Kodenya hampir sama dengan tombol prev di tabItem kedua, yaitu kembali ke tabItem kedua dan tabItem ketiga kembali di-hidden. Kemudian tabItem pertama kembali dibuat visible, kodenya seperti terlihat :

Ilustrasi jika kita menekan tombol "prev" di tabItem terakhir :

Cukup demikian permainan di tabControl ini. Moga bermanfaat... :-)