Dhananjay Kumar

Making Image Gray in SILVERLIGHT 3.0

Objective

This article will show; how to make an Image Gray in SILVERLIGHT 3.0. This is a very basic article showing ; how to make an image gray in SILVERLIGHT.

Follow the Steps

  1. 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

<UserControl x:Class=”BehaviorSample1.MainPage”
xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243; xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006
mc:Ignorable=”d” d:DesignWidth=”640″ d:DesignHeight=”480″>
<Grid x:Name=”LayoutRoot” Height=”Auto” Width=”Auto” Background=”Black”>
<Grid.RowDefinitions><RowDefinition Height=”4*”/>
<RowDefinition Height=”*” />
</Grid.RowDefinitions>
<Image x:Name=”myImage” Height=”Auto” Width=”Auto” Source=”a.jpg” Grid.Row=”0″/>
<StackPanel Orientation=”Horizontal” Grid.Row=”1″>
<Button x:Name=”btnMakeGray” Content=”Make Gray” Height=”50″ Width=”150″ HorizontalAlignment=”Center”/>
<Button x:Name=”btnMakeOriginal” Content=”Make Original” Height=”50″ Width=”150″ HorizontalAlignment=”Center” />
</StackPanel>
</Grid></UserControl>

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

         Add events to buttons at the page load.

  1. On click event of btnMakeGray button call MakeGray function.
  2. 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

Dhananjay Kumar

3 responses to “Making Image Gray in SILVERLIGHT 3.0”

  1. Monthly Report February 2010: Total Posts 12 « debug mode……

    […] Making Image Gray in SILVERLIGHT 3.0 […]

  2. Monthly Report January 2010: Total Posts 19 « debug mode……

    […] Making Image Gray in SILVERLIGHT 3.0 […]

  3. Gaganjyoy

    Hi Dhananjay..
    I have tried ur this article,its working good for gray the image but not working for back to original one..

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s

Create a website or blog at WordPress.com