How to change checkbox size and image.

[Bekir]

Hello,
Is there a way to change checkbox size? I want to make it bigger for touch screen devices.

[Hristo]

Hello Bekir,

Thank you for writing.

The easiest way would be to add an image with the check mark set it as value of the Image of the RadCheckmark element. Since the check box is going to become bigger you should also set bigger ItemSpacing between the ListViewDataItem elements. The best place to set the image as background is in the handler of the VisualItemFormatting event Please see my code snippet below:

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        this.radListView1.ViewType = ListViewType.DetailsView;
        this.radListView1.ShowCheckBoxes = true;
        this.radListView1.ListViewElement.ItemSpacing = 10;
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        this.productsTableAdapter.Fill(this.nwindDataSet.Products);
    }

    private void radListView1_VisualItemFormatting(object sender, Telerik.WinControls.UI.ListViewVisualItemEventArgs e)
    {
        BaseListViewVisualItem listItem = e.VisualItem as BaseListViewVisualItem;
        listItem.Margin = new Padding(0, 15, 0, 0);
        ListViewItemCheckbox itemCheckbox = listItem.Children.FirstOrDefault() as ListViewItemCheckbox;
        CheckBoxLayoutPanel checkBoxPanel = itemCheckbox.Children[1] as CheckBoxLayoutPanel;
        RadCheckmark checkMark = checkBoxPanel.Children[1] as RadCheckmark;
        checkMark.Image = Properties.Resources.checkmarkPNG;
        checkMark.CheckElement.Opacity = 0;
    }
}

I am also sending you a screenshot of the result on my side.

I hope this information helps. Should you have further questions please do no hesitate to write back.

Regards,
Hristo Merdjanov
Telerik

 

 

[Bekir]

Hello Hristo,
Thank you for your response.
It worked.
Best regards...

[OD]

Your solution do the trick, but only if the entire list is shown.

Bad behavior if you scroll, or if we don't see the whole list, see attached file.

[Hristo]

Hi,

Thank you for writing.

I managed to reproduce the unwanted behavior when the control is set in DetailsView. It appears to be caused by insufficient space for the bottom items. Since you would be using a larger check box, please set a greater item size and remove the padding from the VisualitemFormatting handler.

this.radListView1.ItemSize = new Size(250, 40);

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

Regards,
Hristo Merdjanov
Telerik

[OD]

Thanks a lot, that works :)