C#nedir?com
 
YAZAR HAKKINDA
Turhal Temizer
Turhal Temizer
http://www.turhaltemizer.com
İletişme geçmek için tıklayın.
92 Makalesi yayınlanmakta.
Yazar hakkında detaylı bilgi için tıklayın.
Yayınlanan diğer makaleleri için tıklayın.
İlgili etiketler: border=0 canvas cellpadding=5 cellspacing=0 function gereken islemler islemleri islemlerini silverlight yapacagimiz yaptigimiz yardimi yazimizin yukarida Silverlight Turhal Temizer
 
YAZI HAKKINDA
Türü : Makale
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
Seviyesi : Başlangıç
Kategori : Silverlight
Yayınlanma Tarihi : 7.9.2007
Okunma Sayısı : 18208
Yorum Sayısı : 0     yorum yaz
Site İçi AramaSİTE İÇİ ARAMA
Üye Girişini AçÜye GİRİŞİ
Üye girişi için tıklayın.
Kullanıcı Adı
Şifre
 
Beni her zaman hatırla
Bir hafta boyunca kullanıcı bilgilerinizi kullanıcı çıkışı yapana kadar hatırlar. (Paylaşılan bilgisayarlarda önerilmez.)
 
Şifremi / Kullanıcı Adımı unuttum.
 
.net TV RSS Serbest KÖŞE (?)
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
emre TAŞ
XML - Deniz Kılınç
emre TAŞ
yazının devamı >
emre TAŞ
Decompiling and Reverse Engineering .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Masaüstü mü ? İnternet Mi? .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
.Net Kavramları - .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Yeni Başlayanlar için - .Net Radyo
emre TAŞ
yazının devamı >
Makale Gönder Bende Yazmak İstiyorum
.net TV RSSBlogroll
Burak Selim Şenyurt
JWT(JSON Web Token) Kullanımı 18.12.2017
Burak Selim Şenyurt
Apache Kafka ile Konuşmaya Çalışmak 18.12.2017
Turhal Temizer 'in Blogu
ChatBot UI Sample 18.12.2017
Turhal Temizer 'in Blogu
C# – IRR Function 18.12.2017
  Diğer Herşey
Sponsorlar
BT Akademi
Medya Portakal
Video Hosting Sponsoru
Csharpnedir.com bir Ineta üyesidir
Uzman Abi
Her Yönüyle C# - Sefer Algan
Silverlight ile Temel işlemler
 
Kapat
Sayfayı Yazdır Sık Kullanılanlara Ekle Arkadaşıma Gönder MySpace Del.Ico.Us Digg Facebook Google Mixx Reddit StumbleUpon
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ü İşlemleri

Silverlight 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.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UntitledProject5="clr-namespace:UntitledProject5;assembly=ClientBin/UntitledProject5.dll"
x:Class="UntitledProject5.Page;assembly=ClientBin/UntitledProject5.dll"
x:Name="Page"
Width="640" Height="480"
Background="White"
>
<Image Source="1.jpg"/>
</Canvas>



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.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UntitledProject5="clr-namespace:UntitledProject5;assembly=ClientBin/UntitledProject5.dll"
x:Class="UntitledProject5.Page;assembly=ClientBin/UntitledProject5.dll"
x:Name="Page"
Width="640" Height="480"
Background="White"
>
<Image Source="1.jpg" Stretch="None"
Height="100" Width="200" Canvas.Left="100" />

<Image Source="1.jpg" Stretch="Fill"
Height="100" Width="200" Canvas.Top="100" Canvas.Left="100" />

<Image Source="1.jpg" Stretch="Uniform"
Height="100" Width="200" Canvas.Top="200" Canvas.Left="100" />
</Canvas>



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.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=agclr"
Loaded="Page_Loaded"
x:Class="Text.Page;assembly=ClientBin/Text.dll"
Background="White"
>
<TextBlock>Hello Silverlight World!</TextBlock>
</Canvas>



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.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=agclr"
Loaded="Page_Loaded"
x:Class="Text.Page;assembly=ClientBin/Text.dll"
Background="White"
>
<TextBlock FontSize="40"
FontFamily="Georgia"
FontStyle="Italic" FontWeight="Bold"
FontStretch="Expanded"
Canvas.Top="20" Canvas.Left="20">

Hello Silverlight World!

<TextBlock.Foreground>
<LinearGradientBrush>
<GradientStop Color="SlateBlue" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
</Canvas>




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.

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=agclr"
Loaded="Page_Loaded"
x:Class="Text.Page;assembly=ClientBin/Text.dll"
Background="White"
>
<TextBlock>
Hello <Run FontSize="20">Silverlight</Run> <Run FontSize="30">World!</Run>
</TextBlock>
</Canvas>



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...

<Canvas x:Name="parentCanvas"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=agclr"
Loaded="Page_Loaded"
x:Class="Text.Page;assembly=ClientBin/Text.dll"
Background="White"
>
<TextBlock FontFamily="Calibri"
Text="Hello Silverlight World" FontSize="20"/>
<TextBlock FontFamily="Times New Roman, Arial" Canvas.Top="40"
Text="Csharp?.com" FontSize="20"/>
<TextBlock FontFamily="Portable User Interface" Canvas.Top="80"
Text="Turhal TEMIZER" FontSize="20"/>
</Canvas>



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 İşlemler

Media 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.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UntitledProject5="clr-namespace:UntitledProject5;assembly=ClientBin/UntitledProject5.dll"
x:Class="UntitledProject5.Page;assembly=ClientBin/UntitledProject5.dll"
x:Name="Page"
Width="640" Height="480"
Background="White"
>
<MediaElement Source="Silverilgth_dusk_dreamscene.wmv"></MediaElement>
</Canvas>



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.

<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:UntitledProject5="clr-namespace:UntitledProject5;assembly=ClientBin/UntitledProject5.dll"
x:Class="UntitledProject5.Page;assembly=ClientBin/UntitledProject5.dll"
x:Name="Page"
Width="640" Height="480"
Background="White"
>
<MediaElement Source="Silverlight WEB 720p 2M-128 vbr.wmv"></MediaElement>
<Ellipse Height="200" Width="200" Canvas.Left="60" Canvas.Top="60"
Stroke="Black" StrokeThickness="10" Fill="SlateBlue"
Opacity="0.6" />
</Canvas>



İ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.

<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">


<!-- Source yazan yere sizin ekleyeceğniz bir videoyu ekleyebilirsiniz. -->
<MediaElement x:Name="media"
Source="Silverlight.wmv"
Width="300" Height="300" />

<!--Vidyomuzu durduruyoruz..-->
<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="10" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Orange" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
</Canvas>

<!-- Vidyomuzu duraklatıyoruz. -->
<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>

<!-- Vidyomuzu başlatıyoruz. -->
<Canvas MouseLeftButtonDown="media_begin"
Canvas.Left="130" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="LimeGreen" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
</Canvas>

</Canvas>




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.

<Canvas Width="300" Height="300"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Loaded="canvas_loaded">

<MediaElement x:Name="media"
Source="Silverlight.wmv"
Width="300" Height="300" />

<Canvas x:Name="buttonPanel">


<Canvas MouseLeftButtonDown="media_stop"
Canvas.Left="10" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Orange" Offset="0.0" />
<GradientStop Color="Red" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">stop</TextBlock>
</Canvas>


<Canvas MouseLeftButtonDown="media_pause"
Canvas.Left="70" Canvas.Top="265">
<Rectangle Stroke="Black"
Height="30" Width="55" RadiusX="5" RadiusY="5">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Yellow" Offset="0.0" />
<GradientStop Color="Orange" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">pause</TextBlock>
</Canvas>


<Canvas MouseLeftButtonDown="media_begin"
Canvas.Left="130" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="55">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="LimeGreen" Offset="0.0" />
<GradientStop Color="Green" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5">play</TextBlock>
</Canvas>

<!-- Tam ekrana gecis. -->
<Canvas MouseLeftButtonDown="toggle_fullScreen"
Canvas.Left="190" Canvas.Top="265">
<Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
Height="30" Width="85">
<Rectangle.Fill>
<RadialGradientBrush GradientOrigin="0.75,0.25">
<GradientStop Color="Gray" Offset="0.0" />
<GradientStop Color="Black" Offset="1.0" />
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Canvas.Left="5" Canvas.Top="5"
Foreground="White" >full screen</TextBlock>
</Canvas>

</Canvas>

</Canvas>




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.

Bu makaleden sonraki makalemiz Silverlight temellerini biterecek olduğumuz animasyon işlemleri olacaktır.Bir çok geliştirici ile birlikte benimde en sevdiğim özellik olan animasyon işlemlerinde görüşmek dileğiyle.

Umarım yararlı olmuştur...

Silverlight ile mutlu ve eğlenceli projeler, İyi çalışmalar.

Kaynaklar
www.microsoft.com/silverlight

Yukarıda değinmiş olduğumuz MediaPlayer örneği için linke tıklayınız...
Makale:
Silverlight ile Temel işlemler Silverlight Turhal Temizer
  • Yazılan Yorumlar
  • Yorum Yaz
Bu konu hakkında yayınlanan yorum bulunmamaktadır.
"Yorum Yaz" tabını kullanarak sizde yorumlarınızı yazabilirsiniz.
Yorum yazabilmek için üye girişi yapmalısınız. Üye girişi için tıklayın.
Üye değilseniz Üyel Ol linkine tıklayarak üyeliğinizi hemen başlatabilirisniz.
 
  • Bu Konuda Son 10
  • Eklenen Son 10
  • Bu Konuda Geçmiş 10
Bu Konuda Yazılmış Yazılmış 10 Makale Yükleniyor
Son Eklenen 10 Makale Yükleniyor
Bu Konuda Yazılmış Geçmiş Makaleler Yükleniyor