aris_feryanto

WPF Effect: Creating A Custom Effect

Beberapa tutorial berbahasa Inggris tentang WPF Effect yang saya lihat, tidak menampilkan bagaimana langkah-langkah yang cukup jelas untuk membuat Custom Effect. Akhirnya saya mencoba-coba mengutak-atik sana sini di Visual C# 2008 Express Edition saya dan berhasil membuat sebuah Effect yang sederhana. Di sini saya akan mencoba berbagi bagaimana caranya…

Bersiap…

Pertama-tama harus diinstall beberapa tool yang dibutuhkan untuk membuat Custom Effect, yaitu:

• Microsoft Visual C# 2008 (Express Edition)
• Microsoft DirectX SDK

Selain itu, dibutuhkan pengetahuan membuat pixel shader dalam bahasa HLSL yang akan coba saya bahas sedikit nantinya (jika ada waktu :p).

Mulai…!

Custom Effect yang akan kita buat kali ini adalah Grayscale Effect.

  ==>

MEMBUAT SHADER

1. Buka notepad (atau editor kesayangan Anda yang lain)
2. Ketikkan kode program shader berikut:
   
   sampler2D implicitInput : register(s0);

   float4 main(float2 uv : TEXCOORD) : COLOR
   {
       float4 color = tex2D(implicitInput, uv.xy);
       float4 newcolor;
       newcolor = (color.r + color.g + color.b) * 0.33333333;
       newcolor.a = color.a;
       return newcolor;
   }
   
   NB: kode program shader di atas bekerja untuk setiap pixel. newcolor di-set menjadi campuran warna rgb yang intensitasnya dibagi rata 1/3.
   

3. Simpan dengan nama file Grayscale.fx (ingat: gunakan encoding ANSI, jangan unicode, compiler shader dari DirectX hanya bisa mengkompilasi kode dengan encoding ANSI)
4. Buka DirextX SDK Command Prompt, pindahkan CWD (Current Working Directory) ke tempat penyimpanan file .fx sebelumnya.
5. Ketikkan
   
   fxc /T ps_2_0 /E main /Fo Grayscale.ps Grayscale.fx
   
   untuk mengkompilasi file .fx yang telah dibuat dan meng-output kan hasilnya ke Grayscale.ps.

MEMBUAT PEMBUNGKUS EFFECT DI C#

1. Buat project baru di Visual C# 2008, File –> New Project, pilih template Class Library. Beri nama GrayscaleEffect.
2. Rename dokumen Class1.cs menjadi GrayscaleEffect.cs.
3. Tambahkan file .ps yang telah dikompilasi ke dalam project
   
4. Set Property “Build Action” pada file .ps yang telah ditambahkan menjadi Resource
   
5. Tambahkan References “WindowsBase”, “PresentationCore”, dan “PresentationFramework”
   
6. Ketikkan kode berikut dalam file Grayscale.cs
   
   1. using System;
   2. using System.Windows;
   3. using System.Windows.Media;
   4. using System.Windows.Media.Effects;
   6. namespace GrayscaleEffect
   7. {
   8.     public class GrayscaleEffect : ShaderEffect
   9.     {
   10.         public GrayscaleEffect()
   11.         {
   12.             PixelShader =
   13.                 new PixelShader()
   14.                 {
   15.                     UriSource = new Uri("pack://application:,,,/GrayscaleEffect;component/Grayscale.ps")
   16.                 };
   17.             UpdateShaderValue(InputProperty);
   18.         }
   20.         public Brush Input
   21.         {
   22.             get { return (Brush)GetValue(InputProperty); }
   23.             set { SetValue(InputProperty, value); }
   24.         }
   26.         public static DependencyProperty InputProperty =
   27.             ShaderEffect.RegisterPixelShaderSamplerProperty("Input", typeof(GrayscaleEffect), 0);
   28.     }
   29. }
   
   Sedikit penjelasan: Kode di atas membuat kelas GrayscaleEffect yang merupakan turunan dari kelas ShaderEffect. Dalam konstruktornya, property PixelShader di-set dengan shader dari file .ps hasil kompilasi fxc sebelumnya. Property Input dan InputProperty (DependencyProperty-nya) dari kelas ini merupakan “penghubung” dengan implicitInput dalam kode program shader sebelumnya.
   
   
7. Build project dengan menekan F6

MEMBUAT APLIKASI WPF YANG MENGGUNAKAN EFFECT YANG TELAH DIBUAT

1. Tambahkan project baru ke dalam solution, Klik kanan solution –> Add –> New Project.
   
   Karena project library GrayscaleEffect tadi belum disimpan, maka VS akan menanyakan tempat penyimpanan. Pilih directory yang diinginkan, simpan, dan lanjutkan membuat project baru.
2. Pilih template WPF Application, beri nama GrayscaleTest.
3. Tambahkan Reference GrayscaleEffect pada project, Klik kanan pada References GrayscaleTest –> Add Reference –> Tab Projects –> GrayscaleEffect –> OK
4. Tambahkan namespace dalam kode XAML untuk library GrayscaleEffect yang telah dibuat.
   1. xmlns:fx="clr-namespace:GrayscaleEffect;assembly=GrayscaleEffect"
5. Tambahkan sebuah image dari file gambar ke dalam Grid yang telah ada secara default. Kemudian tambahkan property Grid.Effect sebagai berikut:
   1. <Grid.Effect>
   2.     <fx:GrayscaleEffect />
   3. </Grid.Effect>
6. Kode XAML keseluruhannya akan mirip seperti berikut:
   1. <Window x:Class="GrayscaleTest.Window1"
   2.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4.    xmlns:fx="clr-namespace:GrayscaleEffect;assembly=GrayscaleEffect"
   5.    Title="Window1" Height="300" Width="300">
   6.     <Grid>
   7.         <Grid.Effect>
   8.             <fx:GrayscaleEffect />
   9.         </Grid.Effect>
   10.         <Image Margin="12,12,66,100" Name="image1" Stretch="Fill" Source="nature.jpg" />
   11.     </Grid>
   12. </Window>
7. Set GrayscaleTest sebagai StartupProject
   
8. Jalankan dengan menekan tombol F5. Lihat Image berubah warna menjadi grayscale.

Demikian tutorial membuat GrayscaleEffect. Pada postingan selanjutnya, saya akan membahas bagaimana menganimasikan GrayscaleEffect ini menjadi seperti background Windows XP yang menjadi grayscale saat akan di shutdown.

Share this post: | | | |