KMRT BSRN

"Hiç kimsenin ilgisine ihtiyaç duymadığın gün olgunlaşırsın. Hiç kimseden beklentiye girmediğin gün yara almazsın. Ve hiç kimseye bağımlı kalmazsan kazanırsın." OSHO

Silverlight – Uygulama Yüklenme Ekranının Değiştirilmesi

Yorum bırakın


Silverlight uygulamaları kullanıcı bilgisayarına yüklenirken eğer bir özelleştirme yapılmadıysa varsayılan yükleme ekranı ile yüklenirler.. Mesela IE;

image

Bu ekranıda istediğimiz gibi değiştirmemiz mümkün hatta çok şık yükleme sayfaları gördüm. 🙂 Özellikle Telerik fimasının demolarında.. Bu ekran silverlight uygulamamız daha kullanıcı bilgisayarına yüklenmeden önce gösterilmektedir. Bu sebeple bu ekranın tasarımı için Silverlight uygulamasında birşey yapmayacağız. Fakat ekrandaki animasyon yada görsellik tamamiyle bir XAML olarak tasarlanabilmektedir. Bunun için silverlight uygulamamızda boş bir XAML içerisnde ilgili ekranı tasarlayabilirsiniz. Hatta Blend’i bile bu iş için kullanabilirsiniz.. Ben basit bir rectangle ve textblock ile yüklenme ekranı oluşturacağım. Yüklenme yüzdesine göre rectangle’ın boyutunu ayarlayacağım. Böylece progres gibi görünecektir. Fakat burada tüm silverlight kontrolleri kullanılabilir yani progress kontrolünü de kullanabilirsiniz. Dediğim gibi tasarım tamamen sizin elinizde..

Boş bir XAML dosyasına aşağıdaki tasarımı yapıyorum..

image

Burada mavi renkte ki  rectangle ‘ın başlangıç olarak “width” değerini “0” ve “name”  özelliğini “Progress” olarak ayarlıyorum. Bu oluşturduğum XAML ‘ı(loader.xaml)  web sitesi projesine taşıyorum. Silverlight uygulamamızı çalıştıracak olan HTML ya da ASPX dosyasında “object” tagları arasına iki “param” tanımlamamız lazım. Bunlar “splashscreensource” ve “onSourceDownloadProgressChanged” ‘dir.

splashscreensource” ; bizim yüklenme ekranımızı gösteren parametredir. Silverlight uygulaması yüklenirken varsayılan yüklenme animasyonu değil bizimki görüntülenecektir. Burada “loader.xaml” dosyamızı kullanacağız.

onSourceDownloadProgressChanged” ; uygulamamız yüklenirken her bir yüklenme yüzdesini bize bildiren olaydır. Bu olay fırlatıldığında javascript tarafında çalıştırılacak metodu tanımlayacağız.. “onDonwloadProgressChanged

image

Burada  önemli olan bir nokta “object” tagları arasındaki silverlight uygulamamızın bir “id” değerinin olması. Çünkü progress artışında ilgili olay(“onSourceDownloadProgressChanged”) fırlatıldığında çalıştırılacak javascript metodunun “onDonwloadProgressChanged” içinden “object” tag’i içindeki “loader.xaml” dosyasının içine erişmemiz ve içindeki “Progress” isimli rectangle’ın “Width” özelliğini, artışa göre değiştirmemiz gerekmetedir. Böylece yüklenme miktarı görünecektir.

image

HTML tag’ının üstünde “Script” bölmesine yüklenme artışında çalışacak olan javascript fonksiyonumuzu yazıyoruz.

image Gördüğünüz gibi “if” bloğu içinde farklı iki şekilde rectangel nesnesinin width değeri arttırılmaktadır. Bunun sebebi farklı trayıcılar için bunun sağlanması. Bazı tarayıcılarda yüklenen değer “e.progress” ile elde edilirkne bazılarında “e.get_progress” olarak elde edilmektedir.

image

Tabii burada ortalamak, daha hoş grafikler ile bu ekranı süsleyebilirsiniz. Hatta kullanıcıya birde yüzde değerini gösterseymişiz iyi olurmuş. Neyse bunuda siz yaparsınız.. 🙂 Bu arada bu yüklenme süresi çok kısa olduğundan göremezseniz silverlight uygulamanızı 15-20 MB boyutunda ya da daha fazla bir dosya atarak bu dosyayı “Properties” bölümünden “Embedded Resource” olarak ayarlayın ve derleyin, işe yarayacaktır..

İyi Çalışmalar..

Reklamlar

Yazar: K. Murat BAŞEREN, MBA, MCP

I am a senior software developer, MCP, consultant, blogger, former chemist and software trainer. My interests range from software developer to technology. I am also interested in web development, education, and coffee.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s