Custom Images for RadioButton

[Damien]

Hi

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

 

thanks in advance.

[Hristo]

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

[Damien]

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.

[Damien]

Sorry forgot to attach the image.

[Hristo]

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