Makale Özeti

Bu makalemizde WPF uygulamalarına video kontrolleri eklemek istediğimizde kullanabilecek olduğumuz kontrolleri incelemeye çalışıyoruz.

Makale

2005 yılında Windows Presentation Foundation ile ilgili söylentiler ortaya atıldığında, Adobe Flash ile yapabildiğimiz bütün işlemleri ve daha fazlasını masaüstü ve web uygulamalarında yapabileceğimizden söz edilmişti. Daha sonra .Net Framework 3.0 ‘ın ilk sürümleri olarak .Net FX bizlere sunulduğundan bu söylentilerin gerçekleşebileceği düşünceleri zihnimizde canlanmaya başlamış ve özellikle masaüstü uygulamalarda devrim niteliği taşıyabileceğini düşünmeye başlamıştık. Belirli zaman geçtikten sonra WPF ‘i yalnızca masaüstü uygulamalar için kullanılacağına ve web uygulamalarının isminin de Microsoft Silverlight olacağını gözlemlemiş olduk. WPF ile de web uygulamaları yayınlamak hala mümkün olmakta ve bu tür uygulamalara da XBAP uygulamalar denilmiştir. Web tarafında Silverlight ‘ın estirdiği fırtınayı masaüstü uygulamalarında da WPF gerçekleştirmeye başlamıştı.

WPF ile gelen ve dünya da en çok kullanılan ürünler ile Windows Vista, Office System 2007 ve Windows Live Messenger 8.0 ve sonrası olmuştur. Karşımıza gelen bu ürünlerin ortak özellikleri tasarımlarının bir önceki sürümlerine oranla inanılmaz değişikler gösterebilmiş olmasıdır. Özelliklere kısaca örnek vermek gerekirse, Windows Vista ile izleyeceğimiz bir videoyu herhangi bir oynatıcı açmadan izleyebiliyor olmamızdır. Bu ve bunun gibi birçok işlemin ana özelliği uygulamalarımızda yer alan kontrolleri dinamik bir biçimde kullanabiliyor olmamızdır.



Windows Vista ile nasıl video kontrollerini kullanıldığını yukarıdaki ekran görüntüsünden bakabiliriz. Son kullanıcılar bu tür kontrolleri kullandıkça bizlerden geliştirmemizi istedikleri uygulamalarda bu tür kullanım kolaylıklarının olmasını istemektedirler. Bizlerde bu tür istekleri uygulamamızın performansını da düşünerek gerçekleştirmeye çalışırız.

Windows kontrollerinin daha iyileştirilmiş ve yeni nesil sistemler ile uyumlu olabilmesi açısından WPF ile geliştirmek bizler için her daim ayrıcalıklı bir durum olacaktır. Ayrıcalıklı durumdan kastımız, uygulamalarımızda ne kadar en son teknoloji kullanırsak son kullanıcılar tarafında o kadar coşku uyandırırız. Müşteri memnuniyetine dayalı bir dünyada yaşadığımız içinde bu bize çok daha fazlası ile katma değer olarak geri dönecektir.

Kısaca neden yeni kontrolleri kullanmamız gerektiğini ve bu kontrollerden video kontrolünün Windows Vista işletim sistemi ile nasıl gözüktüğüne göz attıktan sonra bu makalemizde değinecek olduğumuz WPF uygulamalarına Media kontrollerinin eklenmesi konusunu incelemeye başlayabiliriz.

Win32 uygulamalarımızı dijital Media kontrollerinin eklemenin iki yolu vardır. Bunlardan birincisi animasyon işlemlerini daha canlı göstermek ve video kontrollerini uygulamalarımızda kullanmak için başvurduğumuz DirectShow Api leridir. Bir diğeri ise Windows Media Player ActiveX kontrolüdür. Bu iki kontrolü de uygulamamıza gömülü bir biçimde uygulamalarımızda kullanabiliyoruz.

“Peki, bu iki kontrol varken neden WPF ‘te kullanılmakta olan kontrollerin bizlere sunulduğu” sorusunun cevabını araştırmaya çalışalım. DirectShow ile geliştiricilere Media uygulamaları için inanılmaz fazlalıkla imkânlar sağlanmaktadır. Tabii bu imkânları kullanabilmemiz için bu api hakkında geniş bir bilgi yelpazesine sahip olmamız gerekiyordu. Uygulamalarımızda yalnızca tek bir video göstermek içinde geliştiricilere bu api hakkında geniş bilgi düzeyine sahip olmalarını istemek geliştiriciler için oldukça sıkıcı bir durum oluyordu.

WPF ‘de ise DirectShow api lerinde yer alan kontrollerinin benzerlerini .Net Framework 3.0 ile birlikte gelen özellikler ile rahatlıkla gerçekleştirebilmemiz mümkündür. WPF ile gelen kontrolleri de Win32 uygulamalarında sorunsuzca kullanabiliriz.

Media oynatmak içinde Windows Media Player ActiveX kontrolüne ait özelliklere hâkim olmamız gerekmektedir. Yine geliştiricilere ekstra bir şeyler öğrenmeye zorlamak yerine WPF ile .Net Framework yapısına eklenen MediaElement kontrolü yardımı ile bu işlemleri de sorunsuzca gerçekleştirebilmemiz mümkündür. Kullandığımız bu kontrol yardımı ile videolarımızı 3D yüzeylerdeymiş gibi de kullanabilmemiz mümkündür.

Ses ve Media kontrollerini geliştiriciler kullanmak istediğinde WPF ile sunulan Media özellikleri olduğundan bahsetmiştik. Bu Media özelliklerini kullanmak istediğimizde arka planda Media Player işlemini başlatarak işlemlerimizi gerçekleştirebilmemize olanak sağlanmaktadır. WPF uygulaması açıldıktan sonra Media uygulaması olan sayfada yer alan Media dosyası yüklendikten sonra Media Player ‘ın açabileceği bir format olup olmadığını kontrol ediyor. Eğer bu formatlar dışında bir dosya açmak istiyorsak uygulama bizden codec yüklememizi istemektedir.

Media uygulamaları olan uygulamalarımızdaki dosyalar gösterilirken arka planda dosyalarımızın yüklenmesine devam edilmektedir. Bu yüklenme işlemi biz video ‘yu duraklatsak bile yüklemeye devam edecektir. Video ‘nın yüklenmesini engellemek için yapmamız gereken işlem tamamen durdurmak olacaktır. Ayrıca, ses dosyalarını çaldırabilmemiz için System.Media.SoundPlayer sınıfını da kullanabilmemiz mümkündür.

MediaElement Kontrolünün Kullanılması

Windows Presentation Foundation ile Media dosyalarını göstermenin oldukça kolay olduğundan ve bu tür işlemleri yapabilmek içinde MediaElement kontrolünün gerekli olduğundan üst paragraflarda bahsetmiştik. Bu kontrolü XAML kod tarafında ekleyebileceğimiz gibi C# veya VB.Net kod tarafında MediaElement kontrolünü aktifleştirerek kullanabilmemiz mümkündür. MediaElement kontrolünü uygulamalarımızda kullanırken ya bağımsız olarak kontrollerimizden aldığımı değeler yönetiriz ya da sistem saatinden alarak işlemlerimizi yapmamıza olanak tanıyacaktır.

Bağımsız durumda Media elementi nasıl kullanacağımıza göz atalım;

XAML
<MediaElement Source="Forza.wmv" Width="320" Height="240" LoadedBehavior="Play" />

XAML kod bloğunu uygulamamıza yazıp derlediğimiz zaman uygulamamızın içerisinde videomuzun görüntülendiğine tanık olacağız.

Not: Eğer videonuzun yolunu doğru bir şekilde belirttiğiniz halde gözükmediyse muhakkak projenizin oluştuğu klasörün altında yer alan Debug dizininin altında izlettireceğiniz videonun yer almasına dikkat ediniz.

MediaElement kontrolünün performans açısından çok daha fazla olanaklarının olduğundan ve diğer Api lere oranla işlemciyi daha az yoracağından bahsetmiştik. Şimdi bu söylemlerimizi doğrular nitelikteki ekran görüntülerini veriyoruz. Bu ekran görüntüsünde MediaElement yardımı ile oluşturduğumuz videonun yanında görev yöneticisi yer almaktadır.



MediaElement kontrolümüzü kullanarak çok basit anlamda bir uygulama geliştirdik ve bu uygulamamızı görüntüledik. Şimdi yapacağımız örnekte ise başlat, duraklat, bitir sessiz butonlarının olduğu bir örnek olacaktır. Bu örneğimizde kontrolleri XAML kod tarafında hazırlarken kontrollere verilecek olan görevleri C# kod tarafında oluşturuyor olacağız. Ayrıca kontrollerimizin kullanıcılar tarafından kullanıldığından videoyu kontrol edebilmesi için LoadBehavior özelliğine Manual ‘i atayacağız.

XAML
<Window x:Class="WpfMedia.Window1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="MediaElement Makale" Height="800" Width="600">
   <Grid>
      <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
         <MediaElement Name="MediaMakale" Source="Forza.wmv"
            LoadedBehavior="Manual" Width="320" Height="240" />
         <StackPanel Orientation="Horizontal" Margin="0,10,0,0">
            <Button Content="Oynat" Margin="0,0,10,0"
               Padding="5" Click="mediaOynat" />
            <Button Content="Duraklat" Margin="0,0,10,0"
               Padding="5" Click="mediaDuraklat" />
            <Button x:Name="sessizButton" Content="Sessiz"
               Padding="5" Click="Sessiz" />
         </StackPanel>
      </StackPanel>
   </Grid>
</Window>

C#
susing System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace WpfMedia
{
   public partial class Window1 : System.Windows.Window
   {
      public Window1()
      {
         InitializeComponent();
         mediaMakale.Volume = 100;
         mediaMakale.Play();
      }

      void mediaOynat(Object sender, EventArgs e)
      {
         mediaMakale.Play();
      }

      void mediaDuraklat(Object sender, EventArgs e)
      {
         mediaMakale.Pause();
      }

      void mediaMute(Object sender, EventArgs e)
      {
         if (mediaMakale.Volume == 100)
         {
            mediaMakale.Volume = 0;
            sessizButton.Content = "Sesli";
         }
         else
         {
            mediaMakale.Volume = 100;
            sessizButton.Content = "Sessiz";
         }
      }
   }
}



MediaElement, zaman durumuna bağlı olarak Windows Presentation Foundation ‘ta yer alan animasyon mimarisine bağlı olarak ta kullanılabiliyor. Zaman durumunu aktifleştirdiğimizde MediaElement ‘in özelliklerinden olan MediaTimeline ve MediaClock özelliklerine başlangıç ve ilerleme değerleri aktararak kullanabiliyoruz. Uygulamalarımızda başlangıç zamanı ve hangi zaman aralıkları ile ilerleyeceği ile ilgili özellikler Windows Presentation Foundation ‘da animasyon işlemlerini yaparken kullandığımız StoryBoard üyesine benzemektedir. Bu üyeyi de kullanırken belirli bir başlangıç zamanı, ilerleme zamanı ve sonlanma zamanı belirtebiliyorduk. Şimdi bu tür zamana bağlı kontrolleri kullanmak istediğimizde uygulamamızda ne tür bir kod bloğu kullanabileceğimize değinmeye çalışalım.

XAML
<MediaElement Name="mediaMakale" Width="320" Height="240" />
   <Grid.Triggers>
      <EventTrigger RoutedEvent="Grid.Loaded">
         <EventTrigger.Actions>
            <BeginStoryboard>
               <Storyboard Storyboard.TargetName="mediaMakale">
                  <MediaTimeline Source="Forza.wmv"
                     BeginTime="00:00:00" Duration="00:05:00" />
               </Storyboard>
            </BeginStoryboard>
         </EventTrigger.Actions>
      </EventTrigger>
   </Grid.Triggers>

Uygulamalarımızda MediaTimeline özelliğini kullanmak yerine MediaElement kontrolünü kullanmak ileride gerçekleşebilecek sorunları ortadan kaldırmak açısından çok daha yararlı olacaktır. Çünkü MediaTimeline ile uygulamalarımızı çalıştırmak istediğimizde arkada MediaElement kontrolü oluşturulmak istenecek ve istek sonrasından belirli zaman aralıklarında önbelleğe alacaktır. Sürekli çağırılan video dosyaları uygulamalarımızı web tabanlı yaptığımız durumlarda performans kaybına uğrayabilmekte ya da Windows tabanlı olarak geliştirdiğimiz uygulamalarda çok büyük dosyalı uygulamaları göstermek istediğimizde hatalar verebilecektir. Fakat aklımıza başka bir soru takılabilir. “O da çok büyük boyutlu bir videoyu birden önbelleğe aldırarak oynat dediğimizde performans kaybı yaşamayacak mıyız?” olacaktır. İşte bu sorunu engellememiz için MediaElement kontrolü içerisinde video dosyalarımızı oynatıyoruz. MediaElement kontrolünün Media dosyalarını çalıştırma mantığı minimum sistem zorlaması ile maksimum performans alabilmektedir. Diğer durumlarda biz yönetmeye çalışırsak, WPF öncesi durumlarda olduğu gibi oldukça zprlanabilir ve işlemlerimizi yaparken büyük sorunlar yaşabiliriz.

MediaPlayer Sınıfının Kullanılması

MediaElement kontrolünün özelliklerinde çok fonksiyonlu özellikler yani, yeniden oynatma, çalma listesi gibi özellikler yer almamaktadır. MediaElement üzerinde yer alan kontrollerimize daha çok fonksiyonellik kazandırmak istediğimizde MediaPlayer sınıfını kullanabiliriz. MediaElement ile video ve benzeri Media dosyaları oynatmak istediğimizde arka planda Media Player işleminin başlatıldığından ve bu işlemler üzerinden videomuzu oynattığından bahsetmiştik. İşte bu sebepten ötürü uygulamalarımızda MediaPlayer sınıfını kullanmak performans kaybı yerine son kullanıcıya sunacağımız birçok özelliği kolaylıkla sunabilme olanağı tanımaktadır.

MediaPlayer sınıfını kullanmamız için uygulamamızda System.Windows.Media isim alanının kullanılıyor olmasına dikkat etmemiz gerekmektedir. Şimdi ise C# ile Media Player sınıfını nasıl kullanabileceğimize ilişkin bir örnek vereceğiz.

C#
MediaPlayer mp = new MediaPlayer();
   Try {
      mp.Open(new Uri("mediaMakale.wmv"));
      }
     catch(Exception ex) {
    MessageBox.Show(ex.Message);
}

Media Player sınıfı ile kullanabildiğimiz özellikler ve üyeler MediaElement kontrolünün içerisinde kullanılabilmektedir. MediaElement ve Media Player uyumu ile gerçekleştirdiğimiz uygulamalarda yalnızca HD videoların gösterilmesinde sorunlar çıkmaktadır. Bu sorunlarda sistem özelliklerimizden olduğu düşünülmektedir. Çünkü ekran kartı iyi bir sistem ile uygulamamızı çalıştırdığımızda herhangi bir sorun ile karşılaşmazken, daha düşük özellikleri sistemlerde denediğimizde hatalar verebilmektedir. Media Player sınıfı videolarımızı çalıştırırken VideoDrawing sınıfı yardımı ile bu işlemleri yapmaktadır. 3D yüzeylerde de video izlemek istediğimizde Media Player sınıfı yine VideoDrawing sınıfı yardımı ile kolaylıkla video dosyalarını gösterebilmektedir.

Media Player sınıfında MediaElement kontrolünde olduğu gibi direk yolu gösterebilmek yerine uri özelliği ile yolunu uygulamamızın içerisindeki yolunu belirtiyoruz.

WPF Kontrollerinde Gömülü Videoların Kullanımı

MediaElement kontrolü System.Windows.UIElement sınıfından miraslanarak oluşturulmaktadır. Miraslamadan ötürü bir kontrolü başka bir kontrolün içerisinde de kullanabilmemize olanak tanınmıştır. Bizde bu özelliği test edebilmek için Button kontrolünün içerisinden MediaElement kontrolünü çalıştırmayı deneyeceğiz. Bunun için XAML kod tarafına aşağıdaki kodları ekliyoruz.

XAML
<Button Name="videoButton" Click="videoButton_Click"
   Width="320" Height="240">
   <MediaElement Name="forzaVid" Source="Forza.wmv"
       LoadedBehavior="Play" Width="320" Height="240" />
</Button>



Bu uygulamamızı derlediğimiz anda video oynamaya başlamaktadır. Bunun sebebi LoadedBehavior özelliğine Play değerini atmamızdan kaynaklanmaktadır. Eğer ki biz uygulama başlar başlamaz değil de Butona tıklandığı zaman videoyu başlatmak istersek Button_onClick özelliğine MediaElement ‘e vermiş olduğumuz isim ile forzaVid.Play(); kodunu eklememiz yeterli olacaktır. Bu değişiklik sonrasında uygulamamız butona tıklandığı anda, buton içerisinde video gösteren bir hal almış olacaktır. Bu tür ince detaylar son kullanıcılara sunulacak olan uygulama kullanım zevkini maksimuma çıkaracağı kaçınılmaz bir gerçektir.

Islak Zemin Yansıması Teknikleri

Uygulamalarımızda suda ya da camda karşılaştığımız yansıma işlemlerini yapmaya çalışırken fazlaca zaman kaybına uğrardık. WPF ile bu işlemleri yapmak istediğimizde ise VisualBrush üyesine MediaElement ‘i bağlamamız yeterli olacaktır. Daha sonrasında ise, VisualBrush içerisinden yapacağımız ince detaylar ile yansıma işlemini gerçekleştirebiliriz.

Yansıma işlemlerini nasıl yaptığımız konusunda kafanızda herhangi bir soru işareti oluşursa daha önceki WPF makalelerimizi okuyabilirsiniz.

Şimdi ise ıslak zemin yansıma efektine benzeyen uygulamamızı yapmamıza yarayacak olan kodlarımızı verelim.

XAML
<Window x:Class="WpfMedia.Window3"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="WPF Makale" Height="340" Width="350">
      <Grid x:Name="Grid">
         <StackPanel VerticalAlignment="Center">
            <MediaElement Name="Vid" Source="Forza.wmv"
               LoadedBehavior="Play" Width="320" Height="240" />
            <Rectangle Width="320" Height="240">
               <Rectangle.Fill>
                  <VisualBrush Visual="{Binding ElementName=Vid}" />
               </Rectangle.Fill>
               <Rectangle.OpacityMask>
                  <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                     <GradientStop Color="#AA000000" Offset="1" />
                     <GradientStop Color="#00000000" Offset="0" />
                  </LinearGradientBrush>
               </Rectangle.OpacityMask>
            <Rectangle.RenderTransform>
         <TransformGroup>
         <ScaleTransform ScaleY="-1" />
         <TranslateTransform Y="242" />
      </TransformGroup>
   </Rectangle.RenderTransform>
</Rectangle>
</StackPanel>
</Grid>
</Window>



Bu uygulamamızı da basitçe yapmış oluyoruz.

Uyumlu Ses Dosyalarının WPF Uygulamalarına Eklenmesi

WPF uygulamalarımıza MediaElement kontrolü yardımı ile birçok video ekledik ve eklediğimiz bu videoları form kontrollerinin içerisine bile ekleyebildik. Fakat dijital dünya sadece görüntüden ibaret değildir. Birde bu dünyada sesler yer almaktadır. Şimdi de ses dosyalarını nasıl WPF uygulamalarımıza ekleyebileceğimize değineceğiz.

Ses dosyalarımızı uygulamalarımızda kullanabilmemiz için System.Windows.Media isim alanı altında tanımlı olan sound Player sınıfını kullanacağız. Bu sınıfta Media Player ile çalabildiğimiz ses dosyalarımızı WPF uygulamalarımız da çalabilmemiz mümkündür. Ayrıca Media Player için varsayılan ses formatı olan WAV ‘ı da sorunsuzca çalıştırabilmektedir.

SoundPlayer sınıfını kullanırken bu sınıfın metotlarından olan SoundPlayer.Play(); metodu yardımı ile de ses dosyalarını yürütebilmemiz mümkündür. Tabii yürütebilme özelliği ile birlikte duraklatma ve sonlandırma metotları da yer almaktadır.

Şimdi uygulamalarımızda SoundPlayer özelliğini kullanabileceğimiz örnek için gerekli olan kod parçacığına göz atalım.

XAML
<EventTrigger RoutedEvent="Button.MouseEnter" SourceName="Button">
   <EventTrigger.Actions>
      <SoundPlayerAction Source="ses/lake.wav"/>
   </EventTrigger.Actions>
</EventTrigger>

Uygulamamızı derlediğimizde ses dosyamız sorunsuz bir biçimde çalacaktır.

Bu yazımızda nelere değindiğimizi toparlamak gerekirse, ilk olarak WPF ile geliştirilmiş ve günümüzde en çok kullanılan uygulamalara değindik ve bu uygulamalardan Windows Vista ‘da MediaElement kontrolünü nerede kullanıldığına göz attık. Sonrasında ise MediaElement kontrolü kullanılarak yapılmış farklı uygulamaları incelemeye çalıştık.

Sonuç olarak en temel anlamda MediaElement kontrolünü kullanarak video dosyalarını nasıl kullanabileceğimize incelemeye çalıştık.

Umarım yararlı olmuştur.

Yazımızda değinmiş olduğumuz uygulamanın kaynak kodlarına download bölümünden erişebilirsiniz erişebilirsiniz.

Turhal Temizer
turhal.temizer@yurticikargo.com
http://turhal.blogspot.com
Yazımızda değinilen uygulamaların kaynak kodlarına ulaşabilirsiniz.