.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Image Processing in Silverlight 3.0

Posted By:Dhananjay Kumar       Posted Date: February 05, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Image Processing in Silverlight 3.0. This article will show you how to make an gray image in Silverlight 3.0.
 

Objective

This article will show you how to make an gray image in Silverlight 3.0. 

Follow the Steps

Create a new Silverlight application.

Design the XAML page
  1. Create two rows
  2. In first row put an Image using Image control.
  3. A.jpg is an existing image in application. I added this image by choosing Add Existing Item option.
  4. In 2nd row put a stack panel. Make orientation to horizontal.
  5. Put two buttons in stack panel. Purpose of one button is to make image gray and other to bring original image back.
MainPage.Xaml


  
  
  
    
  
  
  
  


Function to make an Image Gray
  1. WriteableBitmap class is used to change color of image in SILVERLIGHT.
  2. Function is returning instance of this class.
  3. In function we are looping through height of the image and nesting through width of the image.
  4. Color of each pixel is being changed in the loop.
  5. We will assign instance of WriteableBitmap class as source of image.
WriteableBitmap MakeGray(Image img)
{
  WriteableBitmap bitmap = new WriteableBitmap(img, null);
  for (int y = 0; y < bitmap.PixelHeight; y++)
  {
  for (int x = 0; x < bitmap.PixelWidth; x++)
  {
  int pixelLocation = bitmap.PixelWidth * y + x;
  int pixel = bitmap.Pixels[pixelLocation];
  byte[] pixelBytes = BitConverter.GetBytes(pixel);
  byte bwPixel = (byte)(.299 * pixelBytes[2] + .587 * pixelBytes[1] + .114 * pixelBytes[0]);
  pixelBytes[0] = bwPixel;
  pixelBytes[1] = bwPixel;
  pixelBytes[2] = bwPixel;
  bitmap.Pixels[pixelLocation] = BitConverter.ToInt32(pixelBytes, 0);
  }
  }
  return bitmap ; 
}

Code for the Events
  1. Add events to buttons at the page load.
  2. On click event of btnMakeGray button call MakeGray function.
  3. On click event of btnMakeOriginal button bind image with original source.
MainPage.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging; 
namespace BehaviorSample1
{
  public partial class MainPage : UserControl
  {
  public MainPage()
  {
  InitializeComponent();
  ImageSource  img = myImage.Source;
  btnMakeGray.Click  += (sender, args) => { myImage.Source = MakeGray(myImage); };
  btnMakeOriginal.Click  += (sender, args) => { myImage.Source = new BitmapImage(new Uri("a.jpg", UriKind.Relative)); };
  }
  WriteableBitmap MakeGray(Image img)
  {
  WriteableBitmap bitmap = new WriteableBitmap(img, null);
  for (int y = 0; y < bitmap.PixelHeight; y++)
  {
  for (int x = 0; x < bitmap.PixelWidth; x++)
  {
  int pixelLocation = bitmap.PixelWidth * y + x;
  int pixel = bitmap.Pixels[pixelLocation];
  byte[] pixelBytes = BitConverter.GetBytes(pixel);
   byte bwPixel = (byte)(.299 * pixelBytes[2] + .587 * pixelBytes[1] + .114 * pixelBytes[0]);
  pixelBytes[0] = bwPixel;
  pixelBytes[1] = bwPixel;
  pixelBytes[2] = bwPixel;
  bitmap.Pixels[pixelLocation] = BitConverter.ToInt32(pixelBytes, 0);
  }}
  return bitmap ; 
  }
}
}

Output

image1.gif 
 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend