Silverlight

Ders 3: Resim Ekleme

2010-07-02T16:43:00.001+03:00

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.

Silverlight 4 ile Web Kamerası ile görüntü (CaptureSource Nesnesi)

2010-06-25T11:03:00.001+03:00

Merhaba arkadaşlar. Bir internet sayfasının bilgisayarınızdaki kamera ve mikrofona ulaşması bugüne kadar kolay olmayan bir durumdu. Ancak Silverlight 4.0 bu işi çok kolaylaştırmış. Aşağıdaki gibi bir uygulama yapacağım.

Projeye başlarken User Control üzerine bir adet rectangle, 4 tane buton, 2 adet combobox ve bir tane de image controlü ekliyoruz. Bunlardan image controlü Exp. Blend'de toolbox'da görünmez. Toolbox'ın en altındaki ">>" butonu ile genişlettiğimiz Assest menüsünden "Locations" sekmesinin altında "image" kontrolünü bulup seçebiliriz.

Seçtiğimiz "image" kontrolünü istediğimiz yere çizip eklemiş oluruz. Yukarıdaki arayüzde sağ üst tarafta bulunan küçük resim "image" kontrolümüzdür.

Arayüzü hazırladıktan sonra yapmamız gereken şey tüm kontrollerimize isim vermek. C# yada VB bilenler isimlendirmede bazı kısaltmalara alışkındırlar. Mesela "btnBasla", "Başla" butonuna verdiğim isim. Bu şekilde "cboVideo", "cboAudio", "btnResim", "imgCapture", "recVideo" gibi isimleri kullandım. Sizler de istediğiniz isimleri kullanabilirsiniz, yeter ki isimlendirmede boşluk ve noktalama karakterleri kullanmayın!

İşim gerisi kod yazmak. Kod kısmına "Önce Kamera ve mikrofon listesi oluştur" butonu ile başlayacağız. Butonu seçip Properties penceresinde "Event" sekmesine geçin ve "Click" eventine çift tıklayın. Kod penceresi (MainPAge.xaml.cs) açılacaktır. Aşağıda bu buton için gerekli kodları yazıyorum. Açıklaması hemen altında.

private void btnKameraListesiOlustur_Click(object sender, System.Windows.RoutedEventArgs e)

{

// TODO: Add event handler implementation here.

// Kamera ve mikrofon erişimi için izin iste

if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())

{

// Combobox'lara aygıtları yükle

// Kameraları combobox'a yükle

cboVideo.ItemsSource = CaptureDeviceConfiguration.GetAvailableVideoCaptureDevices();

cboVideo.DisplayMemberPath = "FriendlyName";

if (cboVideo.Items.Count > 0)

cboVideo.SelectedIndex = 0;

// Mikrofonları combobox'a yükle

cboAudio.ItemsSource = CaptureDeviceConfiguration.GetAvailableAudioCaptureDevices();

cboAudio.DisplayMemberPath = "FriendlyName";

if (cboAudio.Items.Count > 0)

cboAudio.SelectedIndex = 0;

}

Burada ilk if ifadesi ile kullanıcıya "kameralarına erişim izni veriyor musun? " sorusunu soruyoruz. Bu Silverlight 4 ile gelen yeni bir özellik.

Eğer kullanıcı ever derse kodların devamında makinede tanımlı kamera ve mikrofonların listesini alıp combobox'lara dolduruyoruz. Eğer kamera ve mikrofon varsa, ilk elemanları seçili duruma getiriyoruz. Kullanıcı daha sonra combobox'dan istediği kamera ve mikrofonu seçebilir.

Sıra Başla ve Bitir butonlarında. Ancak bir de asıl yakalama işini (capture) yapacak nesnemizi tanımlıyoruz. Global alanda yaptığımız bu tanımlada CaptureSource tipinde bir nesne oluşturuyoruz.

// CaptureSource tipindeki nesnemizi tanımlıyoruz.

CaptureSource objYakalamaNesnesi = new CaptureSource();

private void btnBasla_Click(object sender, System.Windows.RoutedEventArgs e)

{

// eğer zaten başladıysa durdur

if(cboVideo.Items.Count == 0)

{

MessageBox.Show("Kamera bulunamadı");

return;

}

if (objYakalamaNesnesi.State == CaptureState.Started)

objYakalamaNesnesi.Stop();

// seçilen aygıtları al

objYakalamaNesnesi.VideoCaptureDevice = (VideoCaptureDevice)cboVideo.SelectedItem;

objYakalamaNesnesi.AudioCaptureDevice = (AudioCaptureDevice)cboAudio.SelectedItem;

// goruntuyu önce hafızaya al

VideoBrush KameraGoruntusu = new VideoBrush();

KameraGoruntusu.SetSource(objYakalamaNesnesi);

// goruntuyu sonra ekranda bir rectangle elemanına bağla

recVideo.Fill = KameraGoruntusu;

// başlat

objYakalamaNesnesi.Start();

}

Başla butonu tıklandığında yaptığımız iş, CaptureSource tipineki "objYakalamaNesnesi" nesnemize seçilen kamera ve mikrofonu atamak, ardından görüntüyü rectangle kontrolüne bağlamak ve son olarak yakalamayı başlatmak.

Aşağıda Bitir butonu için gerekli kodlar var.

private void btnBitir_Click(object sender, RoutedEventArgs e)

{

// Eğer kamera çalışıyorsa durdur

if (objYakalamaNesnesi.State != CaptureState.Stopped)

objYakalamaNesnesi.Stop();

}

.State özelliği, yakalama nesnemizin o anda ne yaptığını kontrol eden bir özellik. Eğer durmamışsa durdurmak için önce kontrol ediyoruz.

Son olarak resim yakalamayı yapalım. Bunun için hem "Resim" butonuna hem de bundan önce resim yakalama olayının yaratılmasına ihtiyacımız var. Aşağıda Resim_Click() metodu, GoruntuKaydedildi() eventi, ve bu event'i CaptureSource tipindeki nesnemize bağlamak için UserControl_Loaded() eventlerine kod yazıyoruz:

private void UserControl_Loaded(object sender, RoutedEventArgs e)

{

// Yakalama ogjesine Event ekliyoruz

objYakalamaNesnesi.CaptureImageCompleted += new EventHandler<captureimagecompletedeventargs>(GoruntuKaydedildi);

}

private void GoruntuKaydedildi(object sender, CaptureImageCompletedEventArgs e)

{

//Hafızadaki resmi ekrandaki imgCaptured kontrolüne getir

imgCaptured.Source = e.Result;

}

private void btnResim_Click(object sender, RoutedEventArgs e)

{

//Resim çek

if(objYakalamaNesnesi.State == CaptureState.Started)

objYakalamaNesnesi.CaptureImageAsync();

}

Bu metodlardan UserControl_Loaded() ilk başta çalışıyor ve yakalama objesine GoruntuKaydedildi() olayını bağlıyor. Bunda sonra kullnıcı Resim butonuna tıkladığında CaptureImageAsync() metodu ile o andaki görüntü karesini hafızaya aktarıyor. Bu sırada GoruntuKaydedildi()eventi tetiklendiği için, bu event içine program geliyor. "e.Result" nesnesi ile ekrandaki "imgCapture" resim kutusuna resmi aktarıyoruz.

Hepsi bu kadar.

Bu uygulamayı Tim Heuer'in bloğundan uyarlayarak yaptım. (http://timheuer.com)

Dersler 2: Basit Animasyon - Tekerlek

2010-06-23T13:03:00.000+03:00

Expression Blend'de (ExB) basit bir animasyon yapacağız. Bu animasyon küçük bir dönen tekerlek.

Bu tekerlek kendi etrafında dönecek.

Adım adım yapalım.

1. ExB'de yeni bir proje açın. Adına "Tekerlek" diyelim. Önemli bir nokta proje adlarına rakam ile başlamayın. Aksi takdirde ExB kodlama yaparken şaşırıyor ve bu ilk rakamı başka bir karakter ile değiştiriyor. O nedenle "2.Ders" gibi bir proje adı kullanmayın.

2. User Control'ün enini ve boyunu 40x40 yapınız. User Control altındaki Layout'u silip yerine boş bir Canvas ekleyin. Canvas'ı toolbox'dan seçeren eleyebilirsiniz. Canvas'ın da enini ve boyunu 40x40 yapın, marjinleri 0'layın. Arka plan rengini beyaz yapın. Daha sonra toolbox'dan daire ve dikdörtgen araçlarını kullanarak aşağıdaki gibi basit bir tekerlek yapın. Dairenineni ve boyu 40x40, marjinleri de 0 olsun. Daha sonra daire ve dikdörtgeni seçin (Ctrl basılı), sağ tıklayın ve Group Into>Canvas yapın. Bu sayede döndürme hareketini her birine ayrı ayrı vermektense, onları gruplayan Canvas'a vereceğiz.

3. Bu yeni Canvas'a bir isim verin. Ben "TekerlekCanvas" dedim.

4. Şimdi gelsi sıra animasyonu hareketi olan dönme hareketini tanımamaya. Bunun için önce animasyonun oynayacağı bir plan ekliyoruz. ExB'de buna StoryBoard deniyor. Storyboard eklemek için önce F6'ya basarak animasyon moduan geçiyoruz. Bu mod ekrana storyboard paneli açıyor. Tekrar F6'ya basarak bu paneli kapatabilirsiniz. Şimdilik açık kalsın. Animasyon modu aşağıdaki gibi bir görünme sahip.

5. Animasyon modundayken, ilk önce yeni bir storyboard ekliyoruz. "Object and Timeline" penceresindeki "+" işareti ile yani storyboard'umuzu ekliyoruz. Burada isim vermek önemli. Storyboard'umuza isim verirken yine ilk harf rakam olamadan, içerisinde boşluk ve noktalama işaretleri olmayan bir kelime seçiyoruz. Ben "TekerlekDon" dedim.

6. Storyboard eklenince, aynı panele bir zaman çizelgesi ekleniyor. Tüm yapacağımız bu zaman çizelgesinde istediğimi saniyelerde nasıl bir görüntü oluşsun onu ayarlamak. Zaman çizelgesi toplam 42 dakikalık (neden 42 bilmiyorum) biz zamanı gösteriyor. Saniye saniye (hatta mili saniyeler de var) karelerden oluşabilen bir çizelge. İstediğimiz kareye gitmek için sarı çizgiyi üstünden tutup çizelge üzerinde hareket ettirmek yeterli.

7. Sıfırıncı kareye geliyoruz ve bir anahtar kare ekliyoruz. Bunu çizelgenin üst tarafındaki beyaz sıfır ve artı işareti (0+ benzeri) butonuna tıklayarak yapıyoruz. Aynı şekilde 1. saniyeye geliyoruz ve yine bir anahtar kare ekliyoruz. Anahtar kare, çizimlerimizin o andaki durumlarını belirlemek için belirlediğimi kareler. Aralardaki değişimleri kendisi yapıyor.

8. 1 saniyede geliyoruz ve "TekerlekCanvas" grubunun seçiyoruz. Daha sonra Transform penceresinden rotate özelliğini 360 yapıyoruz. Yani 0. saniyede ilk hali olan tekerleğimizi, 1. saniyede 360 derece dönmüş hale getiriyoruz. Bunu yapınca zaman çizelgesinde 0. ile 1. karelerin arası gri oluyor. Bu aradaki değişimin otomatik olarak yapıldığı belirtiyor.

9. Dönme hareketi (yeni yapılan tüm hareketler gibi) sadece 1 kez oynatılır ve sonra durur. Bunu sürekli hale getirmek için "TekerlekDon" storyboard'unu seçip özelliklerden "RepeatBehavior:Forever" yapıyoruz. Bu şekilde bir kez başladıktan sonra, komut ile durdurulmadığı sürece hareket tekrar edecek demektir.

10. Şimdi animasyonumuzu oynamaya başlaması için kod yazmamız gerekiyor. Aslında ExB 4.0 ile artık bu işi kod yazmadan da yapabiliriz. "Assets > Behaviors" sekmesinin altında, hangi nesneye, ne yapınca (event), sonuç olarak ne yapsın mantığı ile davranışlar kazandırmak mümkün. Ancak ben şu anda tüm detayları bilmiyorum. O nedenle size code-behind kodları yazarak aynı işi çözeceğim. Projeye başlarken dil olarak C# seçtiğimizi unutmayın. C# bildiğinizi varsayarak bu adımları atıyorum. (Visual Basic de olur).

11. İstiyorum ki uygulama yüklenince (loaded) animasyon oynamaya başlasın, ve üzerine her tıkladığımda (MouseLeftButtonDown ya da Up) bir durup bir devam etsin (Pause/Resume). Bunun için 2 laya (event'e) kod yazmam gerek: Birinncisi "Canvas_Loaded()", ikincisi "TekerlekCanvas_MouseLeftBottunDown()" eventlerine kod yazmak. Bunun için önce "Objects and TimeLine" kısmından "Canvas"ı seçiyorumi ardından Properties penceresinde Event listesini açıp oradan istediğim event'i çift tıklıyorum. Tıkladığım anda beyaz bir kod penceresi açılıyor.

12. İlk önce Canvas_Loaded() event'ine animasyona başlaması için kod yazıyorum:

private void Canvas_Loaded(object sender, System.Windows.RoutedEventArgs e)

{

// TODO: Add event handler implementation here.

this.TekerlekDon.Begin();

IsPlaying = true;

}

13. Bu kodda IsPlaying diye bir değişken var. Bu değişken global olarak (event'in dışında) tanımlanmış boolean bir değişken. Birazdan animasyonu bir durdurup bir oynakmak için bu değişkeni kullanacağım. this kelimesi User Controlü temsil ediyor. Bu nedenle kontrol etmek istediğimiz nesnelerin sanki onu alt nesneleriymiş gibi araya nokta "." koyarak isimleri ile ulaşabiliyoruz (yaşasın nesne tabanlı programlama :) )

14. İlk kodlarımız yazdıktan sonra dikkat edeceğimiz bir başka nokta kodu nereye yazdığımız farkında olmak. Kodu "MainPage.xaml.cs" dosyasına yazıyoruz. Microsoft NET platformundan sonra arka planda çalışan kodları ayrı bir sayfada tutup kodlayanların işini kolaylaştırma istemiştir. Derleme sırasında bu dosya da XAP dosyasının içine eklenir. Ancak geliştirme aşamasında farklı 2 dosya olarak saklanır. Kod yazma ekranınızın üzerinde hangi dosyada olduğunuzu gösteren sekmeler vardır. Önceki görüntüye dönmek için MainPage.xaml segmesin tıklamanız yeterli.

15. Şimdi "TekerlekCanvas" nesnemizi seçin event listesinde "MouseLeftbuttonDown" kısmına çift tıklayarak yine kod penceremizi açıyoruz. Buraya da "eğer animasyon oynuyorsa duraklat, duraklatılmış ise kaldığı yerden devam ettir" kodunu yazacağız:

private void TekerlekCanvas_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

// TODO: Add event handler implementation here.

if(IsPlaying)

{

this.TekerlekDon.Pause();

IsPlaying=false;

}

else

{

this.TekerlekDon.Resume();

IsPlaying = true;

}

16. İşlem tamam. Eğer bir noklama hatası vb. yapmadıysanız çekinmeden F5'e basın. Tarayıcınızda aşağıdaki gibi animasyonunuzu döner halde görmeniz gerekiyor. Ben "Kaynağı görüntüle" dediğim için ekranımda "Testpage.html" sayfasının kodlarını da görüyorsunuz. Aşağıdaki resimde tekerlek dönmüyor ama aslında dönüyor. Bu bloğa silverlight uygulaması ekleyemediğim için gösteremiyorum.

17. Son olarak "Kaynağı göster" dememin nedeni, bu tekerleği başka bir HTML sayfasında göstermek istediğinizde almanız gereken kodları göstermek. Bu kodlar istediğiniz bir HTML sayfasına eklerseniz, veeee "Tekerlek.xap" dosyasını aynı klasöre koyarsanız silverlight uygulamanız o sayfada çalışacaktır.

Bugünlük bu kadar. Görüşmek üzere.

Halil Ersoy

Dersler 1: Expression Blend'e giriş, basit çizimler

2010-06-22T15:38:00.000+03:00

Merhaba arkadaşlar. Expression Blend'i (ExBl) ilk açtığımızda ne tür proje yapmak istediğimiz soruyor. NET platformu geldikten sonra Microsoft'un tüm geliştirme uygulamaları hep proje tabanlı çalışıyor. ExBl'de farklı proje tiplerinde uygulama geliştirmek mümkün. Sadece Silverlight uygulaması için "Silverlight Application" türünü seçin. Proje adınızı ve nereye saklamak istediğinizi belirtin. Son olarak Silverlight uygulamanızı geliştirmek için kullanmak istediğiniz dillerden birini (Visual Basic ya da C#) ve silverlight sürümünü seçin. Ok deyin.

Bu seçimlerden sonra ekrana aşağıdaki gibi bir silverlight projesi gelecektir. İlk başta boş bir çizim alanı gelir. Bu beyaz alan sizin silverlight uygulamanızın görsel sınırlarıdır. Bu alanın dışına geliştirme sırasında taşabilirsiniz ancak derlendikten sonra sadece beyaz alan görünür olacaktır. Bu alanı küçüktüp büyütmek tabiki mümkün. İlk olarak Ekrandaki User Control ve altındaki layout seçeneklerine bakalım. User Control geliştirdiğimiz silverlight uygulamasının ana nesnesi. Diğer bütün nesneler (çizimler, şekiller vs) bu nesnenin alt nesneleridir. Silverlight'ta bu şekilde ekrandaki nesneler arasında hiyerarşik biri ilişki vardır. User Controlün hemen altında LayoutRoot diye bie nesne göreceksiniz. Bu da diğer nesneleri bir arada tutmayı sağlayan bir nesnedir. varsayılan olarak gelir. Ancak kullanmak zorunda değiliz. Canvas dediğimiz daha kullanışlı bir gruplama nesnesi kullanacağız. Bu nesne sayesinde istediğimiz nesneleri istediğimiz gibi gruplayabileceğiz. Şimdi LatouyRoot'u sağ tıklayıp, Change Layout Type > Canvas yapalım. Daha sonra User Control'ü seçip ekranın sağ tarafında bulunan Properties penceresinden width ve height özelliklerini değiştirerek istediğimiz boyuta getiriyoruz. Ben 400 x 300'lük bir alan yaptım. Aynı şekilde LayoutRoot nesnesini de seçip 400x300 boyutlarına ayrıca getirmek gerekiyor. Properties penceresi, "Object and Timeline" penceresinde seçtiğimiz nesnelerin özelliklerini gösterir. İstediğimiz nesneyi ister Objects and Timeline" penceresinden, istersen ekranda üzerine tıklayarak seçebiliriz. Seçilen nesnenin etrafı mavi bir renkle gösterilir. Her nesnenin farklı özellikleri vardır. Properties penceresi seçilen nesneye göre içeriğini değiştirir. Bu nedenle seçtiğiniz nesneyi dikkat etmek gerekir.

Şimdi yeni bir nesne ekleyelim. En soldaki toolbox'da Rectangle aracını seçin ve ekranda istediğiniz bir yere dikdörtgeninizi çizin. Çizim bitince Object and Timeline penceresine dikkat edin. Son eklediğiniz bu nesne hiyerarşide el alta eklenir. Bu nesneyi seçtiğinizde properties penceresinde bu nesneye yönelik özellikler gelir. İsteğimizi değişiklikleri burada yapabilirsiniz. Deneye yanılma ile kolaylıkla farklı özelliklerin ne işe yaradığını görebilirsiniz. Önemli olan bir nokta, nesnelere isim verip vermemektir. Vermek zorunlu değildir. Ancak ileride kod yazarak bu nesneleri kontrol etmek istiyorsanız şimdiden bir isim vermeniz iyi olur. İsim vermek için Proerties penceresindeki en üst kutucuğa bir isim giriniz. İsim verirken boşluk kullanmadan, noktalama işaretleri kullanmadan, rakamları kullanarak ve amacına uygun bir isim vermeniz gerekmektedir. Örneğin MaviKutucuk gibi.

Yine önemli olan bir başka konu da ExBl'in tüm çizim ve animasyonları aslında bir XML dosyası olarak saklamasıdır. Kendine has bu formata XAML formatı dedir. Bunu görmek için View \ Active Document View seçeneğinin altındaki 3 alternatiften birini seçin. Split dediğinizde hem XAML hem de çıktısını aynı anda görebilirsiniz.

Bundan sonra ister arayüzde değişiklik yapın ister XAML'de değişiklik yapın. Her ikisi de aynı anda diğerine yansıyacaktır.

Projemizi bu haliyle kaydetmek için File> Save All diyelim. Prki projemizi nasıl çalıştıracağız? Klavyeden F5 tuşuna basarsak varsayılan tarayıcımızda projemizin çıktısını görürüz. Ben Chrome kullandığım için aşağıdaki gibi görüntü gelecektir. Sizler IE kullanıyorsanız IE gelecektir.

Tarayıcımızı kapatıp ExBl'ye geri dönebilirsiniz. F5'e basarak yaptığımız işlem projemizi derlemek. Bu işlem sırasında tüm kodlar (XAML ve ileride göreceğimiz code-behind kodları) derlenir. Eğer hata varsa derleme yapılmaz ve hata mesajları ekranın altında birikir. Bu hataları teker teker halletmeden derleme yapılmaz. Derleme sonunda ise projeniz içinde Bin\Debug klasörü içine gerekli dosyalar oluşturulup yerleştirilir.

Bu dosyalardan Xap uzantılı dosya bizin ürünümüzdür. Derlendiği için tekrar açılamaz. Ancak projemiz içerisinde derlenmemiş hali olan MainPage.xaml dosyası halen ExBl içinde açık bir şekilde saklanmaktadır. Projemizi kaydedip çıktığımızda proej klasörüne bir göz atın. İçerisindeki dosya ve klasör yapısını asla bozmayın. Bir yerden bir yere taşımak istediğinizde tüm klasörü olduğu gibi taşıyın ya da kopyalayın. Yoksa projenizi başka bir yerde açamayabilirsiniz. Şimdilik bu kadar. Görüşmek üzere.

Halil Ersoy

Silverlight ve Expression Blend Hakkında Kaynaklar

2010-06-22T13:31:00.004+03:00

Silverlight ve alakalı teknolojiler hakkıdan tercih ettiğim kaynakları aşağıda sunuyorum. Bir çok konuda bu işi yalayıp yutmuş bu insanlara paylaşımlarından dolayı teşekkür ediyorum.

1. http://daron.yondem.com/tr/default.aspx (Türkçe) Silverlight ve diğer teknolojiler hakkında sınırsız bir kaynak.
2. http://msdn.microsoft.com/en-us/library/cc838158(v=VS.95).aspx (İngilizce) Silverlight hakkında yazılı güzel bir kaynak. İngilizceniz varsa başka hiç bir kitaba gerek kalmıyor. Sıralı konu anlatımı var.
3. http://expression.microsoft.com/en-us/cc188684.aspx (İngilizce) Videolardan oluşan Microsoft Expression ürün yelpazesine ait öğretici içerik
4. http://www.microsoft.com/student/en/us/learn/expression-studio.aspx (İngilizce) Microsoft'un öğrenciler için hazıladığı özel site.
5. http://www.silverlight.net/learn/videos/all/ (İngilizce) Videolarla Expression ve Silverlight anlatımı
6. http://expression.microsoft.com/en-us/cc261636.aspx (İngilizce) Videolarla Expression Blend Anlatımı

Silverlight Nedir?

2010-06-22T10:16:00.001+03:00

Microsoft Silverlight teknolojisi hakkında giriş seviyesinde bilgi sahibi olun:
http://blog.izleogren.com/2010/07/silverlight-nedir-2/

Silverlight için gerekli yazılımlar

2010-06-21T16:06:00.001+03:00

Silverlight geliştirmek için gerekli olan yazılımlar hakkında bilgi edinin
http://blog.izleogren.com/2010/07/silverlight-nedir-2/#more-460