Login | Register

Nerd Paradise

Don't blink.

Editing Images in WPF / C# / .NET

Post by: Blake
Posted on: 10 Cado 8:3 - 18.5.81
For some reason it's so hard to find a simple, to-the-point reference on how to edit regular 32-bit images in WPF, especially considering WPF's lack of a built in image editing library. So here's the most basic sample code for editing an image from scratch programmatically. This is only applicable to WPF projects.

Window1.xaml.cs

using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace ImageEditing
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();

            int width = 300;
            int height = 300;

            // Create a writeable bitmap (which is a valid WPF Image Source
            WriteableBitmap bitmap = new WriteableBitmap(width, height, 96, 96, PixelFormats.Bgra32, null);

            // Create an array of pixels to contain pixel color values
            uint[] pixels = new uint[width * height];

            int red;
            int green;
            int blue;
            int alpha;

            for (int x = 0; x < width; ++x)
            {
                for (int y = 0; y < height; ++y)
                {
                    int i = width * y + x;

                    red = 0;
                    green = 255 * y / height;
                    blue = 255 * (width - x) / width;
                    alpha = 255;

                    pixels[i] = (uint)((blue << 24) + (green << 16) + (red << 8) + alpha);
                }
            }
            
            // apply pixels to bitmap
            bitmap.WritePixels(new Int32Rect(0, 0, 300, 300), pixels, width * 4, 0);

            // set image source to the new bitmap
            this.MainImage.Source = bitmap;
        }
    }
}

Window1.xaml

<Window x:Class="ImageEditing.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>
        <Image x:Name="MainImage"/>
    </Grid>
</Window>

And the result...

csharp_image_edit.jpg
Bam!

As a side note, you don't need to modify all the pixels simultaneously. If you want to modify a smaller region, you can pass in a smaller array of uints to the WritePixels method. The stride parameter for WritePixels is the number of BYTES across your array is PER ROW. As long as the pixel array you passed in has a length that is divisible by the stride divided by 4 and is in sync with the Int32Rect you passed in as the first parameter, you can modify any rectangular region as you wish to optimize your edits.

So there you have it: The sample code for doing basic image manipulation in C#, .NET, WPF, whatever. This really opens up doors for you. For example, based on mouse down/up/move events, you could easily make an mspaint clone. Or your own photo optimizing program based on RGB number crunching. Or just simple scripts such as converting a white-black image into a transparent-black image. Or perhaps you can make your own grand 2D Graphics library for WPF that you sell for lots of money. But those all sound like really good NP posts, so stay tuned.
facebook twitter Stumbleupon Reddit del.icio.us Digg
User Comments: 3
Post by Pgrammer on 12 Ineo 1:3 - 16.90.35
I'm trying to port a GDI+ application to WPF. The first part of this example helped but I still can't write to a Bitmap the way I need to. The current code uses a Graphics object: Graphics.DrawImage(...) to draw on the Bitmap. Do you know of a way to convert this code to WPF using your method? Is it possible to do this with WriteableBitmap?

Thanks!

int sx = (selectedPaletteTile % PALETTE_COLUMNS) * 33;
int sy = (selectedPaletteTile / PALETTE_COLUMNS) * 33;
Rectangle src = new Rectangle(sx, sy, 32, 32); // Source
Rectangle dst = new Rectangle(0, 0, 32, 32); // Destination
gfx.DrawImage(imgPalette.Source, dst, src, draw.GraphicsUnit.Pixel);
Post by fbimage on 13 Vigeo 7:2 - 15.71.71
thank you for your code on image editing in WPF, here i'd like to offer some .net sample codes to create image editing library. and you can use this powerful tool. i think the image library installation is simple as well.
Post by peterlee on 13 Cado 11:1 - 16.25.12
fbimage said:
thank you for your code on image editing in WPF, here i'd like to offer some .net sample codes to create image editing library. and you can use this powerful tool. i think the image library installation is simple as well.

Hi, fbimage.
I wonder whether the tool you mentioned above offers a free trial package for users to check? If it does, I will try it later.


Best regards,
Peter
You must be logged in to add a comment
Current Date: 14 Vigeo 5:0Current Time: 18.6.94Join us in IRC...
Server: irc.esper.net
Channel: #nerdparadise
Your IP: 54.89.1.216Browser: UnknownBrowser Version: 0