Umi Fadilah

Dalam channel geeks edisi ke-7 (Januari 2010) ini kebetulan saya menemani bung Roraj membawakan demo Silverlight 4, mengenai fitur Multitouch. Fitur ini sudah dikenalkan sejak pertengahan tahun 2009 lalu (masih Silverlight 3), namun saat itu untuk membuat sebuah aplikasi image browser sederhana saja membutuhkan waktu yang cukup lama untuk mempelajari dan juga kodingnya :p

Thanks to Microsoft Expression Community, percaya atau tidak, sekarang cuman butuh waktu kurang lebih 10 menit untuk membuat aplikasi sederhana Silverlight Multitouch pertama Anda, dengan menggunakan yang disebut dengan “BEHAVIOUR”.

“A Behavior is in essence a reusable piece of interactivity that can be applied directly to user interface elements in Expression Blend. Reusable libraries of Behaviors can be created and shared within a team allowing interactivity to be applied in a coherent and robust way across a project.” – The Silverlight Team Blog

Kira-kira baru sebulan lalu dirilis behaviour khusus yang akan menambahkan manipulasi multi-touch (meliputi Translate, Zoom, dan Rotate) ke dalam aplikasi, sehingga bagi Anda yang kebetulan punya “device raba-raba” mungkin bisa dicoba dan dimaksimalkan penggunaannya :)

Jadi, gimana cara pakenya?

1. Download Silverlight Multitouch Behaviour dari galeri expression disini.
2. Yang penting sebenarnya adalah bagaimana caranya agar Behaviour yang telah kita download itu tadi dapat dikenali di Expression Blend 3.0 sebagai bagian dari Assets, sehingga tujuannya adalah seperti ini:
3. Untuk dapat dikenali maka kita harus meng-copy file .DLL dari behaviour tersebut ke dalam Library pada Expression Blend 3. Setelah diekstrak, masuk ke dalam folder berikut,
   • Downloads\SilverlightMultiTouch\MultiTouch.Behaviors.Silverlight\Bin\Debug
4. Kemudian, copy 5 file berikut ke dalam Library tempat instalasi Blend Anda, sebagai contoh disini punya saya berada di:
   • C:\Program Files (x86)\Microsoft Expression\Blend 3\Libraries\Silverlight\v3.0
5. Selanjutnya, buat project Silverlight app baru dalam Expression Blend 3. File > New Project > Silverlight 3 Application + Website
6. Pastikan di panel Assets, behaviour kita tersebut telah ada dan dikenali (seperti poin nomor 2). Jika belum ada, coba restart Expression Blend Anda dan coba lagi :)
   • Jika behaviour dengan nama MultiTouchManipulationBehaviour belum ada juga, maka lakukan langkah berikut.
   • Pilih Project > Add Reference, lalu pada Open Dialog yang terbuka, navigasikan ke tempat file .DLL tadi berada, lalu klik OK.
7. Untuk mengetes behaviour tersebut, buatlah sebuah Rectangle pada kanvas Anda.
8. Drag MultiTouchManipulationBehaviour dari panel Assets ke dalam panel Objects and Timeline, lalu tinggal menempelkan pada objek yang ingin diberikan perlakuan multitouch. Dapat dilihat di Panel Properties terdapat 4 buah properti tambahan yaitu:
   • TouchRotateEnabled, jika diset True maka objek dapat dirotasikan mengikuti gesture sentuhan tangan.
   • TouchTranslateEnabled, jika diset True maka objek dapat dipindah-pindah (ditranslasikan)
   • TouchScaleEnabled, jika diset True maka objek dapat diubah-ubah ukurannya dengan gesture pinch/zoom dengan 2 jari
   • InertiaEnable, this is everything that provide basic physics to a multitouch application :)
9. Tekan F5, voila!

Ketika Anda menjalankan aplikasi, coba lakukan drag, pinch, dan rotate. Gerakannya masih terasa kurang smooth? Terjadi keanehan saat melakuka zoom-out? Maka ini tips dari saya mengenai hal-hal yang perlu Anda perhatikan:

• Pada defaultnya LayoutRoot adalah berupa Grid. Nah supaya hasil manipulasi multitouchnya lebih smooth, coba bungkus objek yang dikenakan Behaviour dengan Canvas. Tidak perlu mengeset ukuran width x heightnya. Dengan canvas, objek tadi tidak akan “lari-lari” ketika Anda melakukan pinch/zoom :)
• Di bagian header User Control, jangan set secara manual width maupun height dari User Control, namun sebagai penggantinya tambahkan beberapa baris kode untuk “design-time sizing” seperti berikut :

  ...
  mc:Ignorable="d" 
  d:DesignHeight="500" d:DesignWidth="500"

  Jika diset secara manual, maka pada saat runtime area user control akan terbatasi. Oleh karena itu kode diatas merupakan kode untuk design-time sizing, yaitu 500x500 sebagai ukuran di dalam jendela designer pada Expression Blend/Visual Studio, tapi tidak berpengaruh terhadapa ukuran user control pada saat runtime. Lebih lengkapnya mengenai design-time sizing dapat dibaca disini.

Because it is so simple i don’t think uploading the source-code is necessary :)  Beginilah kira-kira kode akhirnya:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:MultiTouch_Behaviors_Silverlight
        ="clr-namespace:MultiTouch.Behaviors.Silverlight;assembly=MultiTouch.Behaviors.Silverlight"
    x:Class="SL_MultiTouch.MainPage"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" 
    d:DesignHeight="1000" d:DesignWidth="1000">

    <Grid x:Name="LayoutRoot">
        <Canvas>
            <Rectangle Fill="Red" Stroke="Black" Height="300" Width="300">
                <i:Interaction.Behaviors>
                    <MultiTouch_Behaviors_Silverlight:MultiTouchManipulationBehavior
                        InertiaEnabled="True" 
                        TouchRotateEnabled="True" 
                        TouchTranslateEnabled="True" 
                        TouchScaleEnabled="True"/>
                </i:Interaction.Behaviors>
            </Rectangle>
        </Canvas>
    </Grid>
</UserControl>

Share this post: | | | |