Silverlight ile bir fonksiyonun grafiğini çizdirme

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ı x² 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. X² 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

Etiketler : silverlight 3.0 fonksiyon çizdirme silverlight ile grafik işlemleri canvas ve rectangle kullanımı

• Silverlight 4.0 Beta ile WebCam ve Mikrofon Kullanımı (Video Ders)
• Silverlight 4.0 Beta Kurulumu ve Yenilikleri
• Silverlight 4.0 Beta Semineri (SDU)
• Haziran 2009 Silverlight Seminerleri (Daron Yöndem)
• 2010 ‘da Bizi Neler bekliyor ? Visual Studio 2010

 

Wpf ile Menü oluşturma ve kodlama

Öncelikle yeni bir wpf projesi oluşturuyorum, daha sonra xaml kısmında kullanacağım menüye uygun tasarımı yapıyorum. Menü oluşturmak için Menu ve MenuItem kontrollerini kullanacağım.

 Tasarım Kısmı

                <Menu>

            <MenuItem Header=”Düzen”>

                <MenuItem Header=”Geri Al” x:Name=”btn_geri_al”>

                <MenuItem Header=”Kopyala” x:Name=”btn_kopyala”>

                <MenuItem Header=”Yapıştır” x:Name=”btn_yapis”>

            MenuItem>

        </Menu>

 Bu tasarım ile bir menü içine “Düzen” adında alt menü ekledim. Bunun içine ise 3 tane MenuItem yani  komut ekledim. Bu komutları bir buton olarak düşünebilirsiniz, aynı buton gibi click olaylarını yakalayabilirsiniz. Bizde öyle yapıcağız. Siz programda kullanacağınız içeriğe göre menülerinizi şekillendirebilirsiniz. Ben burada sadece düzen menüsü adı altında alt bir menü oluşturdum ama siz daha fazla menü eklemek isterseniz, Menu tag’ının içine birden fazla MenuItem ekleyerek bunu yapabilirsiniz.

Oluşan menüye bir bakalım.

Kodlama Kısmı

 Xaml kodları ile aramız pek yoksa bu menünün aynısını C# kodları ile de oluşturabiliriz. Nasıl mı ? Şöyle düşünelim Wpf’in getirdiği yeniliklerin en başında tasarım olarak çizilebilen her şeyin bir .Net nesnesi olması yer alır. O yüzden Wpf’teki bütün nesneler bütün animasyonlar bütün özelliklere kod tarafından ulaşabilir. Bu kadar laf  kalabalığından sonra aynı menüyü bir de kodla oluşturalım.

Menu yeni_menu = new Menu();

            MenuItem duzen_menusu = new MenuItem { Header = “Düzen” };

            yeni_menu.Items.Add(duzen_menusu);

            // Yeni bir menü oluşturarak içine düzen menüitem’i ekledik.

            MenuItem geri_al = new MenuItem { Header = “Geri Al” };

            MenuItem kopyala = new MenuItem { Header = “Kopyala” };

            MenuItem yapistir = new MenuItem { Header = “Yapıştır” };

            //üç tane komut oluşturduk.

            duzen_menusu.Items.Add(geri_al);

            duzen_menusu.Items.Add(kopyala);

            duzen_menusu.Items.Add(yapistir);

            // oluşturduğumuz komutları düzen alt menüsünün içine ekledik.

            AnaPencere.Children.Add(yeni_menu);

            // en son olarak oluşturduğumuz menüyü kullanmak istediğimiz yere ekledik.

Derleyip çalıştırdığımız da ilk oluşturduğumuz menüden hiçbir farkının olmadığını göreceksiniz.Bunun dışında iki menüde de komutları sanki bir menü gibi tekrar tekrar kullanarak iç içe menüler oluşturabiliriz. Ms Word’deki menü kullanımlarını incelerseniz aynısını görebilirsiniz. Artık Windows 7 ‘nin gelmesiyle beraber bu menüler yavaş yavaş tarihe karışıyor. Ribbon denilen yeni bir menü tasarımı geliyor. Office 2007 ‘ye bakarsanız ne demek istediğimi anlarsınız, ama neticede şu an ki menü mantığını bilmeden ribbon mantığına geçmek biraz zor gelebilir. Artı olarak şu an ribbon geliştirmek programcılar için büyük bir eziyet belki visual studio 2010’un gelmesiyle birlikte bu karmaşa çözüme kavuşur.

 Şimdi bu eklediğimiz komutlara bir event ekleyerek yazımızı bitirelim. Herkese iyi çalışmalar

Mehmet Enver Bilen enver_emb@hotmail.com

geri_al.Click += (sender, e) =>

            {

                    //işleme konacak kodumuz buraya gelecek

            };

Silverlight 4 Kurulumu ve Yenilikleri (Beta)

Silverlight teknolojisinin ilk çıktığı günleri hatırlıyorum da arkadaşlarla birlikte nasıl heyecanlanmıştık. Bu heyecanlarımızın bu güne kadar bazıları karşılandı bazıları karşılanmadım. İlk zamanlar javascript kullanarak geliştiriyorduk Silverlight’ı, şimdi neredeyse herhangi bir dil yetiyor bunun için. Çok kısa bir sürede birçok yenilik kazandı aslında.

İnternet kısmına baktığınızda ise bu kadar yeni bir teknoloji olmasına rağmen binlerce makale video göreceksiniz. Belki şu anda birden içinizde Silverlight öğrenme istediği yeşerdi, makaleden sonra hemen gidip bakkaldan Silverlight 3 alacaksınız? J Ama bilmeniz gereken bir şey var, her senenin sonuna doğru olduğu gibi bu sene sonunda da Silverlight yapacağını yaptı ve bir beta daha yayımladı. Visual Studio 2010 ile gelmesi beklenen Silverlight 4 ‘ün çok sağlam bir test versiyonu yayımlandı, bununla beraber tabi ki de Expression Blend programının 4 Beta sürümünde aynı anda…

Peki, daha 3 ‘ile uygulama geliştirmeye yeni ısınmışken buda nerden çıktı demeyin, Mademki kendimizi developper yani geliştirici diyoruz, o zaman bizim de gelişime açık olmamız gerekiyor. Bu gün beta ile gelen yenilikler beta olmasına rağmen gerçekten göz dolduruyor, Tam sürümde de bunları bekliyoruz. Şimdi yeniliklere bir bakalım.

-         İnternet ortamında sürekli problem halinde olan yazdırma problemi Silverlight 4 Beta ile gelen kütüphaneyle birlikte tarihe karışıyor, wpf’in yazdırma sistemine benzeyen bir sistem geliyor. Yani herhangi bir UIElement’ i direk yazıcıya gönderebileceğiz.

-         60’dan fazla yeni form kontrolü içinde geliyor. RichTextBox, MaskedTextBox, HyperLink gibi eksikliğini çektiğimiz kontrollerde bunun içinde. Karmaşık validation işlemlerini gerçekleştirmek için kontrollerde içeriyor.

-         Önceki sürümlerde datagrid gerçekten sıkıntılıydı, ama şimdi bug’ları giderilmiş bir şekilde kopyalanıp yapıştırılabilen, sıralanabilen, yeniden boyutlandırılabilen satırlar ve sütunlarla birlikte geliyor.

-         Wcf RIA Servisleri kısmında da bir çok yenilik bizi bekliyor, transaction yapısı, dataları sayfalama gibi veriye erişim kısmında http ve wcf yapılarında yenilikler göreceğiz.

-         Arabça’nın da içinde bulunduğu 30 yeni dil seçeneği geliyor text ‘lerimiz için. Ve gene text’lerimiz için soldan sağa doğru yazma özelliği geliyor, yalnız bu özellik doğrudan ulaşılabilen texlerde kullanılamıyor. Label ve Textblock gibi kodlama ile ulaşabileceğimiz kontrol’ler de kullanma imkânı var şimdilik.

-         Artık Silverlight 4 Beta masaüstünde daha güçlü, Hazırladığımız karmaşık kodlar artık masaüstümüzde de hiçbir değişiklik olmadan çalışıyor ve artık Silverlight 4 Beta masaüstümüze, sistem klasörlerine, belgelerimize ulaşabiliyor. Hata bir Office uygulamasını içine dahil edebiliyor, yönlendirebiliyor. Yani bilgisayarda kurulu olan +Com ‘ları çalıştırabiliyor, yönetebiliyor.

-         Gelişmiş data binding desteği ile Silverlight 4.0 , veri gruplamada, düzenlemede hatta string formatlarında esnekliği ve verimliliği artırıyor.

-         Managed Extensibility Framework sayesinde çok büyük projeleri, birleştirilmiş karmaşık uygulamaları geliştirmeye imkân sağlandı.

-         Komple düzenlenebilir bir ara yüz, sürükleyip bırakarak veri bağlama, data kontrollerine otomatik örnek veri bağlama, datasource seçme,  Expression Blend stilleri, Tam manasıyla bir Intellisense desteği Visual Studio 2010 ile bütünleşerek geliyor.

Bu yeniliklerin kullanılabilmesi için Developperlar’a yani yazılım geliştiricilere bir sürü araç geliyor, ben burada hepsini anlatmıyacağım, ama hoşuma giden özelliklere deyineceğiz.

** Web cam ve Mikrofon Silverlight için her zaman bir eksiydi, ama şimdi Silverlight 4,0 Beta ile web cam kontrolü ve mikrofon kontrolü çok hoş bir şekilde geliyor, şöyle ki istediğiniz animasyonu istediğiniz efekti web cam üstüne uygulayabileceğiniz hazır bir ortam. Yani herhangi bir rectangle kontrolü için ürettiğimiz animasyonları aldığımız web cam görüntüleri içinde uygulayabileceğiz.

** Google Crome tarayıcısı da artık destekleniyor.

** Performans Optimizasyon sağlanarak Silverlight uygulamaları artık daha hızlı hale geldi, %200 oranında bir artış göstererek Silverlight 3 ile arayı açtı.

**  Yeni MultiTouch desteği ile birlikte dokunmadık işlemlerde yeni ve hoş dokunuşlar geliyor. Kullanıcıya güzel tecrübeler yaşatabileceğiniz imkânlar sunuyor.

** Uzun listeler artık faremizin tekerleği ile zahmetsizce indirilip kaldırılabiliyor.

     Bu kadar yenilikten sonra biraz olsun heyecanlandınız mı? O zaman Silverlight Beta 4 nasıl kurulur ona bakalım.

Öncelikle Silverlight Tools’u kurmamız gerekiyor, yani

1-Silverlight 4 Beta Tools for Visual Studio 2010

Bunun ile birlikte runtime kütüphanelerinin tamamı geliyor, yalnız unutmamanız gereken bir şey var Silverlight 4’ü kurmak ve kullanmak istiyorsanız Visual Studio 2010 beta 2 (şu an için) sisteminizde kurulu olması gerekiyor.

2-Microsoft Expression Blend for Net 4 Preview (isteğe bağlı)

            Silverlight projelerimizde kullanacağımız görsel tasarımları xaml kodları ile elimizle yazabiliyoruz. Ama karmaşık tasarımlarda ihtiyaç duyarsak güzel bir tasarım programına ihtiyacımız olacak. İşte o programın son sürümü her zaman olduğu gibi son Silverlight sürümü ile birlikte beta olarak geliştiriciler ve tasarımcılara ücretsiz olarak dağıtılıyor. Blend for Net 4 Preview

3-Silverlight 4 Beta Toolkit (isteğe bağlı)

            Codeplex üzerinde hazırlanan bu açık kaynak kodlu toolkit içerisinde birçok hoş kontrol barındırıyor isteğe bağlı olarak bu toolkitte kurulabilir, ben tavsiye ediyorum kurmanızı. En son Silverlight 4 Beta için Nowember Preview çıktı, ama her 3 aya bir bu geliştiriliyor. Yeni toolkitler de bizleri bekliyor.

            Bunların dışında isteğe bağlı platformlarımızda var örneğin Ria Servisler gibi ben onlardan bahsetmeyeceğim yukarıda anlattığım programların ve eklentilerin kurulumu için gerekli linki vereceğim.

http://silverlight.net/getstarted/silverlight-4-beta/#tools

Herkese iyi çalışmalar.

Mehmet Enver Bilen

http://www.mehmetbilen.com/Post/27/Silverlight-4-0-Beta-Kurulumu-ve-Yenilikleri.aspx

 Aynı yazıyı bu linkten daha sağlıklı bir şekilde okuyabilirsiniz.