Scaling an Image and positioning it at 0,0 in WPF

Question

I have created BitMapSource from a list of RGBA pixels:

BitmapSource bmp = BitmapSource.Create(imageStrideInPixels, height, 96, 96, PixelFormats.Bgra32, null, imageData, imageStrideInPixels * pixelWidth);  

I then create an image from the BitMapSource:

    // create image and set image as source
    Image BmpImg = new Image();
    BmpImg.SetValue(Canvas.ZIndexProperty, 0);
    BmpImg.Width = imageScaleWidth;
    BmpImg.Height = imageScaleHeight;
    BmpImg.Source = bmp;

I then add the Image to the Canvas:

                mycanvas.Width = imageScaleWidth;
                mycanvas.Height = imageScaleHeight;
                mycanvas.Children.Clear();
                mycanvas.Children.Add(BmpImg);
                Canvas.SetLeft(BmpImg, 0);  // to set position (x,y)
                Canvas.SetTop(BmpImg, 0);

The problem is that it is not getting scaled to imageScaleWidth and imageScaleHeight, and it is being displayed half way down the canvas.

Note, I was able to do this in Java SWT by:

imageData = imageData.scaledTo(imageScaleWidth, imageScaleHeight);
gc.drawImage(imageData, 0, 0); 

Magnus

Besides that imageStrideInPixels is quite an odd name for the width of a bitmap, are you sure that the ratios imageStrideInPixels / imageScaleWidth and height / imageScaleHeight are equal? Otherwise the image should not only be scaled, but also stretched. You may then have to set BmpImg.Stretch = Stretch.Fill;. – Handbill

Do you actually need the canvas for anything? – Inurbane

funny how your java tag prevented me from seeing this, I wonder how many more people you're excluding by it... – Ducat

Answer 1

You can scale your image using a ScaleTransform:

// scale the original bitmap source
var transformedBitmap = new TransformedBitmap(
    bmp, 
    new ScaleTransform(
        imageScaleWidth / (double) bmp.PixelWidth, 
        imageScaleHeight / (double) bmp.PixelHeight));

// create image and set image as source
Image bmpImg = new Image();
bmpImg.SetValue(Canvas.ZIndexProperty, 0);
bmpImg.Source = transformedBitmap;

mycanvas.Width = imageScaleWidth;
mycanvas.Height = imageScaleHeight;
mycanvas.Children.Clear();
mycanvas.Children.Add(bmpImg);

Note that your image will be positioned at offset 0, 0 by default.

Reversioner

Answer 2

Instead of this

            mycanvas.Children.Add(BmpImg);

Try this

       mycanvas.Background = new VisualBrush(BmpImg);

This should render properly.

Loewe

Answer 3

Are you sure the image is half way down the canvas and not the canvas itself is centered in its parent? I tested it and it appears that you can control the canvas position by setting vertical/horizontal alignment on canvas' parent. And also it scales properly when using the code you provided. However I created a BitmapSource in a different way. I used the following code:

PngBitmapDecoder decoder = new PngBitmapDecoder(new Uri(@"..."), BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
BitmapSource bmp = decoder.Frames[0];

Jeanelle