Bu bölümde Silverlight ile 31 Gün yazi dizimizin onuncusunu olan "Silverlight Kontrolleri ile Modelleme" konusunu isleyecegiz. Bugün daha çok gelistiricilerin sikça karsilastigi sorunlar ve çözüm yollarina odaklanacagiz.

Web gelistiricileri için de Cascading Style Sheets(CSS) kodlamaya benzerdir. Benzer unsurlar için tekrar uygulanabilir bir stil içine marked-up XAML sayfasi ile ortak özellikleri yansitir.

Basit bir web form olusturma

Ilk olarak bir web form olusturalim. Formun içerigini ve style kodlari asagidaki gibidir.

Kodlari incelediyseniz, tekrarli kod kisimlarini görmüssünüzdür. Elemanlar arasinda ortak özellikler varsa, CSS gibi bir style olusturularak elemanlara referans alinir. Bizim de burada TextBlock elemanlari bakarsaniz, her biri bir VerticalAlignment, HorizontalAlignment ve Margin’e sahip. XAML dosyamizda bir style olusturduktan sonra istersek renkler ve yazi tiplerinde de degisiklikler yapabiliriz.

app.xaml içerisinde style olusturma

Style özelliklerimizi app.xaml dosyasinda sakliyoruz. Sizinkinde hiçbir sey olamayabilir. <Application.Resources> bloklari içerisine, <style> elemanini ekleyelim. Her style’in kendine has TargetType türü vardir. XAML elemaninin türü ne ise ona göre TargetType olarak belirtilir. Bu örnekte, TextBlock elemani için style yaziyoruz. Bu nedenle TargetType türü TextBlock olarak verilmistir. app.xaml dosyamizin içerigi açagidaki gibidir.

Style özellikleri ekleme

Simdi Style’imize bazi özellikler eklemeye çalisalim. Bunu <Setter> elemani ile yapacagiz. Burada, yukarida yaptigimiz gibi renk ve fontlar için style olusturulabilir. TextBlock’larimiz için VerticalAlignment, HorizontalAlignment ve Margin özelliklerini style içerisinde yazacagiz. Yeni app.xaml dosyamizin içerigi asagidaki gibidir.

Simdi burada olusturdugumuz style’imizi xaml dosyamizdaki tek bir textblock elemana nasil referans olarak ekleyecegimizi gösterelim. Style’imizi asagidaki gibi referans olarak ekliyoruz.

<TextBlock Text="First Name:" Grid.Column="0" Grid.Row="0" Style="{StaticResource FormLabel}" />

XAML dosyamizin son hali

Buna göre xaml dosyamizin son hali asagidaki gibi olacaktir.

app.xaml dosyamizin son hali

Ekledigimiz style özellikleri ile app.xaml dosyamizinda son hali asagidaki gibi olacaktir.

Bugün ki makalemizde silverlight kontrollerine nasil style yazacagimizi ve style özelliklerini nasil referans gösterdigimizi isledik. Projemize ait kodlarin tamamini color=#0000cc buradan indirebilirsiniz.

Haberci Grup adina çevrisi tarafimdan hazirlanmistir.