Silverlight ile tam ekran uygulamalar

0 dakikada yazıldı

6027 defa okundu

Düzenle

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.