Custom Images for RadioButton

5 posts, 0 answers
  1. Damien
    Damien avatar
    65 posts
    Member since:
    Oct 2017

    Posted 02 Jan Link to this post

    Hi

    I am converting my application from FlashBuilder to a c# Winform and I would like radiobuttons as shown in the attached gif. Essentially I have an image for the non-selected radiobutton, one for the hover and one for the selection (a different colour depending on what level was selected).

     

    thanks in advance.

  2.
  3. Hristo
    Admin
    Hristo avatar
    1325 posts

    Posted 02 Jan Link to this post

    Hi Damien,

    Thank you for writing.

    I can suggest using the standard StarShapes which are supported by our framework. Additional information is available here: https://docs.telerik.com/devtools/winforms/telerik-presentation-framework/shapes/star-shape. As I understand you would like each of the radio buttons to have an individual fill color when it gets selected. For such a scenario you can consider applying the settings for each of the buttons at run-time. For example like this: 
    this.radRadioButton1.ButtonElement.CheckMarkPrimitive.Shape = new StarShape();
    this.radRadioButton1.ButtonElement.CheckMarkPrimitive.FindDescendant<RadioPrimitive>().NumberOfColors = 1;
    this.radRadioButton1.ButtonElement.CheckMarkPrimitive.FindDescendant<RadioPrimitive>().BackColor = Color.Red;
     
    this.radRadioButton2.ButtonElement.CheckMarkPrimitive.Shape = new StarShape();
    this.radRadioButton2.ButtonElement.CheckMarkPrimitive.FindDescendant<RadioPrimitive>().NumberOfColors = 1;
    this.radRadioButton2.ButtonElement.CheckMarkPrimitive.FindDescendant<RadioPrimitive>().BackColor = Color.Orange;

    If you would prefer to use images you can achieve it this way: 
    this.radRadioButton1.ButtonElement.CheckMarkPrimitive.Shape = null;
    this.radRadioButton1.ButtonElement.CheckMarkPrimitive.Image = Image.FromFile(@"..\..\star.png");
    this.radRadioButton1.ButtonElement.CheckMarkPrimitive.FindDescendant<ImagePrimitive>().ShouldPaint = false;

    Please also note that with the approach using images you will also need to manually handle the image for the Checked toggle state. A suitable place to do this is the handler of the ToggleStateChanged event.

    I hope this helps. Let me know if you need further assistance.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Damien
    Damien avatar
    65 posts
    Member since:
    Oct 2017

    Posted 02 Jan in reply to Hristo Link to this post

    I have no problem using the standard shapes, but they are too small (see the attached image - left is original and right Telerik). Can the shapes be larger?

    I tried using my own png file from the Resources and it shows a square with the star shape in it, not just the star image itself. Maybe I did something wrong??

    thanks.

  7. Damien
    Damien avatar
    65 posts
    Member since:
    Oct 2017

    Posted 02 Jan Link to this post

    Sorry forgot to attach the image.
  8.
  9. Hristo
    Admin
    Hristo avatar
    1325 posts

    Posted 03 Jan Link to this post

    Hi Damien,

    Thank you for writing back.

    The standard star shape is predefined and it cannot be altered. If you are to use the shapes you can consider creating your own shape using the Shape Editor tool: https://docs.telerik.com/devtools/winforms/tools/shapeeditor/shapeeditor. 

    If you decide to go with the images you can set the DrawBorder property of the RadRadioMark to false. Please check my code snippet below: 
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
     
            this.radRadioButton1.ButtonElement.CheckMarkPrimitive.Shape = null;
            this.radRadioButton1.ButtonElement.CheckMarkPrimitive.DrawBorder = false;
            this.radRadioButton1.ButtonElement.CheckMarkPrimitive.Image = Image.FromFile(@"..\..\star.png");
            this.radRadioButton1.ButtonElement.CheckMarkPrimitive.FindDescendant<ImagePrimitive>().ShouldPaint = false;
     
            this.radRadioButton1.ToggleStateChanged += RadRadioButton1_ToggleStateChanged;
        }
     
        private void RadRadioButton1_ToggleStateChanged(object sender, StateChangedEventArgs args)
        {
            if (this.radRadioButton1.CheckState == CheckState.Checked)
            {
                this.radRadioButton1.ButtonElement.CheckMarkPrimitive.Image = Image.FromFile(@"..\..\star.png");
            }
            else
            {
                this.radRadioButton1.ButtonElement.CheckMarkPrimitive.Image = Image.FromFile(@"..\..\star-default.png");
            }
        }
    }

    I am also attaching a short video showing the result on my end.

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

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top