Silverlight ile tam ekran uygulamalar

**quant£S®** · 01-19-2008

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 MediaElementContentactualHeight ve actualWidth özelliklerini kullanıyoruz. Böylece tam olarak ekranın boyutunu alarak MediaElement'imizi tam ekran boyutuna büyütebiliyoruz. nesnemizi yakalayarak genişlik ve yükseklik değerlerini değiştiriyoruz. Silverlight animasyonunun tam boyutunu alabilmek için yine üzerinden bu sefer
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.

[ÜYE OLMADAN LİNKLERİ GÖREMEZSİNİZ. BURAYA TIKLAYARAK BEDAVA ÜYE OLUN...]

01-19-2008	#1
quant£S® Se®ve® Administ®ato® Türkiyenin En Kaliteli Bilgi Paylasim Mekani AKdenizForum.. Kullanıcı Bilgileri Üyelik Tarihi: Jun 2006 Nerden: тυякєу Mesajlar: 14.472 Üye No: 5 Extra Bilgiler Tecrübe Puanı: 100 Rep Gücü : 14689 Rep Derecesi : İletişim	Silverlight ile tam ekran uygulamalar 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 MediaElementContentactualHeight ve actualWidth özelliklerini kullanıyoruz. Böylece tam olarak ekranın boyutunu alarak MediaElement'imizi tam ekran boyutuna büyütebiliyoruz. nesnemizi yakalayarak genişlik ve yükseklik değerlerini değiştiriyoruz. Silverlight animasyonunun tam boyutunu alabilmek için yine üzerinden bu sefer 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. [ÜYE OLMADAN LİNKLERİ GÖREMEZSİNİZ. BURAYA TIKLAYARAK BEDAVA ÜYE OLUN...] Mesajınızda: -> Mail Adresinizi verirseniz, -> Konuyla alakasız yorum yaparsanız / Konuyla alakasız bir soru sorarsanız, -> Amaçsız, içinde paylaşım olmayan, saçma konular açarsanız, -> Üstüste mesaj yazarsanız ( Flood yapmakda denir), -> Küfür ederseniz, -> Konuyla alakasız bir başlık atarsanız, -> Mesajınızın tamamını büyük harfler veya puntolar kullanarak yazarsanız, Mesajınız SİLİNİR ayrıca siz BANLANIRSINIZ. Bu tip mesajları ihbar etmek için yukarıda işaretlenmiş olan yere tıklayarak yöneticiyi uyarabilirsiniz. *нαуαт, öℓüмℓє кυмαя σуηαмα ѕαηαтı∂ıя...* [ÜYE OLMADAN LİNKLERİ GÖREMEZSİNİZ. BURAYA TIKLAYARAK BEDAVA ÜYE OLUN...] AkdenizForum Toolbar Sitemizi Daha İyi Kullanmak İstiyorsanız Daha Kolaylıkla Sizde İndirin [ÜYE OLMADAN LİNKLERİ GÖREMEZSİNİZ. BURAYA TIKLAYARAK BEDAVA ÜYE OLUN...]

Seçenekler
Yazdırılabilir şekli göster Sayfayı E-Mail olarak gönder