How to change checkbox size and image.

6 posts, 0 answers
  1. Bekir
    Bekir avatar
    16 posts
    Member since:
    Sep 2010

    Posted 06 Feb 2015 Link to this post

    Hello,
    Is there a way to change checkbox size? I want to make it bigger for touch screen devices.
  2. Hristo
    Admin
    Hristo avatar
    716 posts

    Posted 09 Feb 2015 Link to this post

    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
     

    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. UI for WinForms is Visual Studio 2017 Ready
  4. Bekir
    Bekir avatar
    16 posts
    Member since:
    Sep 2010

    Posted 09 Feb 2015 in reply to Hristo Link to this post

    Hello Hristo,
    Thank you for your response.
    It worked.
    Best regards...
  5. QuizzBox
    QuizzBox avatar
    46 posts
    Member since:
    Jan 2011

    Posted 08 Mar Link to this post

    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.

  6. Hristo
    Admin
    Hristo avatar
    716 posts

    Posted 08 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. QuizzBox
    QuizzBox avatar
    46 posts
    Member since:
    Jan 2011

    Posted 09 Mar in reply to Hristo Link to this post

    Thanks a lot, that works :)
Back to Top
UI for WinForms is Visual Studio 2017 Ready