Making Image Gray 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

<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"   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

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