Pada pembahasan series kali ini, ini akan menjadi tahap terakhir kita untuk mendesign sebuah design, di series berikutnya kita sudah siap untuk mempublish aplikasi kita dan mensubmitnya ke Windows Store. Kali ini kita akan mendesign sebuah User Control untuk aplikasi/game sederhana kita.

User Control yang akan kita tambahkan adalah yaitu untuk Setting, jika kalian familiar dan sering menggunakan aplikasi Windows Store ketika kalian gerakan mouse kalian ke sisi kanan layar dan memilih settings, maka kita akan melihat flyout untuk setting yang biasanya berisikan page Privacy Policy, Help, About, dan juga Rate & Review. Di series ini kita akan membahas bagaimana kita menambahkan hal tersebut ke project kita.

Pada solution explorer, kita Add New Item, lalu kita pilih User Control, kita namakan dengan About.xaml

Add User Control
Add User Control

Untuk mendesign User Control, sama dengan page biasanya, kita bias dengan mudah drag n drop dari toolbox, namun di project saya, saya hanya mendesign bentuk secara minimalis/basic saja. Syntaks xaml-nya sebagai berikut:



<Grid>
<StackPanel>
<TextBlock FontSize="20" FontWeight="ExtraBlack" Foreground="Black" Text="About"/>
<TextBlock FontSize="16" Text="ABC 5 DASAR"/>
<TextBlock FontSize="16" Text="Version 1.0.0" Margin="0,0,0,20"/>
<TextBlock FontSize="16" TextWrapping="WrapWholeWords" Text="ABC 5 Dasar merupakan game kuis sederhana, berdasarkan dari permainan klasik atau tradisional di Indonesia, beberapa kategori pertanyaan merupakan berasal dari Indonesia, dan pada ini merupakan versi awal dan bisa di kembangkan lebih lanjut lagi"/>
</StackPanel>
</Grid>

About Xaml
About Xaml

Selanjutnya kita tambahkan code logic untuk menampilkan User Control kita, pada App.xaml.cs masukan syntax berikut:

var about = new SettingsCommand("about", "About", (handler) =>
{
var settings = new SettingsFlyout();
settings.Content = new About();
settings.Background = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));
settings.Title = "About";
settings.Show();
});
args.Request.ApplicationCommands.Add(about);

Mudah dipelajari bukan? kita membuat objek baru dari SettingCommand, dan menset parameternya sesuai dengan page kita, kalian bias set content, background, title. Dan untuk menambahkannya menggunakan method Add.
Kita bisa menambahkan juga Privacy Policy dan juga Help persis seperti yang telah dicontohkan.

Help Page
Help Page


var help = new SettingsCommand("help", "Help", (handler) =>
{
var settings = new SettingsFlyout();
settings.Content = new Help();
settings.Background = new SolidColorBrush(Color.FromArgb(255, 255, 255, 255));
settings.Title = "Help";
settings.Show();
});
args.Request.ApplicationCommands.Add(help);

Dan hasil akhir ketika dijalankan adalah akan seperti berikut ini:

Settings Game
Settings Game
Setting Game About
Setting Game About

Sekian untuk series kali ini, semoga kawan-kawan bisa mempleajarinya dengan mudah, selanjutnya kita akan mengemas aplikasi kita sebelum akhirnya kita publish ke Windows Store.

Terima Kasih, Semoga Bermafaat

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s