Ders 3: Resim Ekleme

Silverlight uygulamalarınıza başka bir program hazırladığınız resimleri ekleyebilirsiniz. Buna şaşırmamışsınızdır. Ancak Silverlight 4.0'da beni şaşırtan bir özellik şu: Sadece JPG ve PNG dosyalarını ekleyin görüntüleyebiliyorsunuz. Bir "image" kontrol içinde bunların haricinde bir formatı (mesela gif) desteklemiyor. O nedenle resimlerinizi Silverlight projesine eklemeden önce mutlaka JPG ya da PNG olarak hazırlayın.
Resim eklemek ve göstermek için gerekli olan adımlar şunlar.


1. Projenize bir image kontrolü ekleyin
Bunun için Toolbox'dan image kontrolünü seçmek gerekiyor. Ancak dikkat ederseniz halihazırda görünür bir image kontrolü yok. Önce Toolbox'a image kontrolünü ekleyelim. Bunun için Toolbox'daki Assets butonu ile açılan kontroller listesinden Locations sekmesinden image kontrolünü bulup çift tıklayın. image kontrolü Toolbox'a eklenecektir. 

Daha sonra projemize bir image kontrolü ekleyin. İlk başta resim olmadığı için içi boş olarak aşağıdaki gibi görünecektir.

2. image kontrolümüze resim ekleme

image kontrolünü seçip Properties penceresinden (Common Properties) Source özelliğine resmimizi göstermek yeterli. Bunu yaptıktan sonra resmin bir kopyası proje klasörüne eklenir ve bu klasördeki resim image kontrolünde gösterilir. Derlemeden sonra ise, bu resim XAP dosyamızın içine gömülür. Bunun bir sınır vardır. 250 KB altındaki tüm resimler XAP dosyasının içine gömülür. Daha büyükler boyuttaki  resimler için ekleme sırasında gömülüp gömülmeyeceği sorulur. Onay verirseniz gömülür.  Bu sebeple resmin orijinalinin saklanmasına gerek yoktur veya proje yapılacak değişikliklerden etkilenmez.

Bu adımdan sonra resim artık ekrana gelir.

3. Resmin Bazı Özellikleri 

Eklenen resmin boyutu ile image kontrolünün boyutu aynı olmayabilir. Bu durumda kim kime uyum sağlayacak bunu belirlemek için image kontrolünün Stretch özelliği ile ayarlama yapılır. Dört seçenekten biri seçilir: None, Fill, Uniform, UniforToFill. Bu dört özellikten None, resmin orjinal boyutlarında tutar. Bu rumda eğer resim image kontrolünden daha büyükse o zaman taşan kısımlar gösterilmez. Fill seçeneğinde, resim image kontrolüne göre yeniden boyutlandırılır (image kontrolünün içini tamamen kaplar). Uniform seçeneğinde ise resim image kontrolün içini dolruracak şekilde boyutlandırılırken bu defa kendi genişlik ve yükseklik oranını da korur. Eğer vesikalık bir resim için bir image kontrolü hazırlıyorsanız böyle bir özelliği seçmekte fayda var. Resimleriniz farklı boyutlarda da olsa, image kontrolü içinde en-boy oranı korunarak gösterileceği için kişilerin fotoğrafları düzgün görünür. Son seçenek ise UniformToFill. Bu seçenekte resim image kontrolünün içinde yine tekrar boyutladırılır ancak bu defa resmin en-boy oranı korunurken, image'in içine sığmayan kısım görüntülenmez. Bu dört seçeneği deneyip yanılarak görmenizde fayda var.

Bir başka özellik de Effects özelliği. image kontrolünü seçip Properties penceresinden Effects özelliğini bulursanız resminize gölge (drop shadow) ya da bulanıklık (blur) efektleri verebilirsiniz. Bunların yoğunluğu ya da derinliği aynı pencereden ayarlayabilirsiniz. 

4. Dinamik Resim Değiştirme

Dinamik resim değiştirme dediğimiz zaman uygulamanız çalışırken resmi değiştirmek ya da yüklemek aklımıza gelsin. Bunun için 2 önemli şey var. Birincisi, yüklenecek resmi önceden projeye eklemek, ikincisi kod yazarak image kontrolüne bu resmi yüklemek.

Birinci adımda resmi projeye ekliyoruz. Bunun için projenize sağ tıklayıp "Add Existing Item" diyoruz. Açılan pencereden resmimizi seçip projemize ekliyoruz. Ekleme sırasında 250 KB büyüklüğünden daha büyük resim seçmişseniz size "XAP dosyasına gömülsün mü?" diye soracaktır. Onaylayıp devam edin. 

İkinci adımda resmi ne zaman değiştireceğinize karar verin. Resmi değiştirmek için ben bir buton kullanacağım. Butona her tıkladığımda resmim değişecek. Aşağıdaki kodlara bu işe yarıyor.

private void btnResimDegistir_Click(object sender, System.Windows.RoutedEventArgs e)
{
// image kontrolünün resminin adını öğrenmek için önce bitmap'e çevirmek gerekiyor
BitmapImage obitmapImage1 = (BitmapImage)(this.image1.Source);
if (obitmapImage1.UriSource.OriginalString == "bilgisayarresmi.png")
{
this.image1.Source = new BitmapImage(new Uri("Penguins.jpg", UriKind.RelativeOrAbsolute));
}
else
{
this.image1.Source = new BitmapImage(new Uri("bilgisayarresmi.png", UriKind.RelativeOrAbsolute));
}
}

Gördüğünüz gibi butona her tıkladığımda resim değişecektir.

Son olarak belirtmeliyim ki, buradaki resimler proje içerisine gömülmüş resimlerdir. Yani dinamik olarak değiştirdiğimiz resimler XAP dosyasının içine eklediğimiz resimlerdir. Eğer fotoğraf albümü gibi çok sayıda resim ile çalışacaksanız o zaman resimleri XAP içine gömmeyin, başka bir klasörün altında tutun. Bu klasörün altındaki resimleri de new Uri("/resimler/resim1.jpg", UriKind.Relative) şeklinde verin. Albümün web'de yayınlanacağını unutmayın. Görüşmek üzere.