Pada bagian sebelumnya telah saya jelaskan bagaimana persiapan dan pembuatan plug-in silverlight sederhana. Pada bagian ini akan saja jelaskan bagaimana menggambar objek dalam Canvas. Silverlight mendukung vektor grafik dasar seperti elemen Ellipse, kotak (Rectangle), garis (Line), Polyline, Polygon, dan Path. Secara keseluruhan elemen-elemen tersebut disebut sebagai elemen bentuk (shape).
Bentuk Dasar
Bentuk dasar pada Silverlight ada tiga macam yaitu Ellipse, Rectangle dan Line.
Ellipse merupakan bentuk lingkaran (oval atau bulat) yang memiliki diameter vertikal dan horizontal. Diameter vertical diset melalui property Height dan diameter horizontal diset melalui property Width.
Rectangle adalah bentuk kotak (segi empat) dengan tinggi dan lebar diset melalui property Height dan Width. Selain itu Rectangle juga memiliki property RadiusX dan RadiusY untuk membuat masing-masing sudut menjadi tumpul (rounded corner).
Berbeda dengan kedua bentuk sebelumnya, Line tidak memiliki property Height dan Width. Untuk menggambar garis dengan Line, terdapat propery X1, X2, Y1 dan Y2 sebagai koordinat awal (X1, Y1) dan akhir (X2, Y2) garis.
Contoh XAML berikut digunakan untuk menggambar Ellipse, Rectangle dan Line dalam satu Canvas.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Height="200" Width="200" Canvas.Left="30" Canvas.Top="30"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
<Rectangle Height="100" Width="100" Canvas.Left="5" Canvas.Top="5"
RadiusX="30" RadiusY="15"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"/>
<Line X1="280" Y1="10" X2="10" Y2="280"
Stroke="black" StrokeThickness="5"/>
</Canvas>
Hasil XAML di atas, Ellipse dengan ukuran 200x200 digambar di Canvas pada posisi (30, 30). Rectangle dengan ukuran 100x100 dan sudut dibulatkan sejauh 30 untuk sumbu X dan 15 untuk sumbu Y. Hasilnya masing-masing sudut tampak tidak runcing. Sedang pada penggambaran garis (Line), Line dimulai dari koordinat (280, 10) dan berakhir di koordinat (10, 280) akan tampil seperti gambar di bawah
Selanjutnya saya akan bahas bentuk dasar lain yaitu Polygon, Polyline dan Path. Polygon adalah kumpulan garis yang saling menyambung dengan titik awal menyambung ke titik akhir (tertutup). Polyline sama dengan Polygon, hanya saja titik awal tidak harus menyambung dengan titik akhir (terbuka). Berikut ini contoh perbedaan antara Polygon dan Polyline.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Polyline Points="150, 150 150, 250 250, 250 250, 150"
Stroke="Black" StrokeThickness="10"/>
<Polygon Points="10,10 10,110 110,110 110,10"
Stroke="Black" StrokeThickness="10" Fill="LightBlue"/>
</Canvas>
Pada contoh di atas, gambar Polyline dengan titik koordinat berturut-turut di (150, 150), (150, 250), (250, 250), (250, 150). Sedangkan pada Polygon gambar dengan dimensi yang sama namun posisinya berbeda yaitu pada titik koordinat (10, 10), (10, 110), (110, 110), (110, 10). Keduanya memiliki empat titik koordinat yang ditarik garis antar titik-titik tersebut. perbedaannya pada Polyline titik akhir tidak disambungkan dengan titik awal, pada Polygon titik akhir disambungkan ke titik awal membangun garis yang tertutup.
Bentuk dasar lainnya adalah Path. Berbeda dengan bentuk dasar lainnya, Path tidak menggunakan koordinat secara langsung untuk menggambar di Canvas. Path menggunakan atribut Data untuk merepresentasikan apa yang akan digambar. Path dapat digunakan untuk menggambar bentuk yang kompleks termasuk kurva dan bagian ellips (arcs). Berikut merubakan beberapa contoh bentuk yang dibuat dengan Path.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path Data="M25,5 L29.11,19.34
44.02,18.82 31.66,27.16
36.76,41.18 25,32
13.24,41.18 18.34,27.16
5.98,18.82 20.89,19.34z"
Stroke="Black" Fill="Gold"
Canvas.Left="10" Canvas.Top="10" />
<Path Data="M 10,100 C 10,300 300,-200 250,100z"
Stroke="Red" Fill="Orange"
Canvas.Left="10" Canvas.Top="10" />
<Path Data="M 0,200 L100,200 50,50z"
Stroke="Black" Fill="Gray"
Canvas.Left="150" Canvas.Top="70" />
</Canvas>
Pada contoh di atas, digambar tiga buah Path. Yang pertama Path dimulai dari koordinat 25,5 (M25,5 berarti pointer Move to [pindah ke] koordinat 25,5) dilanjutkan dengan menggambar garis (Line) dari koordinat sebelumnya (25,5) ke koordinat (29.11, 19.34). Berikutnya dilanjutkan dengan menggambar garis ke koordinat (44.02, 18.82) dan seterusnya sampai ke garis terakhir yang diakhiri dengan tanda "z". Path berikutnya menggambar dari koordinat (10, 100) dilanjutkan dengan kurva (Curve). Kurva memiliki tiga buah atribut yaitu koordinat awal, koordinat kedua dan koordinat terakhir. Path terakhir berupa gambar sederhana yang terbentuk dari tiga koordinat membentuk segitiga.
Menggambar Path dengan Kuas (Brush)
Kebanyakan bentuk terdiri dari dua buah bagian, pertama adalah garis tepi (Stroke) dan kedua adalah isi (Fill) yang berada di dalam garis tepi. Garis tepi dan isi dapat diset melalui property Stroke dan Fill. Berikut ini adalah ilustrasi dari garis tepi dan isi dari sebuah persegi.
Tidak semua bentuk memiliki property Stroke dan Fill. Line hanya memiliki property Stroke tapi tidak memiliki Fill. Penambahan property Fill pada Line tidak ada rpengaruhnya.
Shape dan Stroke dapat digambar menggunakan Brush. Brush adalah sebuah kuas yang digunakan untuk menggambar objek. Brush dapat berupa warna tunggal (Solid Color), Gradien, Gambar/Foto atau Video.
Menggambar dengan Warna Tunggal
Kuas yang paling sederhana adalah warna tunggal (solid brush). Untuk menggambar dengan kuas ini, digunakan property SolidColorBrush. Property ini dapat berisi nama warna (dalam Bahasa Inggris) seperti "Black", "Green", "Yellow", dan lainnya atau menggunakan notasi warna 6 atau 8 digit heksadesimal.
Format notasi warna heksadesinal adalah #aarrggbb, dimana:
- aa adalah nilai tembus pandang (transparansi) dari 0 sampai ff, 0=tembus pandang dan FF=tidak tembus pandang. Jika nilai aa tidak disebutkan (6 digit heksadesimal), maka nilai aa akan diset menjadi ff.
- rr adalah nilai warna merah dari 0 sampai ff
- gg adalah nilai warna hijau dari 0 sampai ff
- bb adalah nilai warna biru dari 0 sampai ff
Sebagai contoh, #0033ff menghasilkan warna 
. Dan #77ff0000 menghasilkan warna 
. Berikut contoh untuk set warna dalam beberapa cara.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10"
Fill="black"/> <!-- SolidColorBrush by color name. -->
<Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10"
Fill="#000000"/> <!-- SolidColorBrush by 6-digit hexadecimal notation. -->
<Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110"
Fill="#ff000000"/> <!-- SolidColorBrush by 8-digit hexadecimal notation. -->
<Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110">
<Ellipse.Fill>
<!-- SolidColorBrush by object element syntax. -->
<SolidColorBrush Color="Black"/>
</Ellipse.Fill>
</Ellipse>
</Canvas>
Pada contoh di atas terdapat empat ellipse dengan warna hitam. Keempat ellipse tersebut diwarnai menggunakan empat macam cara yaitu dengan menyebut nama warna secara langsung (black), menggunakan notasi heksadesimal (#000000), menggunakan notasi heksadesimal 8-digit (#ff000000) dan menggunakan element SolidColorBrush. Kode di atas akan tampil seperti gambar di bawah.
Menggambar gradasi warna dengan LinearGradientBrush dan RadialGradientBrush
Gradasi warna linier dapat dibuat dengan LinearGradientBrush dan gradasi warna radial dapat dibuat dengan RadialGradientBrush. Keduanya memiliki satu atau lebih warna pada titik tertentu yang menandakan transisi warna yang akan digambar pada titik tersebut. LinearGradiantBrush secara default menggambar gradasi warna diagonal dari pojok kiri atas sampai pojok kanan bawah. Sedangkan pada RadialGradientBrush secara default berpusat pada tengah sebuah objek.
Perhatikan contoh berikut.
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Linear gradients -->
<Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!-- Radial gradients -->
<Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="1,0">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Red" Offset="0.25" />
<GradientStop Color="Blue" Offset="0.75" />
<GradientStop Color="LimeGreen" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
Dalam contoh XAML di atas, digambar empat buah persegi panjang dengan dua LinearGradientBrush dan dua RadialGradientBrush. Masing-masing persegi panjang memiliki GradientStop yang sama yaitu warna "Yellow" pada offset 0.0, warna "Red" pada offset 0.25, warna "Blue" pada offset 0.75 dan warna "LimeGreen" pada offset 1.0.
Persegi panjang pertama dan kedua menggunakan LinearGradientBrush, yang pertama menggunakan StartPoint dan EndPoint default (StartPoint="0,0"; EndPoint="1,1") sedangkan satunya menggunakan StartPoint="0,0" (pojok kiri atas) dan EndPoint="1,0" (pojok kanan atas).
Persegi panjang ketiga dan keempat menggunakan RadialGradientBrush, yang pertama menggunakan GradientOrigin default (di tengah objek) dan lainnya mengguankan GradientOrigin="1,0" yaitu pada sudut kanan atas.
Catatan: Pada GradientBrush offset bernilai antara 0 sampai 1 dengan nilai 0 berada di titik awal (StartPoint) dan nilai 1 berada di titik akhir (EndPoint). StartPoint dan EndPoint memiliki nilai koordinat x,y dengan nilai x dan y antara 0 sampai 1.
Hasil keluaran XAML di atas dapat dilihat pada gambar berikut.
Untuk lebih memahami bagaimana gradient digambar, berikut ilustrasi yang menggambarkan gradient pada contoh sebelumnya.
Catatan: Gradient juga dapat digunakan untuk menggambar garis tepi (Stroke).
Menggambar image dengan ImageBrush
Selain gradient, terdapat ImageBrush yang digunakan untuk mengisi bentuk objek (Shape) dengan sebuah image (gambar/foto). Secara default objek image akan diisikan memenuhi keseluruhan bagian pada objek. Property Stretch juga dapat digunakan untuk menentukan bagaimana sebuah image akan ditempatkan di dalam objek.
Lihat contoh XAML berikut.
<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="White">
<Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10"
Stroke="Black" StrokeThickness="1">
<Rectangle.Fill>
<ImageBrush ImageSource="star.png"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10"
Stroke="Black" StrokeThickness="1">
<Rectangle.Fill>
<ImageBrush ImageSource="star.png" Stretch="Uniform"/>
</Rectangle.Fill>
</Rectangle>
</Canvas>
Contoh XAML di atas akan menghasilkan tampilan seperti gambar berikut.
Dari contoh di atas, ImageBrush (image asli seperti gambar di bawah) pertama memenuhi semua area pada persegi panjang. Pada ImageBrush yang kedua property Stretch diisi dengan Uniform sehingga image akan ditarik dengan skala yang sama antar panjang dan lebar pada objek tempat dia digambar.
