Langsung ke konten utama

Windows Phone Tutorial - Membuat Sliding Menu (2) - Animasi Slide In dan Slide Out

Oke, selamat datang di tutorial kedua dari Membuat Sliding Menu di Windows Phone. Kali ini kita akan fokus pada pembuatan animasi Slide In dan Slide Out menu geser kita. Untuk toturial ini disarankan Anda membaca dan mengikuti langkah-langkah yang sudah saya jelaskan di bagian pertama. Kalau Anda tidak keberatan baca langkah-langkah di bawah ini, tidak masalah, terserah Anda.



Untuk bagian kedua dari tutorial ini, saya akan menggunakan Blend for Visual Studio 2012.  Bagi Anda yang belum familiar dengan tools ini, singkat kata tools ini merupakan tools yang disarankan bagi designer untuk mendesain aplikasi Windows Phone atau Windows 8.

Pertama-tama, di Visual Studio 2012, bukalah aplikasi yang sudah Anda buat dari tutorial pertama.

Kemudian klik kanan Solution kalian di Solution Explorer dan klik Open in Blend (atau bisa saja langsung buka Blend 2012 dan buka projek kalian). Aplikasi kalian akan terbuka di Blend for Visual Studio.

Ketikkan kodingan XAML ini sesudah akhir pembukaan tag phone:PhoneApplicationPage dan sebelum grid LayoutRoot.

<phone:PhoneApplicationPage.Resources>
  <Storyboard x:Name="MenuIn">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="slideMenu">
    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="364"/>
   </DoubleAnimationUsingKeyFrames>
  </Storyboard>
  <Storyboard x:Name="MenuOut">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="slideMenu">
    <SplineDoubleKeyFrame KeyTime="0" Value="364"/>
    <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
   </DoubleAnimationUsingKeyFrames>
  </Storyboard>
 </phone:PhoneApplicationPage.Resources>

Dan sudah deh, ini kalian sudah membuat animasi slide in dan out dari slide menu. Silahkan tunggu postingan berikutnya ya gans :)






Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Mengubah Repository Linux Menjadi Repository Lokal

Hlo teman-teman, pengen nge-share lagi nihh.. Baru-baru ini saya menginstall Deepin Linux, karena melihat UI cantiknya, dan saya juga mulai tertarik ke yang berbasis open source. Instalasi OS ini sangat mudah dan tidak make yang ribet-ribet. Hsilnya juga cantik kok.
1 komentar
Baca selengkapnya

PHP Tutorial - Menjalankan Program .exe "Hello World!" Melalui PHP

Hai semua, saya ingin berbagi ilmu yang saya dapatkan sambil mengerjakan skripsi saya. Pernah tidak, kalian sudah bikin suatu program keren menggunakan bahasa C/C++, tapi kalian harus menjalankannya di SERVER??? Contoh kasus yang membuat Anda melakukan ini apa? Contoh sederhananya membuat Web Service. Di mana operasi perhitungan service yang ditawarkan menggunakan bahasa C/C++. Kalau misal kalian mau bikin make PHP dari awal web servicenya, sebenarnya tidak apa-apa juga, tapi kalau misalkan sudah ada program C/C++-nya, mending make yang sudah ada daripada buat dari awal lagi kan??? :)
Posting Komentar
Baca selengkapnya

Inkscape tutorial - Pembuatan Bola Biliar yang Tampak 3D

Salah satu dari aspek design yang sangat populer sekarang ini adalah pembuatan gambar 3D. Lebih dari satu teknik dapat digunakan untuk membuat gambar 3D. Bahkan gambar 2D bisa dibuat terlihat 3D. Di sini saya akan menunjukkan bagaimana membuat bola biliar tapi yang tampak tiga dimensi menggunakan Inkscape. Ini adalah materi yang saya pelajari dan kopas dari sini . Langkah-langkahnya adalah sebagai berikut: - Buat sebuah lingkaran dengan memilih circle tool. Agar lingkarannya tidak asal, buatlah sambil menekan Ctrl. - Hilangkan stroke-nya dengan klik kanan pada warna stroke di bagian bawah, kemudian pilih Remove Stroke. - Ganti warna lingkaran tersebut dengan warna dasar bola yang kalian inginkan. Di sini saya menggunakan warna coklat tua. - Pilih gradient tool (Ctrl+F1), dan pastikan kalian memilih tombol gradasi radialnya pada bagian atas jendela kalian setelah kalian memilih gradient tool. - Pastikan lingkaran bawah yang terpilih setelah kalian melakukan gr...
Posting Komentar
Baca selengkapnya