Makale Özeti

Daha önce WPF - Efektler başlıklı makaleleyle incelemeye çalıştığımız ShadowEffect, BlurEffect, Swirl, Pixelat efektlerine yeni birkaç resim efekti daha dahil edip incelemeye çalışacağız.

Makale

Daha önce WPF - Efektler başlıklı makaleleyle incelemeye çalıştığımız ShadowEffect, BlurEffect, Swirl, Pixelat efektlerine yeni birkaç resim efekti daha dahil edip incelemeye çalışacağız.

Tüplü televizyonda siyah-beyaz oyunlar oynamanın keyfi. Connect to the Internet'im, 56k'lardan şimdilere uzun bir zaman, aslında 12 yıl. Geçelim :)

Kasik \ mat Windows formlarından sonra özellikle Vista'nın gelmesiyle birlikte Microsoft'un göze hitap etme konusunda hızlı bir çıkışı oldu. Ücretsiz Linux dağıtımlarından heves ettiğimiz birçok pencere efektinin WPF tarafından kolay ve hızlı bir şekilde yapılabilecek olduğunu bilmek bile heyecan veriyor. Bu heyecandan yola çıkan geliştiricilerin de kendi pencerelerini, animasyonlarını yazıp WPF kütüphanesinin zenginliğine zenginlik katacağına hiç kuşku yok. Konuyu dağıtmadan bu yazının bize neler katacağını özetleyelim:

  • Bir resmin nasıl yansıtıcı (refection) uygulanacağını,
  • Nasıl eğilip bükülebileceği (skew),
  • Nasıl gölge (shadow) efeti verilebileceği,
  • Nasıl kabartma (emboss) efekti uygulanacağını

öğrenmeye çalışacağız.

Öncelikle Visual Studio 2010 ortamında WpfEfektleri2 isimli yeni bir tasarı (project) oluşturuyoruz:

Tasarımızı oluşturduktan sonra Window'umuza yeni bir 'image' nesnesi ekliyoruz:

<Image Height="212" HorizontalAlignment="Left" Margin="143,42,0,0" Name="image1" Stretch="Fill" 

VerticalAlignment="Top" Width="200" Source="/Wpf2;component/Images//Makaleler/Resimler/1000002526_tom-03.jpg" />


Tom ve Jerry'mizi Window'umuza ekledikten sonra yansıtıcıyı adım adım takip ediyoruz:

Tom ve Jerry'mizin yansıtıcısını barındıracak bir kenarlık (border) oluşturuyoruz:

<Border Width="134" Height="320" BorderThickness="5" BorderBrush="White" Margin="373,192,233,-77">
</Border>

Oluşturduğumuz kenarlığın boyutlarını resimi taşıyabilecek şekilde ayarlıyoruz ki taşma ya da sığmama durumu yaşanmasın. Taşıyıcımızı ayarladıktan sonra taşıyıcının arkaplanını (BackGround) yansıyacak resim olarak ayarlıyoruz:

<Border.Background> </Border.Background>

Şimdi de Sanal bir fırça darbesiyle ölümcül adımları atmaya başlıyoruz: VisualBrush! System.Windows.Media kütüphanesinde bulunan XMLNS'si http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation bu sınıf TileBrush sınıfından türetilmiştir. Yansıtma, büyütme vb. efektler için kullanılan bu sınıfın C# ve XAML kodları aşağıdaki gibidir:

C#

VisualBrush myVisualBrush = new VisualBrush();

XAML

<VisualBrush .../>

Tekrar Tom ve Jerry'mize dönelim ve yansıtma efektimize devam edelim:

<VisualBrush.Transform>
   <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="50" CenterY="150"></ScaleTransform>
</VisualBrush.Transform>

<VisualBrush> etiketleri arasına yerleştirdiğimiz Transform ve ScaleTransform ile tanışıyoruz; Transform, "biçim değiştirmek" ya da "dönüştürmek" olarak tanımlanabilmekle beraber Brush'ın etkisi altındaki alanı değiştirmeye, çevirmeye vb. işlemleri yapmamıza olanak sağlar. Hemen altındaki ScaleTransform ise yerleşeceği alanın koordinatlarını taşır. ScaleX, ScaleY, CenterX ve CenterY özelliklerine sahip olan ScaleTransform, yalnızca 2 boyutlu (2D) nesneler için kullanılabilir. Transform sınıfından türetilen bu sınıf, System.Windows.Media isim uzayında yer alıyor. Reklamını da yaptıktan sonra kodlamamıza devam edelim:

 <Border.OpacityMask>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0" Color="Black"></GradientStop>
                    <GradientStop Offset="0.6" Color="Transparent"></GradientStop>

                </LinearGradientBrush>
</Border.OpacityMask>

<Border.OpacityMask> etiketlerinin ne iş yaptığını anlamak için Opacity terimini bilmek yetiyor da artıyor bile.

<LinearGradientBrush> sınıfımızı biraz tanımaya çalışalım: Çizgisel olarak fırçalama işlemi yapılmasına olanak sağlar. Yalnızca iki boyutlu (2d) nesneler için kullanılabilir. Miras alınamayan bu sınıf, Brush sınıfından türetilmiştir. StartPoint ve EndPoint isimli iki özelliğiyle başlangıç ve bitiş noktalarını belirtmemizi sağlıyor.

<GradientStop> sınıfı, renk geçişleri için sık sık kullanılan bir sınıftır. System.Windows.Media isim uzayında yer alır ve Animatable, IFormattable sınıflarından türetilmiştir. Offset özelliğiyse renk geçişinin oranını ya da MSDN'deki anlamıyla rengi durduracak değerdir. :) Color özelliğinin Transparent olarak atanması, resmin o oranda silikleştirilmesini sağlamaktadır.

Buraya kadar olan Tom ve Jerry yansımasına bakmanın zamanı gelmiştir:

Benim siyah-beyaz resim seçmem nedeniyle ahım şahım görünmeyen bu sonucu sizler daha iyi seçimler yaparak değiştirebilirsiniz. :)

Yansımanın yönünü değiştirerek resme daha fazla gerçeklik vermeye çalışalım:

<Border.RenderTransform>
                <SkewTransform CenterX="30" CenterY="2" AngleX="-30" AngleY="10" />
</Border.RenderTransform>

<Border.RenderTransform> etiketleri altında bulunan SkewTransform, iki boyutlu nesneler üzerinde eğme (skew), bükme (bending) işlemi yapıyor. Transform sınıfından türetilen SkewTransform, System.Windows.Media isim uzayında bulunuyor. CenterX ve CenterY özellikleri bulunacağı koordinatı, AngleX ve AngleY ise eğme \ bükme koordinatlarını temsil ediyor.

Tüm bu satırları yazarken aynı konuda Turhal'ın da bir yazı yazdığını öğrenmek hevesimi kırmadı, inanın. :]

Ve sonuç alma zamanı gelmiş bulunuyor!

Resim Üzerinde Gölge (Shadow) Efekti

<Image Source="/Wpf2;component/Images//Makaleler/Resimler/1000002526_tom-03.jpg" Width="134" Height="190" Stretch="Fill" x:Name="tom" Margin="383,71,223,154">
        <Image.Effect>
            <DropShadowEffect ShadowDepth="20" Opacity="0.5" BlurRadius="10" Direction="240"></DropShadowEffect>
        </Image.Effect>

</Image>

Hiç lafı uzatmadan direk çıktımıza bakalım ve ayrıntıların WPF - Efektler başlıklı yazımızda bulunabileceğini söyleyelim:

Artık Office 2007 ve Office 2010 üzerinde bulunan Resimlere efekt verme vb. işlemlerin nasıl yapılabildiğini de öğrenmiş olduk. (En azından ben öyle düşünüyorum. :))

Elbette tüm bu yansıtma ve benzeri işlemler daha önce bazı bileşen firmaları ve yazılımcılar tarafından paylaşıldı ve\veya ücretli olarak satıldı. Örneğin DevExpress firmasının -yanılmıyorsam- 2008 yılındaki bileşenleri içinde birkaç yazı ve resim nesnesi bulunuyordu. Artık tüm bunları kendi sınıfımızı yazarak yapabiliriz.:)

Kabartma (Emboss) Efekti

Kabartma efektinin Photoshop ve türevi resim programları başta olmak üzere birçok web sitesinin aranan efektlerinden biri olduğunu biliyoruz. Hatta 85-90 nesilleri İş-Teknik ve türevi derslerde farklı nesneler üzerinde kabartma uygulamıştır. :) Biz de o günlere inat Tom ve Jerry üzerinde kabartma uygulayacağız:

Not: (Emboss efekti, Microsoft.Expression.Media.Effect kütüphanesinde yer aldığından VS.NET 2010 ile uygulayamazsınız. İlgili kütüphane için: MSDN)

<Image Margin="157,22,157.91,5" Source="/Makaleler/Resimler/1000002526_tom-03.jpg" Stretch="Fill">
<Image.Effect>
<ee:EmbossedEffect Color="#FFBFF3BD" Amount="2.97" Height="0.00031"/>
</Image.Effect>

</Image>

Color, adından da anlaşılacağı üzere kabartmanın (emboss) rengini belirliyor.

Amount, kabartmanın belirginliğini belirlememizi sağlıyor. Double türünden olan bu özellik, 0 ile 500 arasında değer alabiliyor.

Height, özelliğiyse kabartmanın genişliğini ayarlamamızı sağlıyor.

Çirkinliğini görmezden gelmeniz dileğiyle, sonuç aşağıdaki gibidir:

Umarım yararlı olabilmişimdir.

Hoşçakalın.

Mehmet KAPLAN
mehmet.kaplan@hotmail.com.tr
www.koDDefterim.com