Desain UI dan Logo Aplikasi "Guess The Code" dengan Visual Studio Blend dan Vector Graphic Editor

Visual Studio Blend adalah tool yang memudahkan kita untuk mendesain UI sebuah aplikasi. Cara membuka Blend bisa dilakukan dengan klik kanan pada file .xaml kita, lalu pilih Open in Blend.

Setelah kita membuka Blend, akan muncul tampilan seperti ini.

Platform windows teranyar saat ini identik dengan Tile Design, yaitu tampilan-tampilan yang terdiri dari petak-petak berwarna seperti pada gambar Guess The Code di atas atau seperti pada tampilan Start pada Windows 8/8.1.

Namun tampilan petak tersebut bukan hanya sebuah tampilan, namun juga bisa di-klik untuk membuka suatu aplikasi ataupun berupa link yang mengarah ke suatu halaman.

Kita bisa membuat seperti itu pada aplikasi kita. Pertama, klik Rectangle pada sebelah kiri Blend.

Kemudian buatlah sebuah petak pada layar monitor tersebut. Kita dapat mengatur warna petak tersebut pada bagian Brush di sebelah kanan layar, perhatikan juga ketika kita menambahkan petak tersebut, akan bertambah sebuah Rectangle pada bagian Object and Timeline. 

(P.S: Kamu bisa mengunjungi situs flatuicolors.com untuk memilih warna, klik pada suatu warna lalu paste kode heksadesimal dari warna tersebut pada bagian brush)

Setelah kita mengatur dengan warna dan ukuran yang sesuai, tambahkan Button pada petak tersebut dengan meng-klik tool yang sederetan dengan tool Rectangle tadi. Lalu pada bagian Object and Timeline, klik kanan pada Button lalu pilih Edit Text. Misalnya saya mengedit teks tersebut menjadi Level 4.

Langkah selanjutnya kita akan membuat halaman baru pada aplikasi kita, tutup visual studio blend dan klik save. Pada Visual Studio, ketika muncul kotak dialog, pilih Yes to All. Kemudian pada Solution Explorer, klik kanan pada project Windows lalu pilih Add -> New Item. Pilih Basic Page.

Ketika muncul suatu kotak dialog, pilih Yes. Secara otomatis, visual studio akan memberi nama pada file tersebut BasicPage1.xaml ketika kita pertama kali membuat halaman baru. Kita kembali lagi ke MainPage.xaml, klik button yang telah kita buat tadi, lalu pada Properties klik ikon yang bergambar halilintar, kemudian pada bagian Click kita akan menambahkan Event Handler dengan nama PindahHalaman, klik 2x pada kata PindahHalaman tersebut dan otomatis pada file MainPage.xaml.cs akan membuat method dengan nama PindahHalaman. Pada method PindahHalaman, tambahkan kode berikut ini.

if (this.Frame != null)
{
   this.Frame.Navigate(typeof(BasicPage1));
}

Maksud dari kode tersebut adalah jika kita berada pada suatu halaman, kita akan di-Navigate-kan ke halaman yang bernama BasicPage1. Coba jalankan aplikasi dengan menekan CTRL + F5, lalu klik pada Button yang kita buat tadi dan lihat hasilnya.
Pada aplikasi Guess The Code yang sedang saya kembangkan, terdapat 10 petak level yang jika di klik pada salah satunya maka akan mengarah ke level tertentu. Misalnya saya meng-klik pada petak Level 4, maka akan mengarah ke halaman Level4.

Ketika kita menjalankan aplikasi kita, secara otomatis tampilan Start pada Windows akan menampilkan link tile ke aplikasi kita.

Secara default, aplikasi kita akan tampil sebagai petak berwarna hitam. Namun pada aplikasi "Guess The Code", saya menambahkan logo pada aplikasi saya. Kamu bisa membuat logo tersebut dengan Vector Graphic Editor seperti Inkscape, CorelDraw, Adobe Illustrator, dan lain-lain.
Ini adalah logo yang saya buat untuk ukuran Wide Logo (310 x 150) pixel.

Cara menambahkan logo tersebut, klik Package.appxmanifest pada Solution Explorer, lalu pilih pada bagian Visual Assets, maka akan muncul tampilan seperti ini.

Terdapat berbagai spesifikasi ukuran logo, kamu dapat mengatur ukuran logo pada picresize.com. Pada bagian Show name terdapat 3 checkbox untuk mengatur pada ukuran mana logo kita menampilkan nama dari aplikasi yang kita buat dan pada ukuran mana yang hanya menampilkan logo saja. Kita memberi nama pada bagian Short name yang terdapat di atas Show name. Dan pada sebelah kiri layar terdapat beberapa spesifikasi ukuran logo, yaitu Square 70 x 70, Square 150 x 150, Wide 310 x 150, Square 310 x 310, Square 30 x 30.

Pada tampilan Start, kita dapat mengatur ukuran logo yang ditampilkan pada aplikasi kita dengan klik kanan pada aplikasi tersebut , pilih resize, lalu pilih ukuran yang mau ditampilkan.

Lalu perhatikan, saat kita memulai menjalankan aplikasi kita, pertama-tama akan muncul tampilan seperti ini.

Ini dinamakan Splash Screen, kita bisa mengubah gambar tersebut pada bagian Splash Screen di Visual Assets tadi. Pada aplikasi "Guess The Code", saya mengubah tampilan Splash Screen menjadi seperti ini.