Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

Share this Page URL

Custom Shader > Custom Shader - Pg. 21

O'Reilly Media, Inc. 4/5/2012 Next, write some code to apply the blur gradually as the opacity level changes. Modify the ValueChanged event handler as follows: Example 2-7. Value Changed event procedure code [C#] // transition the images var max = TransitionSlider.Maximum; EndImage.Opacity = e.NewValue / max; StartImage.Opacity = 1 - EndImage.Opacity; // opacity is between // we want a max blur // by 20 StartImageBlur.Radius EndImageBlur.Radius = 0.0 and 1.0 radius of 20 so will multiply = EndImage.Opacity * 20; StartImage.Opacity * 20; The project is finished. Run the application and watch the transition. As the first image fades away it gets more blurry while the second image fades in and snaps into focus. Nice effect! (pun intended). I'll show you how to create a custom effect soon, but first a word about performance. Debrief I have a few quibbles with this code, for one, the performance might be improved by consolidating the effects. There are two blur effects applied to an overlapped area of the screen. If you are seeing perf issues during testing this is an area worthy of further research. To consolidate, you could remove the image effects, wrap the two Images inside another container and apply the blur to the parent container. You can't use the current grid (LayoutRoot), because the blur would alter all children including the slider element. The solution is to add another grid and place the images in the new grid. You'd have to change the transition code too. Custom Shader Now that you have some rudimentary experience working with a prebuilt effect, it's time to consider writing a custom one. Custom shaders are necessary when an existing effect doesn't do what you need. Let's say you read an article describing a faster blur algorithm and you decide to alter the BlurEffect to use the newer algorithm. If you wait for Microsoft to release a new version, who knows how long you'll have to wait. In this situation, you are better off writing your own effect. For your first custom shader I picked a simple color modification effect. The shader code is childishly simple, just to give you an overview of the custom shader process. I promise there are more details coming as you read deeper into this book. There are a few common steps necessary in creating a custom shader. · · · · Create a text file containing your HLSL code Compile the HLSL into a binary file Add the binary shader file to a XAML project and mark as project resource Create a .NET wrapper class to expose the shader to your project 12