Image size limitation on a button is not kept

3 posts, 1 answers
  1. sebastien
    sebastien avatar
    42 posts
    Member since:
    May 2017

    Posted 25 Jan Link to this post

    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. Answer
    Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 28 Jan Link to this post

    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.
  3. sebastien
    sebastien avatar
    42 posts
    Member since:
    May 2017

    Posted 28 Jan in reply to Hristo Link to this post

    Worked, thanks!
Back to Top