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);

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;`. — Clemens, Jun 24 '16 at 14:32
funny how your _java_ tag prevented me from seeing this, I wonder how many more people you're excluding by it... — Markus Hütter, Jul 03 '16 at 15:29

score 3 · Answer 1 · answered Jun 28 '16 at 08:16

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.

adminSoftDK · Answer 2 · 2016-06-27T14:49:39.813

1

Instead of this

            mycanvas.Children.Add(BmpImg);

Try this

       mycanvas.Background = new VisualBrush(BmpImg);

This should render properly.

edited Jun 27 '16 at 14:49

answered Jun 27 '16 at 14:42

adminSoftDK

2,012
1
21
41

score 0 · Answer 3 · answered Jun 27 '16 at 12:03

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];

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

3 Answers3