This is a migrated thread and some comments may be shown as answers.

Image size limitation on a button is not kept

2 Answers 554 Views
RibbonBar
This is a migrated thread and some comments may be shown as answers.
sebastien
Top achievements
Rank 1
sebastien asked on 25 Jan 2019, 08:46 PM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Hristo
Telerik team
answered on 28 Jan 2019, 08:52 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
sebastien
Top achievements
Rank 1
answered on 28 Jan 2019, 08:31 PM
Worked, thanks!
Tags
RibbonBar
Asked by
sebastien
Top achievements
Rank 1
Answers by
Hristo
Telerik team
sebastien
Top achievements
Rank 1
Share this question
or