WPF Style Kullanımı

Merhabalar.

WPF’te style kullanımı formlarımızı tasarlarken bize kolaylık sağlar.Projelerinizde ki yüzlerce buton,textbox,label vb. gibi kontrollerinizin stillerini tek tek düzenlemek bir hayli zaman alıcı bir iş olacaktır. Örneğin bütün butonlarınızın arkaplan renklerini kırmızı , yazı boyutunu 16 pt. yapmak isteyebilirsiniz. Bu tip durumlarda style kullanımı imdadımıza yetişiyor ve işlerimizi bir hayli hafifletiyor. Tanımladığınız stilleri bütün kontrollerinizde kullanabilirsiniz. Her kontrol için ayrı ayrı kod yazmaktansa bir defa kod yazarak zamandan tasarruf sağlayabilirsiniz.

Style App.xaml içerisine yazılırsa projenizde ki bütün formlarınızda geçerli olacaktır. Ancak ayrı ayrı formlarınızda kullanırsanız sadece o formun kontrollerinde etkili olacaktır. Örnek verelim hemen.

App.xaml’a yazılacak kod.


<Application x:Class="WpfApplication2.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="#e3dccc"/>
<Setter Property="Foreground" Value="#a29b89"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Direction="270" Opacity="0.5"/>
</Setter.Value>
</Setter>
</Style>

</Application>

Yukarıda ki kodu App.xaml içerisine yazarsanız style kodlarınız bütün formlarınızda geçerli olacaktır. Aşağıda ki gibi herhangi bir formunuza yazarsanız sadece o formda geçerli olacaktır.


<Window
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" x:Class="WpfApplication2.tipekleme"
 Title="Tip Ekleme Penceresi" WindowStartupLocation="CenterScreen" Closing="Window_Closing">
 <Window.Resources>
 <Style TargetType="Button">
 <Setter Property="Background" Value="#e3dccc"/>
 <Setter Property="Foreground" Value="#a29b89"/>
 <Setter Property="FontWeight" Value="Bold"/>
 <Setter Property="FontSize" Value="16"/>
 <Setter Property="Effect">
 <Setter.Value>
 <DropShadowEffect Direction="270" Opacity="0.5"/>
 </Setter.Value>
 </Setter>
 </Style>
 </Window.Resources>
</Window>

Burada dikkat ettiyseniz tek fark kodların <Application.Resources></Application.Resources> yada <Window.Resources></Window.Resources> arasına yazılıyor olmasıdır. Application’a yazılırsa bütün formlarda, Window’a yazılırsa sadece o formda geçerli olacaktır.

<Style TargetType="Button"

Burada kullandığımız TargetType oluşturulan stilin hangi kontrolde geçerli olacağını belirtmek içindir. TargetType olarak button derseniz bütün butonlarda geçerli olacak bir stil yazdığınızı söylemiş olursunuz.

<Setter Property="............" Valu="........." /> 

style tagını açtıktan sonra <Setter Property=”…….” Value=”………..”/> yapısı ile TargetType’te tanımlanan kontrolün bütün özelliklerini değiştirebiliriz. <Setter Property="Background" Value="Red"/> dediğimiz zaman aslında şunu deriz; ben bütün butonların arkaplan renklerini kırmızı yapmak istiyorum. Bunu belirttikten sonra artık formlarınıza eklediğiniz bütün butonların arkaplan renkleri siz aksini belirtmedikçe kırmızı olacaktır. Diğer kullanımlar için kendiniz denemeler yapabilirsiniz. Temel yapı bu şekilde. 

<Setter Property="Effect">

Kontrol nesnelerinize efekt uygulamanın kullanımı biraz farklıdır. <Setter Property="Effect"/> dediğiniz an buton kontrolüne bir efekt uygulayacağım dersiniz. Ama henüz hangi efekti uygulayacağımızı belirtmedik. Bunu belirtmek için <Setter.Value></Setter.Value> taglarını açıp bu taglar arasına kod yazmamız gerekir. Bu taglar arasına yazacağımız kod ise; <DropShadowEffect Direction="270" Opacity="0.5"/> şeklinde olacaktır. Bu kodu yazınca uygulayacağımız efektin adının DropShadowEffect olacağını, yönünün (Direction=Gölge Yönü) 270 derece olacağını ve Opacity(Opaklık) değerinin 0.5 olacağını söylemiş oluyorum. Efektin diğer özelliklerini de bu şekilde ayarlayabilirsiniz. Deneme yanılma yöntemi size çok şey öğretecektir. 

Önemli Bir Ayrıntı: Stil içerisindeki buton tanımlamalarında butonun Width yani en değeri 270 verilmiş fakat bunun üstüne <Button> etiketi içerisinde buton tanımlanırken Width değeri 170 olarak atanmış. Peki bu durumda ne olur? Hata vermez mi? Hangisini dikkate alacak?
Böyle bir durumda hata almazsınız, bir sorunda yok zaten. Resource’larda aynı özelliklere yapılan farklı tanımlamalarda her zaman lokal olan baz alınır. Yani bu durumda <Button> etiketi içerisinde Width’in değeri baz alınacaktır. Peki <Button> içerisinde değilde <Grid> içerisinde Width tanımlasaydık? Bu seferde Grid içerisindeki değeri baz alacaktı çünkü <Grid> Window’dan daha lokal bir yapıda  olduğundandır. Kısaca Resource’larda aynı özelliğe yapılan farklı değer atamalarında hiyerarşide en büyüğün değil en küçüğün sözü geçerlidir 🙂

Artık bütün butonlar için geçerli olacak bir stil belirlemiş oluyorum.

İşte benim Stilim..... :)

Kolay gele. 

Paylaşmayı unutmayın!