Menambahkan Snapping ke Dalam Aplikasi Metro Style

Halo apa kabar? Hari ini saya akan mempraktekkan bagaimana menambahkan snapping pada aplikasi metro style di windows 8. Snapping sendiri adalah bagian yang sangat penting untuk ditambahkan pada aplikasi metro style karena merupakan salah satu syarat utama sebuah aplikasi metro style memiliki snapping jika aplikasi tersebut ingin terpublish di Windows Store.

Jika kalian membuat aplikasi Grid App (XAML), kalian tidak perlu menambahkan snapping secara manual karena sudah disediakan secara default. Akan tetapi jika kalian membuat aplikasi menggunakan Blank App (XAML), kalian harus menambahkannya secara manual.

Berikut adalah pembuatan snapping pada aplikasi metro style.

 

Pembuatan Aplikasi

Sekarang kalian bukalah Visual Studio 2012 dan buatlah Blank App (XAML) dan beri nama : AplikasiSnapping

Aplikasi Snapping 1

Lalu setelah aplikasi terbuat, bukalah MainPage.xaml dan tulislah code berikut pada bagian grid :

<Grid Background=”#FF208D9E”>
<TextBlock HorizontalAlignment=”Left” Margin=”501,204,0,0″ TextWrapping=”Wrap” Text=”Aplikasi” VerticalAlignment=”Top” Height=”61″ Width=”166″ FontSize=”48″/>
<TextBlock HorizontalAlignment=”Left” Margin=”676,204,0,0″ TextWrapping=”Wrap” Text=”Snapping” VerticalAlignment=”Top” Height=”61″ Width=”203″ FontSize=”48″/>

</Grid>

Sehingga tampilan aplikasi kalian menjadi seperti berikut :

Aplikasi Snapping 2

 

Sekarang kalian perlu menambahkan LayoutAwarePage.cs ke folder Common kalian pada Solution Explorer. Cara mudahnya adalah kalian tambahkan Basic Page ke dalam project kalian dengan cara klik kanan AplikasiSnapping pada Solution Explorer kemudian pilih add-New Item-Basic Page. Lalu tanpa memberi nama pada Basic Page tekan Add.

Setelah kalian menekan Add, di layar kalian tampil sebuah dialog box yang menyatakan akan menambahkan beberapa file ke dalam folder Common. Tekan Yes.

Aplikasi Snapping 4

Setelah itu beberapa file .cs pun tertambahkan di dalam folder Common kalian.

Sebenarnya Basic Page yang telah kalian tambahkan tersebut tidak digunakan dalam aplikasi, hanya saja kita membutuhkan file” yang berada dalam folder Common tersebut, sehingga kalian boleh menghapus BasicPage yang tadi kalian buat.

Oke sekarang kembali pada MainPage.xaml, lakukan modifikasi pada bagian “<Page” (bagian paling atas code) menjadi “<common:LayoutAwarePage”. Dan modifikasi penutup “</Page>” (bagian paling bawah code) menjadi “</common:LayoutAwarePage>”.

Jika terjadi error pada xaml kalian abaikan saja dulu ya.

Sekarang tambahkan pada bagian bawah dari “<common:LayoutAwarePage” code berikut :

xmlns:common=”using:AplikasiSnapping.Common”

 

Lalu tekan F7 untuk masuk ke halaman MainPage.xaml.cs, kemudian modifikasi bagian “public sealed partial class MainPage : Page” menjadi “public sealed partial class MainPage : AplikasiSnapping.Common.LayoutAwarePage”.

Setelah itu aplikasi kalian siap untuk ditambahkan snapping.

Maka tulislah code berikut di dalam bagian grid :

<VisualStateGroup x:Name=”ApplicationViewStates”>
<VisualState x:Name=”FullScreenLandscape”/>
<VisualState x:Name=”Filled”/>

<!– The entire page respects the narrower 100-pixel margin convention for portrait –>
<VisualState x:Name=”FullScreenPortrait”>
<Storyboard>
</Storyboard>
</VisualState>

<!– The back button and title have different styles when snapped –>
<VisualState x:Name=”Snapped”>
<Storyboard>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

 

Penambahan Snapping

Sekarang klik kanan pada MainPage.xaml kalian dan pilihlah “open in blend…”.

Setelah aplikasi Blend terbuka, kalian pilihlah “device”.

Aplikasi Snapping 5

Lalu pada bagian “view” aturlah tampilan aplikasi kalian sesuai dengan konten aplikasi kalian.

 

 

Jalankan Aplikasi

Saatnya menjalankan aplikasi! Sekarang run project kalian dan cobalah snapping pada aplikasi kalian.

Aplikasi Snapping 6

Saat kalian melakukan snapping.

Aplikasi Snapping 7

Mudah bukan. Saatnya kalian yang mencoba 🙂

 

 

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

%d blogger menyukai ini: