Bu gün Silverlight ile projeler geliştiren bir arkadaşımdan gelen soru üzerine kolları sıvadım ve silverlightta verilen bir fonksiyonun grafiğini ekrana çizdiren bir proje oluşturdum. Mantıkda basit olarak gözüksede pratikte beni biraz düşündürdü, çünkü kordinat düzlemi bizim silverlightta kullandığımız canvas'ın Top ve Left property'lerinden biraz farklı. Bir kaç denemeden sonra ortaya kullanışlı bir fonksiyon çıktı. Şimdi gelin bu fonksiyonu inceleyelim ve çıktısına bakalım.
Tasarım Kısmı
Öncelikle Visual Studio Beta 2 kullanarak yeni bir silverlight 3 projesi oluşturdum. Arkasından kordinat düzlemimin tasarımını yaptım.
<Grid x:Name="LayoutRoot" Background="White">
<Canvas Width="400" x:Name="eleman" Height="400" Background="Black">
</Canvas>
<Rectangle Width="1" Height="400" x:Name="r1" Stroke="Red"></Rectangle>
<Rectangle Height="1" Width="400" Stroke="Red" ></Rectangle>
</Grid>
LayoutRoot adındaki ana sahneme önce eleman adında bir canvas ekliyorum. Bu canvası üzerine fonksiyonun grafiğini çizdirmek için kullanacağım. Ve bunun boyutlarını 400'e 400 olarak belirtiyorum.Benim fonksiyonu çizdireceğim kısımın büyüklüğü bu boyutlara bağlı, eleman canvasımın arka plan rengini ise siyah atıyorum ki rahatlıkla üzerindeki beyaz fonksiyonu seçebileyim. Daha sonra kordinat düzlemimin eksen çizgilerini iki tane rectangle nesnesi oluşturarak yerleştiriyorum.
Kodlama Kısmı
Grafiği çizdireğim komutları bir fonksiyon içerisine aldım, ben sadece deneme amaçlı yaptığım için çok fazla detaya inmedim. Örneğin bu fonksiyon dışarıdan denklem alabilirdi. Ben denklemi direk kodun içine kendim gireceğim. Fonksiyonumuza bakacak olursak
private void fonkhazirla()
{
eleman.Children.Clear();
for (double i = -200; i <200; i+=0.1)
{
Rectangle r = new Rectangle();
double j = (i*i)/100;
r.Height = 2;
r.Width = 2;
r.Stroke = new System.Windows.Media.SolidColorBrush(Colors.White);
r.Fill= new System.Windows.Media.SolidColorBrush(Colors.White);
eleman.Children.Add(r);
Canvas.SetLeft(r, i+200);
Canvas.SetTop(r,400- (j+200));
}
}
Öncelikle içinde daha önceden bir grafik barındırabileceği ihtimaline karşı eleman canvasımın içini temizliyorum. Ve bir foreach döngüsü ile x'in alabileceği her değer için bir for döngüsü oluşturuyorum.
for (double i = -200; i <200; i+=0.1)
Burda dikkat etmemiz gereken bir kaç nokta var oda şu:
1-Başlangıç ve bitiş değerleri kordinat ekseninin başlangıç ve bitiş değerleri olursa simulasyon için mantıklı değerler olur,
2-For döngüsündeki i'nin artış miktarı grafiğin daha kaliteli bir şekilde gözükmesini sağlar, örneğin artış miktarı 0.1 değilde 1 olmuş olsaydı grafik arasında mesafe olan ayrık noktalardan oluşacaktı ki bu bizim istemediğimiz birşey.
Daha sonra her noktayı gösterebilmek için r adında bir rectangle oluşturdum. Bunu koyacağım yer x ekseninde belli, y ekseninde ise bir formüle göre hesaplama yapılacak. Ben deneme amaçlı x2 formülünü kullandım.
Rectangle r = new Rectangle();
double j = (i*i)/100;
X yerine for döngümün sayacı olan i değişkeni tekabül ediyor. Öyleyse formulüm i*i şekilde olmalı. Fonksiyonumu daha rahat görebilmem içinse genlik değerini yüksek veriyorum ve /100 olarak fonksiyona ilave ediyorum. Height, Width, Stroke, Fill propertyler'i oluşturduğumuz noktanın görselliği ile ilgili olan kısımlar,
r.Height = 2;
r.Width = 2;
r.Stroke = new System.Windows.Media.SolidColorBrush(Colors.White);
r.Fill= new System.Windows.Media.SolidColorBrush(Colors.White);
eni boyu, çizgi ve dolgu rengi ayarlarını verdikten sonra 2'ye 2 boyutlarındaki beyaz renkli bu noktamızı sahnemize add komutu ile ekliyoruz.
eleman.Children.Add(r);
Şimdi geldik en önemli kısma, bu oluşturduğumuz nokta sahnenin neresine yerleştirilecek ? Kordinat ekseni bizim canvasımınız left ve top property'lerinden biraz farklı olduğu için bir kaç x ve y değerlerini bir kaç işleme tabi tutmamız gerekiyor. Bunlardan birincisi orjin taşıma (sıfır noktası taşıma), çünkü bizim canvasımızın sıfır noktası sol üst köşede, ama kordinat düzleminde göbekte. Canvasın sıfır noktası ile göbeği arasında 200'e 200 'lük bir fark bulunuyor. Öyleyse x ve ye değerlerine bu farkı eklememiz gerekiyor.
Canvas.SetLeft(r, i+200);
Canvas.SetTop(r,400- (j+200));
Aynı zamanda y ekseninide sahnemize göre değillememiz. X2 için fonksiyonumuzun ekran görüntüsü şu şekildedir.
Grafiğimizi diğer denklemleri deneyerek tekrar çizdirelim. Örneğin y=x^3 ve x=y için, Daha ilerisi için fonskiyonumuza paremetre ekleyerek formülü kullanıcının girmesini sağlarsak daha güzel olur. İyi çalışmalar enver_emb@hotmail.com 
