Gece eğitimlerinin 2. haftasını da geride bıraktık. Bu eğitimler sırasında yine Silverlight'ı anlattım.

Silverlight eğitiminde geçen hafta giriş ve temelimizin oluşmasının ardından bu hafta da öğrendiklerimizi bir arada kullanmak için en uygun örneği seçtik ve bir video player yaptık. Eğitim sonunda bu playerla youtube'a rakip olur muyuz soruları da aklımıza geldi :) Eğitimlerde unutulmaz olaylardan biri yaşandı; eğitimler esnasında deprem oldu fakat hiç bi panik yapmadan ve ara vermeden derse devam ettik :/ Allahtan kötü sonuçlar doğurmadı...

Şimdi de derste player'ımızı nasıl yaptık ona bi göz atalım?


Player’ı yapmak için ilk aşamada neler lazım onlara bakalım
 
Bir video’yu çalmak için gerekli olan temel bileşenler olan:

• Başlat Butonu

• Duraklat Butonu

• Durdur Butonu

• Video Durumu

• Ses Durumu

• Tabiki Video  parçalarından oluşmaktadır.

Bunları silverlightta oluşturmak için neler lazım?

• MediaElement

• Rectangle

• Ellipse

• TextBlock

• Biraz Özellik Bilgisi

• Animasyon

• Image

• + C# Kodları

Animasyonlar
Butonların üzerine gelindiğinde renk değiştirerek birer buton olduklarını belirtilmesi için animasyonlara ihtiyacımız olacak, geldi ve gitti komutları ile geldi de renk değiştirirken gitti animasyonunda da eski haline gelecek. Bize lazım olacak animasyonlarsa

• BaslatMouseGeldi

• BaslatMouseGitti

• DuraklatMouseGeldi

• DuraklatMouseGitti

• DurdurMouseGeldi

• DurdurMouseGitti

Eventlar?
Code-Behind kısımda çalışacak kodlara göz atacak olursak

• Videobaslat

• Videoduraklat

• Videodurdur

• Sessiz

• Baslatgeldi

• Baslatgitti

• Duraklatgeldi

• Duraklatgitti

• Durdurgeldi

• Durdurgitti

• Videofener

• Videoata

Uygulamamızda örneğin Bir Butonda:
 
Button name’i
    > baslat

Button Animasyonlar
    > animasyonbaslatgeldi
    > animasyonbaslatgitti

Button event ‘ları
    > MouseEnter = baslatgeldi
    > MouseLeave = baslatgitti
    > MouseLeftButtonDown= videobaslat

Code-Behind kodu
>public void videobaslat ()
         { ... }

//video'yu oynatmak için
public void videobaslat(object sender, RoutedEventArgs e)
{
video.Play();
durum.Text = "Oynatlyor...";
} 

//video'yu durdurmak için
public void videodurdur(object sender, RoutedEventArgs e)
{
video.Stop();
durum.Text = "Durduruldu...";
} 

//video'yu duraklatmak için
public void videoduraklat(object sender, RoutedEventArgs e)
{
video.Pause();
durum.Text = "Duraklatıldı...";
} 

//başlat butonunun mouse üzerine geldiği zamanki animasyonu
 public void baslatgeldi(object sender, RoutedEventArgs e)
{
animasyonbaslatgeldi.Begin();
}

//başlat butonunun mouse üzerinden gittiği zamanki animasyonu
public void baslatgitti(object sender, RoutedEventArgs e)
{
animasyonbaslatgitti.Begin();
} 

//durdur butonunun mouse üzerine geldiği zamanki animasyonu
 public void durdurgeldi(object sender, RoutedEventArgs e)
{
animasyondurdurgeldi.Begin();
}

//durdur butonunun mouse üzerinden gittiği zamanki animasyonu
public void durdurgitti(object sender, RoutedEventArgs e)
{
animasyondurdurgitti.Begin();
} 

//duraklat butonunun mouse üzerine geldiği zamanki animasyonu
 public void duraklatgeldi(object sender, RoutedEventArgs e)
{
animasyonduraklatgeldi.Begin();
}

//duraklat butonunun mouse üzerinden gittiği zamanki animasyonu
public void duraklatgitti(object sender, RoutedEventArgs e)
{
animasyonduraklatgitti.Begin();
}

//video sessizdeyse, sesi açıp; ses açıkken de sessize alma işlemi
public void sessiz(object sender, RoutedEventArgs e)
{
 if (video.IsMuted == false)
{
  video.IsMuted = true;
  ses.Text = "Ses kapalı";
}
 else
{
  video.IsMuted = false;
  ses.Text = "Ses Açık";
}
}

//burada da fener videomuzun linki tıklandığı zaman playerde çalışması için gerekli kod. Burada localhostta çalıştırırken dikkat etmemiz gereken işlemse localhostumuzun portu sürekli değiştiği için onu çalışan portumuza ayarlayıp, işlemimizi ona göre yapmak. Eğer port yanlış olursa videomuz gelmiyecektir. Eğer videomuzu internet sitemizden yayınlayacaksak oraya da gerekli linki yazıp çalıştırmamız yeterli olacaktır.

public void videofener(object sender, RoutedEventArgs e)
{
  video.Source = new Uri ("http://localhost:52857/9Kasim.wmv");
}

//Ata demirer videomuzun çağırılması için gerekli olan kod
public void videoata(object sender, RoutedEventArgs e)
{
  video.Source = new Uri ("http://localhost:52857/atademirer.wmv");
}

Animasyonlarımız'dan animasyonbaslatgitti'yi inceleyecek olursak:

<Storyboard x:Name="animasyonbaslatgitti">
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="baslat" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" BeginTime="00:00:00">
                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF9198D6"/>
                <SplineColorKeyFrame KeyTime="00:00:01" Value="#FFFFFFFF"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="baslat" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" BeginTime="00:00:00">
                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/>
                <SplineColorKeyFrame KeyTime="00:00:01" Value="#FFBCC1EC"/>
            </ColorAnimationUsingKeyFrames>
</Storyboard>

görüldüğü gibi animasyon ismimiz <Stroyboard> tagının içerisinde x:Name şeklinde yer almakta ve Storyboard.TargetName="baslat" ile de hangi nesneyi etkileyeceği belirtilmektedir. Kodun diğer bölümlerinde animasyonlarda hangi renkten hangi renge geçeceği bilgileri yer almaktadır. Gitti animasyonunda ise bu işlemin tam tersi yer alacak ve en son aldığı renk kodundan ilk durumdaki renk koduna dönecektir.

Ayrıca istenilirse video listemizin içeriğini (video linklerini ve video görünüm fotolarını) dinamik bir şekilde dışarıdan çekebilir ve listbox içersinde dışa gösterebiliriz. Bu sayede istediğimiz kadar video'yu tek bir yerde oynatabiliriz.

Proje Koduna aşağıdaki klasörden erişebilirsiniz:

NOT: Proje koduna, toplam boyutları 50MB civar olduğu için videoları eklemedim.

Takıldığınız, sormak istediğiniz veya düzeltmek istediğiniz yerleri ibrahim.kivanc@msakademik.net mail adresime iletebilirsiniz.

Hepinize Kolay gelsin...