Membuat Aplikasi Berbasis Windows dengan Visual Studio

Visual Studio adalah IDE untuk mengembangkan aplikasi cross-platform, salah satunya adalah platform Windows. Kamu bisa mendapatkan Visual Studio di dreamspark.com atau disini.

Langsung saja, ketika pertama kali membuka Visual Studio, klik New Project -> Installed -> Templates -> Visual C#/Basic -> Store Apps , lalu akan ada 3 pilihan yaitu Universal Apps, Windows Apps, dan Windows Phone Apps.

Universal Apps

Template untuk membuat aplikasi yang dapat dijalankan di Windows Desktop dan Windows Phone.

Windows Apps

Template untuk membuat aplikasi yang dapat dijalankan di Windows Desktop.

Windows Phone Apps

Template untuk membuat aplikasi yang dapat dijalankan di Windows Phone.

Pertama-tama kita akan memulai mengembangkan Universal Apps. Pada bagian Universal Apps kita dihadapkan dengan 4 pilihan, kita mulai dengan Blank App untuk memulai membuat aplikasi dari nol (sebenarnya template Blank App tidak 100% blank). Klik OK. Visual Studio akan membuat beberapa baris kode default secara otomatis, serta membuat 3 file project sekaligus yang dapat kita lihat pada bagian Solution Explorer di sebelah kanan.

Terdapat 2 project yaitu Windows 8.1 dan Windows Phone 8.1, dan 1 project lagi yaitu Shared yang menghubungkan project Windows dan Windows Phone. Kenapa perlu dihubungkan? Karena pada dasarnya Universal Windows Apps adalah aplikasi yang dapat berjalan di desktop maupun di mobile. Jadi, dalam pengembangan Universal Apps akan terdapat kemungkinan fitur-fitur aplikasi yang sama baik di desktop maupun di mobile, yang berbeda hanyalah tampilannya saja.

Ketika kita membuka project Windows 8.1, perhatikan pada file MainPage.xaml dan MainPage.xaml.cs

MainPage adalah file yang akan pertama kali muncul ketika kita menjalankan aplikasi. MainPage.xaml adalah file untuk mendesain halaman MainPage, sedangkan MainPage.xaml.cs adalah file dimana kita membuat behaviour dan logic dari halaman MainPage (.cs adalah ekstensi file bahasa C#).

Ketika kita klik 2x pada MainPage.xaml, akan muncul tampilan seperti ini.

Gambar monitor tersebut adalah tampilan aplikasi kita(karena kita memilih Blank App maka tampilan awalnya masih kosong), sedangkan di bawahnya adalah kode XAML dimana kita dapat mendesain tampilan(UI) melalui kode. Kita juga bisa menambahkan kontrol-kontrol tampilan melalui toolbox yang ada pada sebelah kiri(jika toolbox-nya tidak ada, pilih Window -> Reset Window Layout). Setelah kita membuka toolbox, pilih All XAML Controls.

Misalnya kita ingin menambahkan button, klik pada Button lalu drag ke gambar monitor tersebut. Perhatikan pada kode XAML-nya ketika kita men-drag button tersebut, secara otomatis Visual Studio akan membuat sendiri kode XAML untuk menampilkan button setelah kita men-drag button tersebut.

Kita juga bisa menambahkan TextBlock untuk menampilkan text. Caranya klik TextBlock pada toolbox tadi lalu drag ke monitor. Kita bisa mengedit text tersebut dengan klik kanan pada TextBlock yang telah kita tambahkan tadi lalu pilih Edit Text.

Perhatikan pada kode XAML-nya, kita juga bisa memberikan nama pada komponen-komponen(seperti Button dan TextBlock) dengan mengetik x:Name="" (isi nama diantara tanda kutip). Misalnya saya memberi nama pada TextBlock dengan nama SuatuText.

Kita akan membuat Button kita menampilkan sebuah text ketika kita meng-klik button tersebut. Caranya adalah klik pada Button tersebut, lalu pada Properties klik pada icon gambar halilintar(Reset Window Layout jika Properties tidak muncul).

Selanjutnya pada bagian Click, isi nama sesuai selera anda(misalnya saya memberi nama Tampil), lalu klik 2x pada kata Tampil tersebut, secara otomatis kita langsung diarahkan pada file MainPage.xaml.cs dan Visual Studio secara otomatis membuat method dengan nama Tampil pada kode C# kita.

Pada method Tampil, tambahkan kode berikut.

SuatuText.Text = "Hello!";

Maksud dari kode tersebut adalah, pada komponen yang bernama SuatuText, kita mengatur textnya menjadi "Hello!". Kode tersebut akan dieksekusi ketika kita mengklik Button, dan komponen TextBlock dengan nama SuatuText akan menampilkan kata "Hello!". Kita coba jalankan aplikasi kita dengan klik tombol Play berwarna hijau yang terdapat tulisan Local Machine, atau cukup dengan menekan CTRL + F5.