How to position images with stretch = Uniform when children of a canvas from a behavior?

Question

I have a behavior which adds Images as children of a canvas:

 private static void OnSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var behavior = d as ImageCanvasBehavior;
            if (behavior == null)
                return;

            // The AssoicatedObjec is a Canvas.
            Canvas canvas = behavior.AssociatedObject as Canvas;
            if (canvas == null)
                return;

            canvas.Children.Clear();

            CroppedBitmap b = (CroppedBitmap)e.NewValue;          

            Image img = new Image();
            img.Source = b;
            img.Width = canvas.ActualWidth;
            img.Stretch = Stretch.Uniform;

            canvas.Children.Add(img);
        }

The img is added about midway of the horizontal and vertical of the canvas. How can they be positioned to the top-left of the canvas?

TIA

Edit#1 First attempt at a visual tree:

Edit#2 I believe this to be wrong...Only the image should be showing, not all the black space above and below the image and the image should not be cut off.

Colin Smith · Accepted Answer · 2017-04-23T13:54:04.407

1

Use the attached property:

        Image img = new Image();
        img.Source = b;
        img.Width = canvas.ActualWidth;
        img.Stretch = Stretch.Uniform;
        Canvas.SetTop(img, 0);
        Canvas.SetLeft(img, 0);

edited Apr 23 '17 at 13:54

answered Apr 23 '17 at 00:39

Colin Smith

12,375
4
39
47

I tried...no luck :( I'm wondering if there is something peculiar to croppedbitmap. :( – Alan Wayne Apr 23 '17 at 00:41
1

try some negative values on the SetTop and SetLeft...maybe you have some other layout behaviour happening. Could you provide a dump of the entire visual tree of XAML ? If using Visual Studio 2015 or later, you could use the built in Visual Tree visualizer. https://msdn.microsoft.com/en-us/library/mt270227.aspx – Colin Smith Apr 23 '17 at 00:47
How do I get such a dump? – Alan Wayne Apr 23 '17 at 00:48
1

When trying to uncheck "Use managed care" to allow use of the Visual Tree visualizer--my app crashed. However, playing with negative values DOES shift the image, but there must be a way of calculating how much to move it -- doing so randomly is not the best??? – Alan Wayne Apr 23 '17 at 01:10
1

Your canvas is probably not where you think it is, maybe you have added a lot of margin ?....or the image you are cropping still has some white space? Save out the "CroppedBitmap" "b" to disk using this code: http://stackoverflow.com/questions/38281705/how-to-save-a-croppedbitmap ...then upload/show the image on your Question. – Colin Smith Apr 23 '17 at 01:13
1

I tried to get the visual tree (see edit). The Canvas seems to be where it should be. – Alan Wayne Apr 23 '17 at 01:26
1

Save that CroppedBitmap to disk, then view it a graphics package, and upload it here. Then try and use an Image with just the "saved cropped image"....see if it has different behaviour. – Colin Smith Apr 23 '17 at 01:37
1

I'm thinking my CroppedBitmap is wrong??? Please see above edit. Thanks...You taught me much. :) – Alan Wayne Apr 23 '17 at 01:39
Looks like you've calculated the crop "rect" incorrectly – Colin Smith Apr 23 '17 at 01:45
You could use this AutoCropBitmap to autocrop your images, if they vary in the way they define the dead space, and you don't want to work out the cropping rectangle: https://wpftutorial.net/Images.html – Colin Smith Apr 23 '17 at 01:51
1

"*the default value of "Top" and "Left" would be 0 anyway*" isn't true. Their default value is `NaN`. – Clemens Apr 23 '17 at 06:19

score 0 · Answer 2 · answered Apr 25 '17 at 04:09

Solved the issue. The croppedbitmap is coming from an image on an inkcanvas located within a grid. The reference point for the inkcanvas top left was taken as:

//translate point to get the position of the media element 
var p = ic.PointToScreen(new Point(0, 0));

The CORRECT reference point is obtained with:

var p = ic.TranslatePoint(new Point(0, 0), ic.Parent as UIElement);

Once this was fixed, all else came back correctly.

How to position images with stretch = Uniform when children of a canvas from a behavior?

2 Answers2