Search
Archives
Corey Miller
Twitter
« Careful using Mouse.OverrideCursor | Main | User Experience Review »
Monday
Dec072009

Creating an Image from PixelShaders in Silverlight and WPF

While this is not the best way to do image calculations in the code behind in terms of imaging with Silverlight and WPF I was perplexed with the problem of having a great pixel shader that I could apply in the xaml using Bitmap Effects but unclear as the best way to translate that to an actual Bitmap Image. If you are looking for a quick fix solution I wanted to share a little gold nugget in how to actually do this that I found. Just to explain a bit more this assumes you already know how to use Pixel Shaders, I will include a sample code to help illustrate this if you do not. But honestly that is a separate topic. I wish I had the source of this little nugget, it took alot of searching and improvising but eventually I came up with the following code:

In the XAML

<Image x:Name="OriginalImage" Source="img.jpg">

   <Image.Effect>

      <l:BrightContrastEffect  x:Name="MyEffect"

                    Brightness="{Binding ElementName=bVal, Path=Value}"

                    Contrast="{Binding ElementName=cVal, Path=Value}"/>

  </Image.Effect>

</Image>

In the Code

//using System.Windows.Media.Imaging;

//using System.Windows.Shapes;

//using System.Windows

//using System.Windows.Media;

BitmapSource bitmap = OriginalImage.Source as BitmapSource; //source from XAML

Size sz = new Size(bitmap.PixelWidth, bitmap.PixelHeight);

 

Rectangle r = new Rectangle();

r.Fill = new ImageBrush(bitmap);

r.Effect = MyEffect; //name applied in XAML

r.Measure(sz);

r.Arrange(new Rect(sz));

 

var rtb = new RenderTargetBitmap(

                    bitmap.PixelWidth, bitmap.PixelHeight, 

                    bitmap.Dpi, bitmap.DpiY, PixelFormats.Pbgra32);

rtb.Render(r);

What it essentially does is takes the effect you apply in the XAML and in the back end you can use that effect to create a new bitmap. You do this by virtually constructing a rectangle of the appropriate size and shape of the original image and applying the effect and the image to the rectangle and then saving that out using RenderTargetBitmap. I will upload a sample solution when I get home this afternoon.

PrintView Printer Friendly Version

EmailEmail Article to Friend

References (3)

References allow you to track sources for this article, as well as articles that were written in response to this article.

Reader Comments (2)

You must know, your article goes to the center of the issue. Your placidity leaves me wanting to know more. Allow me to forthwith grab your feed to keep up to date with your web site. Saying thanks is simply my little way of saying what a masterpiece for a special resource. Accept my dearest wishes for your inflowing publication.

February 16, 2010 | Unregistered Commenterbankruptcy attorneys

You have shared very useful information on PixelShaders in Silverlight and WPF. I got to learn a lot from your blog. Thanks for sharing this.

June 26, 2010 | Unregistered CommenterForce Factor

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>