Scaling/ hiding images picturebox

[Entropy69]

If have a questionaire report where some of the answers contain an uploaded image and have some trouble showing them correctly in a report. Images are stored in the database and bound to a picturebox.
When there is an image I would like to snow it beneath the text, it should not grow beyond the paper width. When there is no image I would to show just text (no white placeholder for the image).

The images can be large sometimes so setting Sizing of the Picturebox to AutoSize does not work for me (it would clip the image in pdf export)

-Sizing AutoSize is nice, hides when there is no image, but it can grow beyond report width when images are large
-ScaleProportional scales ok, but it does not align to the left and occupies white space when there is no image (even when the picturebox is set to invisible via conditional formatting)

Is there workaround (eg AutoSize and change image dimensions in code behind just before binding?).
AutoSize with max dimensions would be a nice to have...

How to get this right, any clue appreciated

[Mads]

Hello Walther,

I have spent some time looking into this and believe I have found a solution that can work. To achieve what you want, there are two challenges we need to tackle:

1. Shrink the space when there is no image to remove whitespace
2. Get image to align left and size correctly

I will go through each of them. Because I do not know exactly how your data is structured and the report is designed, I can not give an exact suggestion, but I will try my best to explain the approaches so they can apply to your solution.

Shrink space when there is no image

You mention that you "show just text (no white placeholder for the image)" and "(even when the picturebox is set to invisible via conditional formatting)". By using conditional formatting you can hide the PictureBox which I believe is the correct approach in this scenario. 

The reason the whitespace still remains is most likely that the parent container of the PictureBox (maybe a Panel inside a table or the detail-section of the report) will by default not shrink its size, but this can be changed. Both Panels and report-sections can be set to shrink if there is empty space by setting the Property 'CanShrink' to 'True'. 

When the row of data does contain an image, the PictureBox will be rendered and the parent-container will not shrink. If the data does not contain any image, the PictureBox will be set to invisible and the parent-container can shrink to remove the whitespace left after the invisible PictureBox

Get images aligned and sized properly

You mention using the Sizing properties AutoSize and ScaleProportional. I believe ScaleProportional is the correct one, we only miss the ability to align the image to the left. There is a Feature-Request in our Feedback Portal for such functionality called "Align a scaled proportionally image into the PictureBox item". I suggest you add a vote for this item to help its priority.

But we can solve this by using a workaround. If we can adaptively change the width of the PictureBox to fit the image width, it will act as if aligned left. Meaning, we can calculate the width of the box based on the aspect ratio/dimensions of the image and the already set height of the PictureBox. Through Bindings, we can use a UserFunction to calculate this width. Below you see the function I used to calculate this:

 

public static Telerik.Reporting.Drawing.Unit getWidth(string imageString, Telerik.Reporting.Drawing.Unit boxSize)
        {
            if (imageString.Equals(string.Empty)) return new Telerik.Reporting.Drawing.Unit();
            byte[] bytes = Convert.FromBase64String(imageString);

            Image image;
            using (MemoryStream ms = new MemoryStream(bytes))
            {
                image = Image.FromStream(ms);
            }
            double dimension = (double)image.Width / (double)image.Height;
            return new Telerik.Reporting.Drawing.Unit(boxSize.Value * dimension, UnitType.Cm);
        }

 

Note that this is based on the images being stored as Base64 strings in the database. Check out the UserFunction article linked above to see how this can be implemented in your solution. When this function is made available to the Report, we can bind the PictureBox width with this function

This will effectively make the PictureBox fit exactly to the image. Because the PictureBox is positioned in the report based on its upper left corner, the image will now be aligned to that position.

Wrapping up

I hope the information above is useful. Let me know if it works out, if you run into challenges, or have any other questions.

Regards, Mads Progress Telerik

[Entropy69]

this helped me in the right direction, thnx!