Image size limitation on a button is not kept

[sebastien]

Hi, 

I'm trying to limit the size of image inside a RadButtonElement, but after build it returns to original image file size.

 

I set the Image size in RadButtonElement (in RadRibbonBar) by using the ImagePrimitive properties:
- Click on the smart tag of your RadButton and choose "Edit UI elements"
- In the Control element structure navigate to ImagePrimitive.
- Change MinSize and MaxSize's Height and Width properties to 48 (image size is 225x225 in PNG file type)
- Change ImageLayout to Strech

Theme is "Fluent".

Here is what is generated in the designer file:

this.radButtonElementExecute.AutoSize = false;
            this.radButtonElementExecute.AutoSizeMode = Telerik.WinControls.RadAutoSizeMode.Auto;
            this.radButtonElementExecute.AutoToolTip = true;
            this.radButtonElementExecute.BackColor = System.Drawing.Color.FromArgb(((int)(((byte)(229)))), ((int)(((byte)(239)))), ((int)(((byte)(255)))));
            this.radButtonElementExecute.Bounds = new System.Drawing.Rectangle(0, 0, 57, 69);
            this.radButtonElementExecute.DefaultSize = new System.Drawing.Size(0, 0);
            this.radButtonElementExecute.Font = new System.Drawing.Font("Segoe UI", 8.25F);
            this.radButtonElementExecute.ForeColor = System.Drawing.Color.FromArgb(((int)(((byte)(21)))), ((int)(((byte)(66)))), ((int)(((byte)(139)))));
            this.radButtonElementExecute.Image = ((System.Drawing.Image)(resources.GetObject("radButtonElementExecute.Image")));
            this.radButtonElementExecute.ImageAlignment = System.Drawing.ContentAlignment.TopCenter;
            this.radButtonElementExecute.ImageIndex = -1;
            this.radButtonElementExecute.MaxSize = new System.Drawing.Size(57, 69);
            this.radButtonElementExecute.MinSize = new System.Drawing.Size(0, 0);
            this.radButtonElementExecute.Name = "radButtonElementExecute";
            this.radButtonElementExecute.StretchHorizontally = false;
            this.radButtonElementExecute.StretchVertically = false;
            this.radButtonElementExecute.Text = "Execute";
            this.radButtonElementExecute.TextAlignment = System.Drawing.ContentAlignment.MiddleCenter;
            this.radButtonElementExecute.TextImageRelation = System.Windows.Forms.TextImageRelation.ImageAboveText;
            this.radButtonElementExecute.TextOrientation = System.Windows.Forms.Orientation.Horizontal;
            this.radButtonElementExecute.ToolTipText = "Execute";
            this.radButtonElementExecute.Click += new System.EventHandler(this.radButtonRunExecution_Click);
            ((Telerik.WinControls.Primitives.ImagePrimitive)(this.radButtonElementExecute.GetChildAt(1).GetChildAt(0))).ImageLayout = System.Windows.Forms.ImageLayout.Stretch;
            ((Telerik.WinControls.Primitives.ImagePrimitive)(this.radButtonElementExecute.GetChildAt(1).GetChildAt(0))).AutoSize = false;
            ((Telerik.WinControls.Primitives.ImagePrimitive)(this.radButtonElementExecute.GetChildAt(1).GetChildAt(0))).MinSize = new System.Drawing.Size(48, 48);
            ((Telerik.WinControls.Primitives.ImagePrimitive)(this.radButtonElementExecute.GetChildAt(1).GetChildAt(0))).MaxSize = new System.Drawing.Size(48, 48);

 

thanks

[Hristo]

Hi Sebastien,

Thank you for writing.

In order to achieve the desired result please set the ImageScaling property of the image primitive to SizeToFit. Then you can also specify its ScaleSize property: 

this.radButtonElement1.Image = Properties.Resources.cloud;
this.radButtonElement1.TextImageRelation = TextImageRelation.ImageAboveText;
this.radButtonElement1.ImagePrimitive.ImageScaling = Telerik.WinControls.Enumerations.ImageScaling.SizeToFit;
this.radButtonElement1.ImagePrimitive.ImageLayout = ImageLayout.Stretch;
this.radButtonElement1.ImagePrimitive.ScaleSize = new Size(48, 48);

Please also note that when using the Edit UI elements dialog in the Visual Studio designer, not all properties set to the inner elements may be serialized. So you can consider applying these settings at run-time according to my code snippet above. When designing our ribbon bars, e.g. in the RadRichTextEditor or in the diagram control, we are using images with sizes which do not need additional adjustments, e.g. 32x32 or 16x16. If you have the resources, you can also consider preparing the images with the correct sizes beforehand. You can also check this article discussing how big and small images can be used in the ribbon bar.

I hope this will help. Let me know if you have other questions.

Regards,
Hristo
Progress Telerik

[sebastien]

Worked, thanks!