Backgroundimage doesn't show in RadButton and questions

2 posts, 0 answers
  1. Andrew
    Andrew avatar
    3 posts
    Member since:
    Nov 2014

    Posted 27 Feb 2015 Link to this post

    First I admit that I'm a newbie regarding UI design in Win8.1 - last time I did UI it was in the time of VB6 - so I may make stupid mistakes. But I've now played around for more than 4 hours, searching this forum and google'd a lot and I don't find some answers.

    I'm working on VS2013, uptodate Telerik for WinForms, Win8.1 64 bit. My application is a simple test application, no custom code, just using the VS design view and Telerik UI elements. The png/icon I use are from "" - downloaded in various pic sizes, currently I'm using the 50x50 pixel size. I imported the stuff into the resources file AND I also used a ImageList property after my first run didn't work out.

    My requirement: simple. A good looking button with a simple image on it. Nothing fancy.

    What I learned: if I use the image property, the image is not rescaled to the button size.
    => What I don't understand: what's the meaning of the "ImageScalingSize" parameters? I can't find an explanation in the documentation, and I don't see any effect on the bitmap if I change values (using the image property). Is there any other component using it? Should they rescale the image?

    What I tried: I used (both the images from the resource file as well as the image from the ImageList) at the BACKGROUNDIMAGE parameter and IN BOTH CASES the image doesn't shop up on a Telerik RadButton. If the use the normal Windows Forms button, the image shows up. I have no idea why this won't work. Is it something with the resolution, the color depth in the PNG, the transparency setting? I tried various scaling settings (tile, stretch, center, zoom), no effect. I have no clue.

    Regarding "SmallImageList": I haven't found any explanation when the SmallImageList is used. Propably a newbie question - any doc on this?

    Kind regards,
  2. Stefan
    Stefan avatar
    2891 posts

    Posted 02 Mar 2015 Link to this post

    Hi Andrew,

    Thank you for writing.

    Our controls are build on top of Telerik Presentation Framework and each control consist of one or more elements. In the button, the element responsible for the image is called ImagePrimitive. To customize the image layout, you should work with its properties. Attached you can find a video demonstrating how to do that. 

    First, I am setting the StretchHorizontally and StretchVertically properties to true, so the ImagePrimitive takes the control size, and the with the ImageLayout property I am controlling the image.

    In regards to the BackgroundImage property, by default the button has a background color, which is imposed by its FillPrimitive. When you set the BackgroundImage it remains behind the fill, so it is not visible. Opening the Edit UI Elements, selecting the FillPrimitive element and setting its Visiblity to Collapsed, will hide it and you will be able to see the BackgroundImage, and control its image layout with the BackgroundImageLayout property.

    I hope that you find this information useful. Should you have any other questions, do not hesitate to contact us.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
Back to Top