Silverlight 1.0 ve HTML Kontrolleri

0 dakikada yazıldı

5785 defa okundu

Düzenle

Bolca Silverlight 1.0 uygulamaları hazırladığımız :) bugünlerde
maalesef Silverlight 1.0 ile beraber gelen hazır kontrollerin azlığı
yüzünden biraz zorluk çekiyoruz. Bu durum Silverlight'ın bir sonraki
sürümünde düzeliyor olacak fakat biz o zamana kadar uygulamalarımızda
HTML kontrolleri ile idare etmek durumundayız. Peki nasıl olur da bir
Silverlight uygulamasında HTML kontrollerini kullanırız?

Esasen çözüm özünde çok basit. Silverlight'ın programlamasını ne de olsa
sayfamızdaki JavaScript ile yapıyoruz. Aynı JavaScript aslında sayfadaki
diğer HTML kontrollerine de ulaşabilme olanağına sahip. Yani hem
Silverlight hem de HTML nesnelerine aynı anda aynı kod ile ulaşabiliriz.
Bu durumda geriye sadece bir tek soru kalıyor;

HTML kontrollerini Silverlight animasyonlarının üzerine nasıl
yerleştiririz?

İlk olarak ufak bir Silverlight animasyonu hazırlayarak sayfanıza
yerleştirin. Sonrasında hemen gidip createSilverlight metodunuzu
bularak içerisinde aşağıdaki değişikliği yapın. Eğer projenizi
Expression Blend 2 ile yarattıysanız createSilverlight
fonksiyonu default_html.js dosyası içerisinde yer alacaktır.

function createSilverlight()

{

  var scene = new DEVELOAD_SV.Page();

  Silverlight.createObjectEx({

    source: "Page.xaml",

    parentElement: document.getElementById("BirHost"),

    id: "BirHost",

    properties: {

      width: "100%",

      height: "100%",

      version: "1.0",

    **  isWindowless:** "True"

    },

    events: {

      onLoad: Silverlight.createDelegate(scene, scene.handleLoad)

    }

  });

}

Özellikle kalın olarak yazdığım satıra dikkat etmenizde fayda var.
Silverlight animasyon nesnemize ait isWindowless özelliğini True
olarak ayarladığımızda artık bir sonraki adıma geçmek için hazırız
demektir. Aslında bundan sonrası tamamen HTML ve CSS bilgisi ile
alakalı.

    <div id="BirHost">

 

      <script type="text/javascript">

            createSilverlight();

      </script>

 

      <div class="container1">

 

      </div>

    </div>

Yukarıda gördüğünüz HTML kodu Silverlight animasyonumuzun gösterileceği
sayfada yer alıyor. Hali hazırda zaten Silverlight uygulamamız için bir
Host element olarak BirHost elementi ayarlanmış durumda. Bir
önceki bölümde createSilverlight fonksiyonumuz içerisinde de
BirHost elementini parentElement olarak ayarlamıştık. Normalden
farklı olarak bu sefer kodumuzda, BirHost elementi içerisinde başka
bir DIV elementi daha yer alıyor. İşte bu DIV elementi bizim HTML
kontrollerimizi koyacağımız yer. Önemli olan söz konusu DIV elementine
doğru CSS özelliklerini aktararak Silverlight uygulamasının önünde
gözükmesini sağlamak.

      .container1

      {

        height:300px

    **   ** z-index:1**; **

**       ** position:absolute;

        top:230px;

        left:0px;

        width:100%;

      }

Yukarıdaki CSS sınıfı içerisinde özellikle kalın yazılı satırlar çok
önemli. z-index CSS özelliğini 1 olarak ayarlayarak söz konusu
DIV elementinin bir katman öne gelmesini ve Silverlight uygulamasının
önünde gözükmesini sağlıyoruz. Sonrasında position özelliğini de
absolute tanımlayarak DIV elementini ekranda istediğimiz yere
konumlandırabiliyoruz. Artık DIV elementimiz Silverlight
uygulamamızın önünde gözükecek.

DIV elementinin içine istediğiniz HTML nesnelerini yerleştirebilirsiniz
ve söz konusu HTML elementlerinin onclick gibi eskiden de
kullandığımız eventlarına farklı JavaScript fonksiyonları aktararak yine
bu fonksiyonlar içerisinde Silverlight animasyonunuzdaki nesnelere de
.findName metodu ile ulaşabilirsiniz. Aslında bu noktada ister HTML
elementlerini yakalamak olsun ister Silverlight nesnelerini, bugüne
kadar yaptıklarımızdan herhangi bir farklılık söz konusu değil. Esas
mesele HTML nesnelerini "Overlay" olarak Silverlight animasyonunun önüne
koyabilmekti :)

Hepinize kolay gelsin.