Tag Archives: blend

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 🙂

 

 

Membuat Animasi Sederhana Menggunakan Blend di Aplikasi Metro Style

Hai, hari ini saya akan mempraktekkan sedikit untuk membuat animasi sederhana menggunakan aplikasi Blend. Aplikasi Blend sudah terinstalkan otomatis jika kalian menginstal aplikasi Visual Studio 2012.

Sebenarnya dengan aplikasi Blend kita akan sangat mudah untuk mendesign aplikasi metro style. Selain itu untuk membuat objek bergerak (animasi) pun dapat dilakukan dengan menggunakan Blend.

Langsung saja kita membuat aplikasinya.

 

 

Pembuatan Aplikasi

Sekarang kalian buatlah Blank App (XAML) dan beri nama : AplikasiAnimasi

Aplikasi Animasi 1

Setelah aplikasi kalian terbuat, masuklah ke MainPage.xaml dan tulislah code berikut di bagian grid :

<Grid Background=”#FF804D23″>
<Rectangle x:Name=”kotak” Fill=”#FF722AB9″ HorizontalAlignment=”Left” Height=”136″ Margin=”0,632,0,0″ Stroke=”Black” VerticalAlignment=”Top” Width=”133″/>

</Grid>

Sehingga tampilan aplikasi kalian menjadi seperti berikut.

Aplikasi Animasi 2

Sekarang klik kanan pada MainPage.xaml pada bagian solution explorer dan pilih “Open in Blend…”.

Aplikasi Animasi 3

Setelah kalian masuk aplikasi Blend, pilihlah new (tanda +).

Aplikasi Animasi 4

Kemudian beri nama “kotakAnimation” dan tekan OK.

Setelah itu akan tampil animation editor dan lakukanlah animasi pada kotak yang kalian sudah buat sebelumnya.

Aplikasi Animasi 5

Setelah itu save pekerjaan kalian dan close Blend dengan cara klik close di kanan atas.

Setelah itu masuklah ke halaman MainPage.xaml.cs.

kemudian pada bagian constructor tambahkan code “kotakAnimation.begin();”

 

 

Jalankan Aplikasi

Waktunya menjalankan aplikasi. Sekarang run project kalian dan lihatlah kotak yang kalian bergerak sesuai dengan animasi yang kalian buat pada aplikasi Blend.

Aplikasi Animasi 6