WPF Efektleri – ShadowEffect, BlurEffect, Swirl, Pixelate

Bu makalede WPF’te kullanabileceğimiz efektlerin bize sağladığı kolaylıkları, neden kullanmamız gerektiğini ve nasıl kullanabileceğini incelemeye çalışacağım.

Windows Presentation Foundation (WPF), bizlere daha önce Photoshop ve türevi programlarla resim üzerinde yapmaya alışık olduğumuz gölgelendirme, soluklaştırma,  çerçeve renklendirme, doldurma gibi birçok efekti kendi kütüphanelerinden getirip istediğimiz her nesneye uygulayabilmemizi sağlıyor.  Hem XAML hem C# kodlarıyla ulaşılan bu efektler  System.Windows. Media.Effect ve Microsoft.Expression.Media.Effect DLL’lerinden çağırılıyor. Elbette kullanım oranı arttıkça gerek bileşen üreten şirketler, gerekse geliştiricilerin yazdığı DLL’ler kütüphanelerin zenginleşmesini sağlayacaktır.

WPF’in efektleriyle birlikte bize sağladığı kolaylıkları kısaca özetlemek gerekirse:

• Hem C#, hem XAML kodlarıyla ulaşılabilir ve yaratılabiliyor olması,
• Hem Visual Studio hem Expression Studio ortamında kullanılabiliyor ve yaratılabiliyor olması,
• Expression Studio ile kolay bir şekilde animasyon ve efekt yaratmamıza olanak sağlıyor olması,
• Sunduğu efektlerin ‘Performans’ ya da ‘Kalite’ odaklı çalışabiliyor olması,
• Window da dahil tüm nesnelere uygulanabiliyor olması.

WPF’in tüm nesneler için ortak kullandığı bu efektleri klasik Windows Formlarında uygulamak için çok uzun C# ya da VB kodları yazmamız gerekiyordu. Şimdiyse birkaç tıklama işlemiyle hemen hemen her istediğimizi yapabiliyoruz. Ayrıca XAML kodları yardımıyla da yapılabiliyor olması, WPF’in tam anlamıyla kod yönetimini bize bıraktığı anlamına geliyor. Sınırları zorlamak artık zor değil. :)

Uygulama Visual Studio 2008 \ 2010 ya da Expression Blend 2 \ 4 ile test edilebilir.

Yeni bir WPF uygulaması oluşturuyoruz:

Window’umuza yeni bir button ekliyoruz:

<Button Content="Gölgelerin gücü adına" Height="46" HorizontalAlignment="Left" Name="btnGolge" VerticalAlignment="Top" Width="163" Margin="12,12,0,0" />

DropShadowEffect

Buttonumuzu “Gölgeleri gücü adına” Content’iyle oluşturduktan sonra efekt verme işlemine geçiyoruz. İlk efektimizin adı Content’ten anlaşılacağı üzere “DropShadowEffect”’tir. System.Windows. Media.Effect isimli kütüphanede yer alır ve altı farklı özelliğe sahiptir:

<Button Content="Gölgelerin gücü adına" Height="46" HorizontalAlignment="Left" Name="btnGolge" VerticalAlignment="Top" Width="163" Margin="12,12,0,0" >
            <Button.Effect>
                <DropShadowEffect/>
            </Button.Effect>
        </Button>

<Button.Effect> </Button.Effect> etiketlerini inceleyelim:

Efect’ten önceki nesne adı, efektin uygulanacağı nesneyi gösterir. Bu efektler aynı zamanda ComboBox, ListBox, RadioButton vb. nesnelerin hepsine uygulanabilir. Uygulamak için <Button.Effect> yerine efekti uygulayacağınız nesneyi yazmak yeterli olacaktır.

<DropShadowEffect/> etiketi, uygulanacak efekti temsil ediyor. (Bu efekte Expression Blend 4’in Assets \  Effects \ DropShadowEffect kısmından da erişebilirsiniz.) Elbetteki DropShadowEffect göründüğü kadar sade değil, inceleyelim:

BlurRadius: Gölgenin dağılmasını, blurlaşmasını sağlar. Yayılacağı alanı belirler.
Kullanımı: <DropShadowEffect BlurRadius="33"/>

Color: Oluşturulacak gölgenin rengini belirler.
Kullanımı:  <DropShadowEffect  Color="Red" />

Direction: Gölgenin uygulanacağı alanı belirler. Nesnenin üstü, altı, sağı, solu gibi yerleşim yerini ayarlar.
Kullanımı: <DropShadowEffect  Direction="139"/>

Opacity: Gölgenin saydamlığını belirler.
Kullanımı: <DropShadowEffect  Opacity="0.825"/>

ShadowDepth: Gölgenin nesneye olan yakınlığını \ uzaklığını belirler.
Kullanımı: <DropShadowEffect ShadowDepth="8"/>

Tüm bu efekt özelliklerini kullandıktan sonraki görüntü ve XAML çıktısı aşağıdaki gibidir:

       <Button Content="Gölgelerin gücü adına" Height="46" HorizontalAlignment="Left" Name="btnGolge" VerticalAlignment="Top" Width="163" 
                Margin="12,24,0,0" >
            <Button.Effect>
                <DropShadowEffect BlurRadius="33" Color="Red" Direction="139" Opacity="0.825" ShadowDepth="8"/>
            </Button.Effect>
        </Button>

Tüm bunların dışında “RenderingBias” adı verilen, efektin performansa mı, kalitemeye mi dayalı çalışacağını belirleyen bir özellik daha vardır.

BlurEffect

BlurEffect efekti, uygulandığı nesneye adından anlaşılabileceği üzere blur efekti (soluklaştırma) uygular. System.Windows. Media.Effect isimli kütüphanede yer alır.  Bu efektin üç özelliği vardır:

<Button.Effect>
                <BlurEffect Radius="1" RenderingBias="Quality" KernelType="Box"/>
            </Button.Effect>

Radius: Blur’un tonunu, keskiniliğini belirler. Bu özelliğin animasyon kullanımında işe yarayacağını sanıyorum. (3-5 saniye gibi bir aralıkta blurlaşarak yok olan bir button olabilir.)
Kullanımı: <BlurEffect Radius="1" />

KernelType: Uygulanacağı nesnenin görünümüyle ilgili iki seçenek sunar; Box ve Gaussian’dır. Hoşunuza giden şekli kullanabilirsiniz.
Kullanımı: <BlurEffect  KernelType="Box"/>

Swirl

Swirl efekti, Microsoft.Expression.Media.Effect kütüphanesinde yer alır ve iki özelliğe sahiptir. Uygulandığı nesnenin iskeletini ve Content’ini istenilen yöne, istenilen oranda döndürmeye, eğip bükmeye yarar.

Bu efekti de diğerlerinde olduğu gibi bir Button üzerinde uygulayacağız. Resim ve kod çıktısına bakalım ve açıklayarak devam edelim:

<Button Content="Eğil salkım söğüt eğil" Height="172" HorizontalAlignment="Left" Name="button1" VerticalAlignment="Top" Width="206" Background="White" BorderBrush="#FF9A4545" >
            <Button.Effect>
                <ee:SwirlEffect TwistAmount="2" Center="0.66,0.5"/>
            </Button.Effect>
        </Button>

Ekran çıktısında da görünen “Eğil salkım söğüt eğil” adlı Zülfü Livaneli eseri aslında bir Button, resim değil. Yalnızca Swirl Efecti uygulanmış ve Twist Amount’ü yükseltmiş. Kırmızı olan kısımsa kenarlıkları. Alışık olduğumuz kenarlıklardan çok farklıya benziyor? :) Bunu sağlayan Swirl efektinin özelliklerini inceleyelim:

TwistAmount: Uygulandığı nesnenin iskeletini döndürmeyi \ eğmeyi \ şekil vermeyi sağlar.
Kullanımı: <ee:SwirlEffect TwistAmount="2" />

Center: TwistAmount uygulandığında, uygulanacağı ve iskeletin oturacağı yerleşim alanını belirler.
Kullanımı: <ee:SwirlEffect TwistAmount="2" Center="0.66,0.5"/>

Elbette bu efekti geliştirmeyi ve harika sonuçlar almayı hayal gücüne insafına bırakıyorum. J

Pixelate

Pixelate efekti, daha çok resimlerin pikselleriyle oynamamızı sağlayan bir efekttir. Ama bu efekti kullanmak için bir image nesnesine sahip olmak zorunda değiliz. Herhangi bir nesneye de uygulayabilirz. Diğerlerine nazaran en kısır özellikli efekt Pixelate efektidir. Microsoft.Expression.Media.Effect kütüphanesinde yer alır. Yalnızca tek bir özelliği vardır. Ekran ve XAML çıktısına baktıktan sonra açıklamaya çalışayım:

<Image Height="246" HorizontalAlignment="Left" Margin="12,12,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="273" Source="/WPFTest;component/Images/Koala.jpg" >
            <Image.Effect>
                <ee:PixelateEffect Pixelation="0.5"/>
            </Image.Effect>
        </Image>
Küçük dostumuz koalaya uyguladığımıza pixelation işlemi sonucu bir titreklik, bozukluk olduğunu görebilirsiniz.

Pixelation: Uygulandığı nesnenin pikselleriyle oynamamızı sağlar.
Kullanımı: <ee:PixelateEffect Pixelation="0.5"/>

Efektlerle ilgili küçük bir ipucu da Expression Studio kullanmayanlar için:

 XAML kodlarıyla efekt uygulamak zor geliyorsa; örneğin Button nesnesinin XAML kodlarına gelelim ve şu kodları ekleyelim.

<Button.Effect> <DropShadowEffect/> </Button.Effect> (DropShadowEffect zorunlu değildir. Diğer efektler için de geçerlidir.)

Kodları ekledikten sonra DropShadowEffect etiketlerine tıklayalım ve Properties’a girelim. Properties’a girdiğimizde DropShadowEffect’e ait özellikler karşımıza çıkacaktır. (Bunu VS.NET 2008’de denemediğimi itiraf etmek isterim.)

Umarım yararlı olabilmişimdir.

Hoşçakalın.