Silverlight ile Text, Görüntü ve Media İşlemleri

Silverlight ile Text, Görüntü ve Media İşlemleri Merhabalar;Bir önceki makalelerimizde Silverlight "ı tanımış, Canvas nesnesini incelemiş ve bu canvas nesnesinden yararlanarak geometrik objeler oluşturmuştuk.Bu makalemizde ise Canvas nesnesi tabanlı işlemlerimize devam edeceğiz.İlk olarak resimlerimiz üzerinde nasıl işlemler yapacağız uygulamalı olarak onları inceleyeceğiz.Daha sonra yazılar üzerinde nasıl işlemler yapabileceğimizi inceleyeceğiz.En son olarak ise vidyo dosyaları üzerinde neler yapacağımızı inceledikten sonra Silverlight ile temel işlemleri tamamlamış olacağız.Bu yaptığımız işlemler sonucunda bir sonraki makalemizde ise benim de çok hoşuma giden animasyon işlemlerini inceleyeceğiz.Silverlight ile Görüntü İşlemleriSilverlight ile resimler üzerinde işlemler yaparken Canvas nesnesinin bünyesine bulunan image özelliğinden yararlanırız.Bu image özelliliği ile gösterebileceğimiz resim formatları JPG ve PNG dir.Image özelliğinde görüntünün boyutu enini sıkışıklığını esnekliğini gibi özelliklerini hiç zorlanmadan gösterebilmeyizdir.Şimdi görüntü üzerinde yapabileceğimiz işlemleri bir kaç örnek ile açıklamaya çalışalım.İlk olarak yapacağımız örnek image özelliği yardımıyla görüntümüzü ekranda göstermek olacaktır. <Image Source="1.jpg"/> Silverlight yardımı ile web sayfamızda resimimizi göstermek için yapmamız gereken tek şey Image özelliğinde resmin bulunduğu yeri belirtmekti.Şimdi farklı işlemler üzerinde duralım.Görüntümüzü enlemesine ve boylamasına uzatmak işlemlerini yapmak istediğimizde nasıl işlemler yapmak istediğimize bir göz atalım. Stretch="Fill"Height="100" Width="200" Canvas.Top="100" Canvas.Left="100" /> Stretch="Uniform"Height="100" Width="200" Canvas.Top="200" Canvas.Left="100" /> Yukarıda ki işlemde tek yaptığımız Stretch özelliğini ayarlamak oldu.Sonrasında düşündüğümüze yakın bir sonuç karşımızda oldu.Görüntü işlemleri ile yapabileceğimiz temel işlemler bunlardan örnekleri sizler hayal gücünüze dayanarak arttırabilirsiniz.Ayrıca bir önceki silverlight ile çizim işlemleri makalemizde ki geometrik şekiller üzerinde yapabileceğiniz bütün işlemleri görüntüler üzerinde de yapabilirsiniz.Yukarıda ki kodların aynısını XAML dosyanınızın içerisine kopyalamanız durumunda sorunsuz bir biçimde çalışabilmektedir.Resimlerin gözükebilmesi için yapmanız gereken tek şey projeyi çalıştırdığınız dizinin içerisine resimlerinizi kopyalamaktır.Tekrar hatırlatmak isterim ki JPG ve PNG uzantılı resimleri kullanabiliyorsunuz. Sırada yazılar üzerinde yapabileceğimiz işlemler var.Şimdi ayrıntılı olarak bu işlemleri inceleyeceğiz.Yazı İşlemleriİnceleyeceğimiz konular arasında ki şu anki sırayı yazı(text) işlemleri almaktadır.Text işlemlerini silverlight ile sorunsuz çalışatırabilmemiz için Canvas nesnesine bağlı olan TextBlock özelliğini kullanmamız yeterli olacaktır.Bu özellik sayesinde yazılar üzerinde yapmak istediğimiz bütün işlemleri yapabilmemiz mümkündür.Şimdi text işlemlerini örnekler yardımı ile ayrıntılı bir biçimde incelemeye başlayalım.İlk yapacağımız örnek, ilk yapılan programlarda ki gibi Hello World olacaktır.Tek farkı ise Hello Silverlight World olacaktır. Hello Silverlight World! Sırada yapacağımız örnek renk geçişleri olan bir yazı şekli olacaktır.Fakat bu işlemi yapmadan önce değinmemiz gereken bir kaç özellik var.Bu özellikleri açıkladıktan sonra işlemlerimize devam edebiliriz. FontSize: Yazımızın boyutunu ayarlıyoruz. FontStyle: Yazımızın stilini belirliyoruz.Normal veya Italic olabiliyor. FontStretch: Görünümünün nasıl gözükeceğini seçiyoruz.Alabilieceği değerler;Choices, UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, Normal, Medium, SemiExpanded, Expanded, ExtraExpanded ve UltraExprended "dir. FontWeight: Yazının genişliğini belirlemektedir.Alabileceği değerler; Thin, ExtraLight, Light, Normal, Medium, SemiBold, Bold, ExtraBold, Black, ExtraBlack "tir FontFamily: Kullandığımız yazının hangi aileye bağlı olduğunu seçmemize yarar.Örneğin;Arial, Calibri, ... Foreground: Yazımızın rengini ve arka planında renk belirlemize yarar. Temel özelliklerine artık hakim olduğumuza göre yazımızın rengini stilini değiştirerek farklı bir görüntü oluşturabiliriz.

Hello Silverlight World!

Sırada yapacağımız örnek ise Font-Size özelliği ile olacaktır.Bu özelliği kullanarak yaptığımız örnek aşağıdadır. Hello Silverlight World! Yukarıda ki örneği dikkat ederseniz Run özelliği yardımı ile istediğimiz bir yazı topluluğunun boyutunu rahatlık ile ayarlayabiliyoruz.İncelyeceğimiz özelliklerden biriside FontFamily olacak.Bu özellik yardımı ile yazdığımız yazının karakterlerini değiştirebiliyoruz.Örnek ile incelemek gerekirse... FontFamily="Calibri"Text="Hello Silverlight World" FontSize="20"/>FontFamily="Times New Roman, Arial" Canvas.Top="40"Text="Csharp?.com" FontSize="20"/>FontFamily="Portable User Interface" Canvas.Top="80"Text="Turhal TEMIZER" FontSize="20"/> Yukarıda ki örnek yardımıyla FontFamily özelliğinin de kullanımını görmüş olduk. Genel olarak yazım ile ilgili özellikleri burada bitirmiş durumdayız.Yazı ile yapabileceğimiz bütün özellikleri elimizden geldiğince kullanış olduk.Şimdi inceleyeceğimiz yapı ise medya özelliği.Bakalım medya konusunda Silverlight bize ne gibi yenilikler sunmaktadır.Media İle İlgili İşlemlerMedia ile yapılan işlemlerde MediaElement özelliğinden yararlanılmaktadır.Bu özellik yardımıyla çok basit bir media player örneğini silverlight ile yapabilmemiz mümkündür.Fakat media player yapmadan önce ilk yapmamız gereken Silverlight ile hazırlanmış bir sayfada video oynatabilmek olacaktır.Şimdi bu örneği nasıl yapabileceğimizi inceleyelim. Artık media dosyalarını MediaElement yardımı ile Silverlight ile hazırladığımız web sayfalarında görebilmekteyiz.Şimdi yapacağımız örnekte biraz daha eğlence noktasına odaklanalım.Bir media dosyasında ki kişinin üzerinde bir elips bulunsun.Bu işlemide diğerleri gibi çok kolay bir biçimde yapabilmemiz mümkündür. İzlemekte olduğumuz bir media dosyasının bir noktasından da olsa takip edebilme olanağı bulduk.Sıradaki örneğimiz,basit bir media player olacak.Göreceksiniz ki bu işlemi yapmakta oldukça kolay olacak.Yapağımız tek farklı nokta çok az javaScript yazacak olmamızdır.Onun dışında uzun zamandır yaptığımız örnekler dışında hiç bir farkları yoktur.

stop pause play

Kullanmış olduğumuz javaScript kodu ise;

function media_stop(sender, args) {sender.findName("media").stop();}

function media_pause(sender, args) {sender.findName("media").pause();}

function media_begin(sender, args) {sender.findName("media").play();}

Artık ufak, basit bir media player" ımız oldu.Bunu biraz daha güzelleştirelim tam ekran olarak görüntüle seçeneğini ekleyelim.Bu işlemi gerçekleştirabilmek için yapmamız gereken media elementine bağlı olan ActualWidth ve ActualHeight özelliklerini kullanmamız yeterli olacaktır.

stop pause play full screen

function media_stop(sender, args) {

sender.findName("media").stop();}

function media_pause(sender, args) {sender.findName("media").pause();}

function media_begin(sender, args) {sender.findName("media").play();}

function canvas_loaded(sender, args){var plugin = sender.getHost();plugin.content.onfullScreenChange = onFullScreenChanged;

}

function toggle_fullScreen(sender, args){var silverlightPlugin = sender.getHost();silverlightPlugin.content.fullScreen = !silverlightPlugin.content.fullScreen; }

function onFullScreenChanged(sender, args){

var silverlightPlugin = sender.getHost();var buttonPanel = sender.findName("buttonPanel");if (silverlightPlugin.content.fullScreen == true){buttonPanel.opacity = 0;}else {buttonPanel.opacity = 1;}var mediaPlayer = sender.findName("media");mediaPlayer.width = silverlightPlugin.content.actualWidth;mediaPlayer.height = silverlightPlugin.content.actualHeight;

}

 

JavaScriptimiz...Tam ekranda yapabilen çok güzel bir media playerimiz oldu.MediaElement yardımı ile yapabileceğimiz en iyi projelerden birini media player "ımızı oluşturduk.Artık bizimde bir mediaPlayer "ımız mevcut durumdadır.Geldik bir makalenin sonuna daha, Zamanlar ilerledikçe Silverlight konusunda ki bilgilerimiz gittikçe artmaktadır.Artık silverlight ile çizimden text işlemlerine ,görüntü işlemlerinden media işlemlerine kadar bir çok konuya hakim olmaya başladık.Çok kolay olarak projeler geliştirdik.Aynı zamanda bu işlemleri yaparken çok fazla şekilde eğlenbiliyoruz.

Döküman Arama

Başlık :

Kapat