Wpf 3.5 Sp1 Ve Pixel Shader Efektlerinin Kullanımı

[wmismail]

WPF 3.5 SP1 ve Pixel Shader efektlerinin kullanımı...

.NET Framework 3.5 SP1 ile beraber gelen en büyük yeniliklerden biri de PixelShader kullanımının artık WPF uygulamalarında rahat bir şekilde mümkün olması. Kendi PixelShader efektlerinizi yazabileceğiniz gibi hazır kütüphanelerden de faydalanabilirsiniz. Bu yazımızda içerisinde hem normal PixelShader efektleri hem de geçiş efektleri barındıran CodePlex üzerindeki Windows Presentation Foundation Pixel Shader Effects Library kütüphanesini kullanarak efektlerin nasıl uygulandığını inceleyeceğiz.

Hazırlığımızı yapalım.

CodePlex üzerindeki Pixel Shader kütüphanesini kullanabilmemiz için öncesinde bir de Shader Effects BuildTask ve şablonlarını kurmamız gerek. Bu eklentiler doğrudan Pixel Shader efektlerinin programlanmasında kullanılıyor. Biz kendi Pixel Shader efektlerimizi programlamayacak olsak da diğer kütüphane bu eklentileri kullandığı için bilgisayarımıza kurmamız şart.

WPF Futures içerisinde bulunan Shader Effects BuildTask and Templates.zip yüklemesini aşağıdaki adresten bilgisayarınıza indirebilirsiniz.

http://www.codeplex.com/wpf/

İndirdiğiniz bu paket içerisindeki ShaderBuildTaskSetup.msi dosyasını çalıştırarak hemen kurulumu tamamlayın. Sonrasında da isterseniz Pixel Shader programlama için kullanılan şablonları da bilgisayarınıza yükleyebilirsiniz. Bunun için yükleme paketindeki Templates.zip dosyasını C:UsersDaronDocumentsVisual Studio 2008 klasöre açmanız gerek. Bu klasör tabi ki sizin bilgisayarınızdaki kullanıcı adına göre değişecektir.

Pixel Shader Effects Library

Sıra geldi Pixel Shader Effects Library paketini CodePlex üzerinden indirmeye. Aşağıdaki adresten tüm paketi bilgisayarınıza indirip kaynak kodları ile beraber yazılmış Pixel Shader efektlerini inceleyebilir hatta paket içerisinde gelen örnek uygulamayı da kullanıp kaynak kodlarını inceleyebilirsiniz.

http://www.codeplex.com/wpffx

Yükleme paketi içerisindeki Visual Studio Solution dosyasını açarsanız karşınıza 3 ayrı proje gelecektir. "ShaderDemoApp" projesi klasik bir WPF projesi. Bu proje birazdan bahsedeceğimiz iki projeyi referans olarak alıp demo amacıyla hazırlanmış durumda. Ayrıca Solution içerisinde bir ShaderEffectLibrary bir de TransitionEffects adında projeler var. Bu projelerin her biri harici DLL kütüphaneleri halinde Compile ediliyor. ShaderEffectLibrary içerisinde standart PixelShader efektleri varken TransitionEffects içerisinde ise Pixel Shader kullanılarak hazırlanmış geçiş efektleri var.

Bu paketlerini farklı projeler içerisinde kullanmak için ister ihtiyacınız olan kütüphanenin projesini kendi solution'larınıza da ekleyin ister örnek proje üzerinden bu kütüphaneleri Compile ederek doğrudan DLL'lerini alarak farklı projelerde kullanın. Karar tamamen size kalmış.

TransitionEffects Kullanımı

Beni ilk heyecanlandıran videolar arası geçiş efektleri olduğu için hemen TransitionEffects kütüphanesinden başlayacağım. Yeni bir WPF projesi yaratarak bir önceki adımda indirdiğimiz paket içerisinde TransitionEffects projesini söz konusu WPF projesi ile aynı Solution içerisine yerleştirdim. Sonrasında WPF projesine de sağ tıklayarak "Add Reference" diyip TransitionEffects projesini WPF'e reference olarak ekledim. Böylece tüm geçiş efektlerini kullanma şansımız olacak.

Videolar arası geçiş yapacağımız için iki ayrı videoyu göstermek üzere uygulamama iki adet MediaElement ekliyorum.

<Window x:Class="Window1"

	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

	  Title="Window1"

	  Height="300"

	  Width="300">

  <Grid>

	<MediaElement x:Name="Birinci"

				Source="Butterfly.wmv"

				Panel.ZIndex="1" />

	<MediaElement x:Name="Ikinci"

				Source="Bear.wmv"

				Opacity="1"

				Visibility="Visible"

				Panel.ZIndex="0" />

	<Button HorizontalAlignment="Right"

		  Margin="0,0,8,8"

		  VerticalAlignment="Bottom"

		  Width="73"

		  Height="27"

		  Content="Button"

		  x:Name="Dugme" />

  </Grid>

</Window>[/CODE]

İki [b]MediaElement[/b] ve bir de [b]Button[/b] olan formumuza ait XAML kodunu yukarıda inceleyebilirsiniz. Bu noktada hemen dikkat etmemiz gereken şeylerden biri MediaElement'lerin [b]ZIndex[/b] özellikleri. Hangi videonun arkada hangisinin önde olduğuna [b]ZIndex[/b] ile karar verdim. Bunun nedeni birazdan kod ile bu sıralamayı değiştirecek olmam.

Uygulama çalıştırıldığında her iki MediaElement de farklı videolar oynatıyor olacaklar. Amacımız şu an önde olan MediaElement'ten arkadakine doğru bir geçiş efekti yaratmak.

[b][VB][/b]

[color= blue]Me[/color].Ikinci.SetValue(Grid.ZIndexProperty, 2)

[b][C#][/b]

[color= blue]this[/color].Ikinci.SetValue([color= #2b91af]Grid[/color].ZIndexProperty, 2);

İlk olarak arkadaki MediaElement'imizi düğmeye basıldığı anda öne alıyoruz. Geçiş efektinin başlangıcında [b]Ikinci[/b] adını verdiğimiz MediaElement otomatik olarak görünmez hale gelecek ve sonrasında da efekt ile ekranda gözükecek. Öne alma işlemini bitirdikten hemen sonra animasyonumuzu hazırlıyoruz.

[b][VB][/b]

[color= blue]Dim[/color] Anim [color= blue]As[/color] [color= blue]New[/color] TransitionEffects.CloudRevealTransitionEffect

[color= blue]Dim[/color] da [color= blue]As[/color] [color= blue]New[/color] DoubleAnimation(0.0, 1.0, [color= blue]New[/color] Duration(TimeSpan.FromSeconds(2.0)), FillBehavior.HoldEnd)

da.AccelerationRatio = 0.5

da.DecelerationRatio = 0.5

Anim.BeginAnimation(TransitionEffect.ProgressProperty, da)

[b][C#][/b]

TransitionEffects.[color= #2b91af]CloudRevealTransitionEffect[/color] Anim = [color= blue]new[/color] TransitionEffects.[color= #2b91af]CloudRevealTransitionEffect[/color]();

[color= #2b91af]DoubleAnimation[/color] da = [color= blue]new[/color] [color= #2b91af]DoubleAnimation[/color](0.0, 1.0, [color= blue]new[/color] [color= #2b91af]Duration[/color]([color= #2b91af]TimeSpan[/color].FromSeconds(2.0)), [color= #2b91af]FillBehavior[/color].HoldEnd);

da.AccelerationRatio = 0.5;

da.DecelerationRatio = 0.5;

Anim.BeginAnimation([color= #2b91af]TransitionEffect[/color].ProgressProperty, da);

Yukarıdaki kod içerisinde de görebileceğiniz gibi [b]Anim[/b] adını verdiğimiz animasyonumuz doğrudan [b]TransitionEffects[/b] kütüphanesinden [b]CloudRevealTransitionEffect[/b] adındaki efektin ta kendisi. Tabi bu efekte bir de DoubleAnimation ayarlamamız gerek, [b]DoubleAnimation[/b] içerisinde efektin [b]Progress[/b] (İlerleme durumu) özelliğinin 0'dan 1'e kadar geleceğini ve bu işlemin 2 saniye süreceği belirtiyoruz. Diğer ayarlar efektin hızlanma ve yavaşlama etkenleri ile ilgili.

Son olarak [b]BeginAnimation[/b] metoduna da Dependency'miz olan ProgressProperty'yi ve DoubleAnimation nesnemizi veriyoruz. Toplamda baktığımızda DoubleAnimation üzerinden efektin sürecinin uzunluğunu belirleyerek efekti başlatmış olduk.

[b][VB][/b]

[color= blue]Dim[/color] vb [color= blue]As[/color] [color= blue]New[/color] VisualBrush([color= blue]Me[/color].Ikinci)

vb.Viewbox = [color= blue]New[/color] Rect(0, 0, [color= blue]Me[/color].Ikinci.ActualWidth, [color= blue]Me[/color].Ikinci.ActualHeight)

vb.ViewboxUnits = BrushMappingMode.Absolute

[b][C#][/b]

[color= #2b91af]VisualBrush[/color] vb = [color= blue]new[/color] [color= #2b91af]VisualBrush[/color]([color= blue]this[/color].Ikinci);

vb.Viewbox = [color= blue]new[/color] [color= #2b91af]Rect[/color](0, 0, [color= blue]this[/color].Ikinci.ActualWidth, [color= blue]this[/color].Ikinci.ActualHeight);

vb.ViewboxUnits = [color= #2b91af]BrushMappingMode[/color].Absolute;

Efekt süregelirken ekrandaki boyama işleminin yapılabilmesi için bi [b]VisualBrush[/b] ayarlıyoruz. Bu [b]VisualBrush[/b] doğrudan bizim [b]Ikinci[/b] adındaki efekte uğrayacak MediaElement'e bağlanıyor. VisualBrush'ın genişlik ve yüksekliğini de ayarladıktan sonra artık kendisini [b]Anim[/b] değişkenimize teslim edebiliriz.

[b][VB][/b]

Anim.OldImage = vb

[color= blue]Me[/color].Ikinci.Effect = Anim

[b][C#][/b]

Anim.OldImage = vb;

[color= blue]this[/color].Ikinci.Effect = Anim;

OldImage özelliği üzerinden [b]VisualBrush'ı[/b] da aktardıktan sonra [b]Ikinci[/b] adındaki MediaElement'e [b]BitMapEffect[/b] olarak animasyonumuzu eşitliyoruz. Hepsi bu kadar Yapının biraz karışık olduğunu itiraf etmeliyim, Pixel Shader Effects kütüphanesinin kullanımı ÇOK kolay değil fakat yaptığı işi daha önceleri nasıl yapabileceğimiz ile karşılaştırırsak aslında gerçekten çok büyük bir yük kaldırdığını söyleyebiliriz.

Aşağıdaki kodu çalıştırdığınızda istediğiniz geçiş efekti ile gerçek zamanlı olarak iki video oynarken birbirleri arasında geçişler yapabildiğinizi göreceksiniz.

[b][VB][/b]

[color= blue]Private[/color] [color= blue]Sub[/color] Dugme_Click([color= blue]ByVal[/color] sender [color= blue]As[/color] [color= blue]Object[/color], [color= blue]ByVal[/color] e [color= blue]As[/color] System.Windows.RoutedEventArgs) [color= blue]Handles[/color] Dugme.Click

[color= blue]Me[/color].Ikinci.SetValue(Grid.ZIndexProperty, 2)

[color= blue]Dim[/color] Anim [color= blue]As[/color] [color= blue]New[/color] TransitionEffects.CloudRevealTransitionEffect

[color= blue]Dim[/color] da [color= blue]As[/color] [color= blue]New[/color] DoubleAnimation(0.0, 1.0, [color= blue]New[/color] Duration(TimeSpan.FromSeconds(2.0)), FillBehavior.HoldEnd)

da.AccelerationRatio = 0.5

da.DecelerationRatio = 0.5

Anim.BeginAnimation(TransitionEffect.ProgressProperty, da)

[color= blue]Dim[/color] vb [color= blue]As[/color] [color= blue]New[/color] VisualBrush([color= blue]Me[/color].Ikinci)

vb.Viewbox = [color= blue]New[/color] Rect(0, 0, [color= blue]Me[/color].Ikinci.ActualWidth, [color= blue]Me[/color].Ikinci.ActualHeight)

vb.ViewboxUnits = BrushMappingMode.Absolute

Anim.OldImage = vb

[color= blue]Me[/color].Ikinci.Effect = Anim

[color= blue]End[/color] [color= blue]Sub[/color]

[C#]

[color= blue]void[/color] Dugme_Click([color= blue]object[/color] sender, [color= #2b91af]RoutedEventArgs[/color] e)

{

[color= blue]this[/color].Ikinci.SetValue([color= #2b91af]Grid[/color].ZIndexProperty, 2);

TransitionEffects.[color= #2b91af]CloudRevealTransitionEffect[/color] Anim = [color= blue]new[/color] TransitionEffects.[color= #2b91af]CloudRevealTransitionEffect[/color]();

[color= #2b91af]DoubleAnimation[/color] da = [color= blue]new[/color] [color= #2b91af]DoubleAnimation[/color](0.0, 1.0, [color= blue]new[/color] [color= #2b91af]Duration[/color]([color= #2b91af]TimeSpan[/color].FromSeconds(2.0)), [color= #2b91af]FillBehavior[/color].HoldEnd);

da.AccelerationRatio = 0.5;

da.DecelerationRatio = 0.5;

Anim.BeginAnimation([color= #2b91af]TransitionEffect[/color].ProgressProperty, da);

[color= #2b91af]VisualBrush[/color] vb = [color= blue]new[/color] [color= #2b91af]VisualBrush[/color]([color= blue]this[/color].Ikinci);

vb.Viewbox = [color= blue]new[/color] [color= #2b91af]Rect[/color](0, 0, [color= blue]this[/color].Ikinci.ActualWidth, [color= blue]this[/color].Ikinci.ActualHeight);

vb.ViewboxUnits = [color= #2b91af]BrushMappingMode[/color].Absolute;

Anim.OldImage = vb;

[color= blue]this[/color].Ikinci.Effect = Anim;

}

[b]ShaderEffects Library Kullanımı[/b]

Bir önceki bölümde geçiş efektlerini kullanırken indirdiğimiz paket içerisinden TransitionEffect projesini kopyalamıştık. Bu sefer de söz konusu paketten ShaderEffects projesini kopyalıyoruz ve kendi yarattığımız bir WPF projesi ile aynı Solution içerisine alıyoruz. Sonrasında WPF projesine sağ tıklayarak "Add Reference" diyip ShaderEffects projesini WPF'e reference olarak tanımlıyoruz. Böylece artık WPF projemizde ShaderEffects kütüphanesini rahatlıkla kullanabiliriz.

Örneğimizde hemen bir [b]MediaElement[/b] yerleştirelim ve bu [b]MediaElement[/b] içerisinde oynatılan videolara Pixel Shader efektleri uygulayalım.

[CODE]<Window x:Class="Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Window1"

Height="300"

Width="300">

<Grid>

<MediaElement x:Name="Birinci"

Source="Butterfly.wmv" />

</Grid>

</Window>[/CODE]

Uygulamamız açıldığı gibi istediğimiz efekti MediaElement'e uygulamak için aslında tek yapmamız gereken uygun efekti ayarları ile ürettikten sonra [b]Birinci[/b] adındaki MediaElement'in [b]Effect[/b] özelliğine eşitleyerek [b]BitmapEffect[/b] olarak atamak.

[b][VB][/b]

[color= blue]Dim[/color] Emboss [color= blue]As[/color] [color= blue]New[/color] ShaderEffectLibrary.EmbossedEffect

Emboss.Amount = 20

Birinci.Effect = Emboss

[b][C#][/b]

ShaderEffectLibrary.[color= #2b91af]EmbossedEffect[/color] Emboss = [color= blue]new[/color] ShaderEffectLibrary.[color= #2b91af]EmbossedEffect[/color]();

Emboss.Amount = 20;

Birinci.Effect = Emboss;

Hepsi bu kadar. Onlarca efekt arasında istediğinizi seçip her efektin kendine özel ayarlarını da yaptıktan sonra ister bu efektleri bir MediaElement'e ister Image nesnesine bağlayabilirsiniz. Hatta dağa da ileri gidip Container Element'lerine bile bu gibi efektler verebilirsiniz.

Hepinize kolay gelsin.

[i]

[right]Daron Yöndem[/right]

[/i]