Ahmet Çığşar | WPF Resources ve WPF Style Kullanımı
506
post-template-default,single,single-post,postid-506,single-format-standard,qode-quick-links-1.0,ajax_fade,page_not_loaded,,qode-theme-ver-11.0,qode-theme-bridge

WPF Resources ve WPF Style Kullanımı

WPF Resources ve WPF Style Kullanımı

WPF’de stil kullanımı sıradan bir tabirle HTML sayfalarında kullandığımız CSS’e (Cascading Style Sheets) yapısına benzetebiliriz. WPF stilleri arayüzde kullandığımız kontroller ve bazı nesneler üzerinde bir çok görsel özelliklere müdahale edebileceğimiz bir yapıdır. Örneğin; butonların arkaplan rengi şu olsun, yazıtipleri bu olsun, metin kutularının çerçevesi şu renk olsun,  gibi şeyler nasıl açıkladım ama değil mi? 🙂

Şimdi basit stil örnekleri ile başlayıp kaynaklar (Resources) ve stil kaynaklarını kullanarak devam edeceğiz. Aşağıda mavi ve turuncu renklerde iki farklı buton görmektesiniz. Şimdi bu butonları oluşturan WPF stillerinin XAML kodlarını inceleyelim.

wpf-styles-button

    <Window.Resources>
        <Style x:Key="maviDortgenButon" TargetType="Button">
            <Setter Property="Background" Value="Blue" />
            <Setter Property="FontFamily" Value="Arial" />
            <Setter Property="Width" Value="270" />
            <Setter Property="Height" Value="75" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Foreground" Value="White" />            
        </Style>

        <Style x:Key="maviTuruncuButonum" TargetType="Button">
            <Setter Property="Background" Value="Orange" />
            <Setter Property="FontFamily" Value="Arial" />
            <Setter Property="Width" Value="270" />
            <Setter Property="Height" Value="75" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Foreground" Value="White" />
        </Style>
    </Window.Resources>

    <Grid>
        <Button Style="{StaticResource maviDortgenButon}" Content="Ben Maviyim" Width="170"/>
        <Button Style="{StaticResource ResourceKey=maviTuruncuButonum}" Content="Ben Turuncuyum"  Width="170"/>
    </Grid>
</Window>

<Window.Resources>
Stillerimizi  tanımlarken bir Resources (kaynak-lar) içerisinde tanımlamak zorundayız böylece kontrollerimizde stil kullanırken biçimlendirme bilgilerini bir resource’dan yani kaynaktan alabilelim işin mantıksal tarafı böyle. Resources’lar Window, Application, Grid, Page yapıları içerisinde tanımlanabilir.

WPF’de Resources’ları belirtirken dikkat etmemiz gereken şey Resources’ların etki bölgeleridir. Örneğin <Grid.Resources> şeklinde bir kullanımda stil bilgilerini sadece grid içerisinde kullanabiliriz eğer tüm Window alanında kullanmak istiyorsak <Window.Resources> şeklinde bir tanımlama yapmamız gereklidir, tüm uygulama tarafından ulaşılmak isteniyorsa proje içerisindeki App.xaml dosyası içerisinde stiller tanımlanmalıdır.  Biz burada Window içerisinde tanımladık.

<Style x:Key=”maviDortgenButon” TargetType=”Button”>
Bu kod satırını tümüyle açıklama gereği duydum. <Style> etiketi ile stil alanını açtığımızı ve bu alana stil bilgilerinin girileceğini belirtiyoruz. x:Key ile, ilgili stili kullanırken çağıracağımız adı belirliyoruz. Key kullanımını CSS, ASP.NET veya HTML’deki id kullanımına benzetebiliriz.  TargetType ile hangi WPF kontrolüne bu stilleri atayacağımızı belirliyoruz.

 <Setter Property=”Background” Value=”Blue” />
WPF’de stil atamaları <Setter> etiketi ile yapılır.  Property ile stil uyguladığımız kontrolün özeliğini seçeriz. Burada Background ile arkaplanı seçmiş oluyoruz. Value ile değer atıyoruz.

<Setter Property=”Foreground” Value=”White” /> 
Bu kod satırında ise Property olarak Foreground yani yazı rengini değiştiriyoruz Value ile White diyoruz böylece buton üzerindeki yazılar artık beyaz olacak. Diğer Setter satırlarını açıklama gereği duymuyorum malum aynı yapı sadece Property’ler farklı.

<Button Style=”{StaticResource maviDortgenButon}” Content=”Ben Maviyim” Width=”170″/>
<Button etiketi ile butonlarımızı oluşturacak elementi açıyoruz. Style ile butonumuza hangi stil uygulanacak seçiyoruz. Burada farklı bir tanımlama görüyoruz çift tırnak içerisinde {StaticResource maviDortgenButon} tanımı.

Önce resource’lar hakkında bir şeyler söylemek istiyorum. Kullandığımız  StaticResource ve DynamicResource yapıları vardır. StaticResource’lar önceden belirlenmiş resourcelardır ve uygulama yüklenirken bir defa yüklenirler ve çalışma anında bir daha değiştirilemezler. DynamicResource ise çalışma anında değiştirilebilir yapıdaki kaynaklardır. StaticResource’lar bir defa yüklendiği ve uygulandığı için daha performanslıdırlar fakat farklı stil dosyalarını organize ettiğimiz ve ResourceDictionary kullandığımız projelerde DynamicResource kullanırız.

maviDortgenButon ise x:Key ile belirlediğimiz stilin çağırma anahtarıdır. Başka bir tabirle burada maviDortgenButon isimli stilin uygulanmasını istiyoruz.  Diğer butonda ise aynı tanımlama farklı şekilde yapılmıştır. {StaticResource ResourceKey=maviTuruncuButonum} tanımlamasıda aynı şeyi ifade eder. ResourceKey= yazmasakta bir sorun olmaz.

Bunlar güzelde Ahmet iki farklı Width tanımlaması var.
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 🙂

WPF’de resources’lar ile ilgili bir kaç makale daha yazmayı düşünüyorum. Bunlarla birlikte stil yapıları içinde örnek uygulamalar yapmayı planlıyorum.

Önümüzdeki günlerde görüşmek üzere.

Yorum Yapılmamış

Yorum Yapın