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

Advertisements

3 thoughts on “Making Image Gray in SILVERLIGHT 3.0

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s