Makale Özeti

Silverlight animasyonlarında tam ekran moduna geçerek kullanıcılara çok farklı deneyimler yaşatabilirsiniz. Bu makale boyunca tam ekran moduna geçişle ilgili kodları bir video uygulaması ile inceleyeceğiz.

Makale

Silverlight uygulamalarının yeri geldiğinde tam ekran olarak da kullanılabildiğini örneklerde görmüşsünüzdür. İster amacınız tam ekran video oynatmak olsun ister kullanıcılarınıza bir web sitesinden öte deneyimler yaşatmak olsun Silverlight ile kolaylıkla internet üzerinden yayınlanan tam ekran uygulamalar hazırlayabilirsiniz.

Örneğimizde web sitesi içerisindeki bir videoyu oynatan bir MediaElement kullanacağız. Silverlight animasyonuna fare ile tıklandığında animasyon tam ekran olacak ve beraberinde video da tam ekran olarak oynatılacak. Uygulamamızın XAML kodu aşağıdaki şekilde olabilir.

<Canvas

  xmlns="http://schemas.microsoft.com/client/2007"

  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

  Width="300" Height="300"

  Background="White"

  x:Name="Page"

  >

  <MediaElement Canvas.Left="0" Canvas.Top="0" Source="Bear.wmv" Width="300" Height="300" x:Name="Medya"/>

</Canvas>

Silverlight uygulamamız ilk açıldığında handeLoad durumunu çalıştıracaktır. Animasyon başlatıldığı gibi ilk olarak tüm animasyondaki fare tıklamalarını yakalamamız gerekecek. Böylece herhangi bir tıklama durumunda doğrudan tam ekran moduna geçebiliriz.

  handleLoad: function(control, userContext, rootElement)

  {

    rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.MouseLeftButtonDown));

    control.Content.OnFullScreenChange = this.OnFullScreenChange;

  }

Yukarıdaki kod içerisinde ilk satırda fare tıklamalarını yakalayacak olan JavaScript fonksiyonumuzu bağlıyoruz. Bir sonraki satırda ise Silverlight animasyonunun FullScreen yani tam ekran olma durumu değiştiğinde çalıştırılmak üzere bir JavaScript fonksiyonu tanımlıyoruz. Böylece animasyon tam ekran moduna geçtiğinde ek olarak video gösterim işlemini yapan MediaElement'i de tam ekran yapacağız. Unutmayın ki MediaElement toplam animasyonun içerisinde sadece bağımsız bir nesne. Tam ekran olan şey bizim Silverlight animasyonumuz MediaElement değil.

  MouseLeftButtonDown: function(sender, keyEventArgs)

  {

    sender.GetHost().Content.FullScreen = true;

  }

MouseLeftButtonDown durumuna iletilen parametreler arasından sender'ı alarak GetHost() metodu ile Silverlight animasyonumuzu yakalıyor ve içeriğine ait FullScreen özelliğini true yaparak tam ekran moduna geçişi sağlıyoruz. Sıra geldi tam ekran moduna geçişi algılayarak animasyon içerisindeki nesneleri uygun boyutlara getirecek olan kodumuza.

  OnFullScreenChange: function(sender, keyEventArgs)

  {

    sender.findName("Medya").Height=sender.getHost().content.actualHeight;

    sender.findName("Medya").Width=sender.getHost().content.actualWidth;

  }

Yukarıda da gördüğünüz gibi doğrudan Medya adındaki MediaElement nesnemizi yakalayarak genişlik ve yükseklik değerlerini değiştiriyoruz. Silverlight animasyonunun tam boyutunu alabilmek için yine Content üzerinden bu sefer actualHeight ve actualWidth özelliklerini kullanıyoruz. Böylece tam olarak ekranın boyutunu alarak MediaElement'imizi tam ekran boyutuna büyütebiliyoruz.

Tam ekran modundan çıkış ile ilgili kurallar zaten bizim değiştiremeyeceğimiz şekilde Silverlight Plug-In tarafından tanımlanmış durumda. Kullanıcılar Esc tuşu ile tam ekrandan çıkış yapabiliyorlar. Konu ile ilgili ufak bir uyarı tam ekran moduna geçiş esnasında otomatik olarak gösteriliyor.

Uygulamamızın son halindeki JavaScript dosyasında bakarsak sonuç aşağıdaki gibi.

if (!window.UntitledProject1)

  window.UntitledProject1 = {};

 

UntitledProject1.Page = function()

{

}

 

UntitledProject1.Page.prototype =

{

  handleLoad: function(control, userContext, rootElement)

  {

    rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.MouseLeftButtonDown));

    control.Content.OnFullScreenChange = this.OnFullScreenChange;

  },

  MouseLeftButtonDown: function(sender, keyEventArgs)

  {

    sender.GetHost().Content.FullScreen = true;

  },

  OnFullScreenChange: function(sender, keyEventArgs)

  {

    sender.findName("Medya").Height=sender.getHost().content.actualHeight;

    sender.findName("Medya").Width=sender.getHost().content.actualWidth;

  }

}

Hepinize kolay gelsin.

Daron Yöndem
MCT, MCPD, MCITP, MCTS, MCSD, MCAD
MCDBA, MCP, ACP, ICSD
http://daron.yondem.com