Click here to Skip to main content
12,451,243 members (53,305 online)
Click here to Skip to main content
Add your own
alternative version

Stats

178.7K views
5.8K downloads
108 bookmarked
Posted

RadioListBox: A ListBox with Radio Buttons (Winforms version)

, 3 Sep 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
How to implement an owner-drawn ListBox with radio buttons instead of standard selection highlight
Screenshot - Screenshot_1.jpg

Screenshot - Screenshot_2.jpg

Introduction

This is the .NET version of my previous MFC article, CRadioListBox: A ListBox with Radio Buttons. A couple of years ago, I discussed in a Visual C++ forum about a member's request to implement a custom ListBox control similar to MFC's CCheckListBox, but with radio buttons. Initially it appeared to be trivial, since the ListBox control's unique selection version complies with the requirements, but I have concluded that this control has some advantages:

  • It is clearer that options are mutually exclusive with radio buttons.
  • It is a good alternative to a group of radio buttons because you have to maintain just one control, less memory use.
  • It inherits some useful features like scrolling, sorting, data binding and multi-column.
  • It will be easier to change options dynamically, as shown in the demo application.
  • It will be easier to manage selection events, also shown in the demo application.

Using the Code

To implement RadioListBox into your project, you just need to do a few steps:

  • Include RadioListBox.cs into your project.
  • Drop a RadioListBox object into your form.
  • Change the standard properties of the control, just like a ListBox.
  • Countersense to standard ListBox, transparent BackColor property is allowed.

That's all! Now you can use the radio button collection as a regular ListBox. You can add items with the Items.Add() method and query for user selection with the SelectedIndex property.

Fake Transparency

Some .NET controls accept a transparent color as a BackColor property, but ListBox is not one of them. So, transparency requires lots of non-managed tricks. However, transparency is a key feature needed for this control to be useful. It allows the control to acquire a real radio button look and feel, as you can see in the screenshot above. I decided to stay in the managed world by providing fake transparency to the control by overriding the BackColor property to accept it, and saving its own background color brush. When setting the background color to transparent, the control will mimic the parent form or control, even if the form has a non-standard background color.

RadioListBox Internals

The RadioListBox class is derived from Windows Forms' ListBox class with the owner-draw feature. The resumed class definition is the following:

using System.ComponentModel;
using System.Drawing;
using System.Windows.Forms.VisualStyles;

namespace System.Windows.Forms
{
    public class RadioListBox : ListBox
    {
        private StringFormat Align;
        private bool IsTransparent = false;  // Handles the transparent state
        private Brush BackBrush;  // Manages its own background brush

        // Allows the BackColor to be transparent
        public override Color BackColor ...

        // Hides these properties in the designer
        [Browsable(false)]
        public override DrawMode DrawMode ...

        [Browsable(false)]
        public override SelectionMode SelectionMode ...

        // Public constructor
        public RadioListBox() ...

        // Main painting method
        protected override void OnDrawItem(DrawItemEventArgs e) ...

        // Prevent background erasing
        protected override void DefWndProc(ref Message m) ...

        // Other event handlers
        protected override void OnHandleCreated(EventArgs e) ...
        protected override void OnFontChanged(EventArgs e) ...
        protected override void OnParentChanged(EventArgs e) ...
        protected override void OnParentBackColorChanged(EventArgs e) ...
    }
}

The core enhancement is at the OnDrawItem() method. The method does not highlight the selected item as in a standard ListBox control, but draws a radio button instead. It also manages the focus state to draw the focus rectangle properly and the background color according to the transparency attribute. Here is the C# source code:

// Main painting method
protected override void OnDrawItem(DrawItemEventArgs e)
{
    int maxItem = this.Items.Count - 1;

    if (e.Index < 0 || e.Index > maxItem)
    {
        // Erase all background if control has no items
        e.Graphics.FillRectangle(BackBrush, this.ClientRectangle);
        return;
    }

    int size = e.Font.Height; // button size depends on font height, not on item height

    // Calculate bounds for background, if last item paint up to bottom of control
    Rectangle backRect = e.Bounds;
    if (e.Index == maxItem)
        backRect.Height = this.ClientRectangle.Top + 
        this.ClientRectangle.Height - e.Bounds.Top;
    e.Graphics.FillRectangle(BackBrush, backRect);

    // Determines text color/brush
    Brush textBrush;
    bool isChecked = (e.State & DrawItemState.Selected) == DrawItemState.Selected;

    RadioButtonState state = isChecked ? 
        RadioButtonState.CheckedNormal : RadioButtonState.UncheckedNormal;
    if ((e.State & DrawItemState.Disabled) == DrawItemState.Disabled)
    {
        textBrush = SystemBrushes.GrayText;
        state = isChecked ? RadioButtonState.CheckedDisabled : 
                RadioButtonState.UncheckedDisabled;
    }
    else if ((e.State & DrawItemState.Grayed) == DrawItemState.Grayed)
    {
        textBrush = SystemBrushes.GrayText;
        state = isChecked ? RadioButtonState.CheckedDisabled : 
                RadioButtonState.UncheckedDisabled;
    }
    else
    {
        textBrush = SystemBrushes.FromSystemColor(this.ForeColor);
    }

    // Determines bounds for text and radio button
    Size glyphSize = RadioButtonRenderer.GetGlyphSize(e.Graphics, state);
    Point glyphLocation = e.Bounds.Location;
    glyphLocation.Y += (e.Bounds.Height - glyphSize.Height) / 2;

    Rectangle bounds = new Rectangle(e.Bounds.X + glyphSize.Width, e.Bounds.Y, 
        e.Bounds.Width - glyphSize.Width, e.Bounds.Height);

    // Draws the radio button
    RadioButtonRenderer.DrawRadioButton(e.Graphics, glyphLocation, state);

    // Draws the text
    // Bound Datatable? Then show the column written in Displaymember   
    if (!string.IsNullOrEmpty(DisplayMember)) 

        e.Graphics.DrawString(((System.Data.DataRowView)this.Items[e.Index])
            [this.DisplayMember].ToString(),
        e.Font, textBrush, bounds, this.Align);
    else
        e.Graphics.DrawString(this.Items[e.Index].ToString(), 
            e.Font, textBrush, bounds, this.Align);

    // If the ListBox has focus, draw a focus rectangle around the selected item.
    e.DrawFocusRectangle();
}

History

  • 23rd April, 2007: First version
  • 14th September, 2007: Refinements in control rendering (thanks to stephpms); support for bounded data (thanks to PeterDP)
  • 1st September, 2008: Improved background painting; support for large fonts (thanks to rkousha)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jaime Olivares
Architect
Peru Peru


Computer Electronics professional, Software Architect and senior Windows C++ and C# developer with experience in many other programming languages, platforms and application areas including communications, simulation systems, PACS/DICOM (radiology), GIS, 3D graphics and HTML5-based web applications.
Currently intensively working with Visual Studio and TFS.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionNo Horizontal ScrollBar provision Pin
niharikaGangula10-Oct-14 2:47
memberniharikaGangula10-Oct-14 2:47 
QuestionInlucde RadioList in VB2005 Project Pin
Member 941474318-Dec-13 22:12
memberMember 941474318-Dec-13 22:12 
AnswerRe: Inlucde RadioList in VB2005 Project Pin
Jaime Olivares27-Dec-13 16:38
memberJaime Olivares27-Dec-13 16:38 
QuestionLittle note Pin
Adam Zgagacz14-Oct-13 4:22
memberAdam Zgagacz14-Oct-13 4:22 
QuestionHow To Display Horizontal Value Pin
NCCA4-Apr-13 2:12
memberNCCA4-Apr-13 2:12 
Thank for Post

this one is very useful for me and i need one help from you.

i m use this code list box is display the list vertical but i need to display horizontal.

please reply me if ..
GeneralMy vote of 5 Pin
Kanasz Robert27-Sep-12 11:06
mvpKanasz Robert27-Sep-12 11:06 
GeneralMy vote of 5 Pin
Richard MacCutchan27-Feb-11 1:40
mvpRichard MacCutchan27-Feb-11 1:40 
GeneralMy vote of 5 Pin
UngaMan11-Feb-11 10:41
memberUngaMan11-Feb-11 10:41 
GeneralMy vote of 3 Pin
Biyuk Sadeghi Lahijan15-Dec-10 6:25
memberBiyuk Sadeghi Lahijan15-Dec-10 6:25 
GeneralMy vote of 5 Pin
smercado21-Oct-10 2:42
membersmercado21-Oct-10 2:42 
GeneralThanks Pin
Parveen_Basha20-Jun-10 23:17
memberParveen_Basha20-Jun-10 23:17 
GeneralFor Binding Pin
chetverg22-Dec-08 0:27
memberchetverg22-Dec-08 0:27 
QuestionHow binds List<entitystate> to RadioButtonList</entitystate> Pin
Web Star17-Apr-08 20:39
memberWeb Star17-Apr-08 20:39 
AnswerRe: How binds List to RadioButtonList Pin
Jaime Olivares18-Apr-08 6:51
memberJaime Olivares18-Apr-08 6:51 
QuestionIt would be cool to support fade-in & fade-out while mouse hovering, just like common controls on vista. Pin
Member 162239721-Dec-07 8:05
memberMember 162239721-Dec-07 8:05 
QuestionIt would be cool to support fade-in & fade-out while mouse hovering, just like common controls on vista. Pin
Member 162239721-Dec-07 8:05
memberMember 162239721-Dec-07 8:05 
GeneralRe: It would be cool to support fade-in & fade-out while mouse hovering, just like common controls on vista. Pin
Jaime Olivares22-Jan-08 6:24
memberJaime Olivares22-Jan-08 6:24 
Generalplz help!!! Pin
silver_fish13-Nov-07 7:20
membersilver_fish13-Nov-07 7:20 
GeneralRe: plz help!!! Pin
Ri Qen-Sin13-Nov-07 7:48
memberRi Qen-Sin13-Nov-07 7:48 
Generalthanks Pin
k_hammami200530-Sep-07 22:16
memberk_hammami200530-Sep-07 22:16 
GeneralProblem with radio control Font change Pin
rkousha23-Sep-07 0:27
memberrkousha23-Sep-07 0:27 
AnswerRe: Problem with radio control Font change Pin
Jaime Olivares1-Oct-07 8:22
memberJaime Olivares1-Oct-07 8:22 
GeneralThanks Pin
shri_khamitkar9-Jul-07 20:50
membershri_khamitkar9-Jul-07 20:50 
GeneralDisplaying the displaymember Pin
PeterDP3-Jul-07 6:26
memberPeterDP3-Jul-07 6:26 
GeneralRe: Displaying the displaymember Pin
PeterDP3-Jul-07 22:06
memberPeterDP3-Jul-07 22:06 
GeneralUse new radioButton style... Pin
stephpms25-Jun-07 22:53
memberstephpms25-Jun-07 22:53 
GeneralThe Look Pin
DEGT1-Jun-07 7:07
memberDEGT1-Jun-07 7:07 
AnswerRe: The Look Pin
Jaime Olivares10-Jun-07 16:16
memberJaime Olivares10-Jun-07 16:16 
GeneralRe: The Look Pin
DEGT10-Jun-07 22:53
memberDEGT10-Jun-07 22:53 
GeneralTrouble with implementing Pin
Oldek26-May-07 5:17
memberOldek26-May-07 5:17 
GeneralClass not public Pin
Rudolf Jan Heijink5-May-07 4:02
memberRudolf Jan Heijink5-May-07 4:02 
GeneralRe: Class not public Pin
Jaime Olivares5-May-07 17:19
memberJaime Olivares5-May-07 17:19 
QuestionHow can I make this list a MultiColumnList??? Pin
hamidhussain1-May-07 21:38
memberhamidhussain1-May-07 21:38 
AnswerRe: How can I make this list a MultiColumnList??? Pin
Jaime Olivares2-May-07 7:20
memberJaime Olivares2-May-07 7:20 
AnswerRe: How can I make this list a MultiColumnList??? Pin
Jaime Olivares5-May-07 17:12
memberJaime Olivares5-May-07 17:12 
AnswerRe: How can I make this list a MultiColumnList??? Pin
lehoangtrung10-May-07 3:10
memberlehoangtrung10-May-07 3:10 
AnswerRe: How can I make this list a MultiColumnList??? Pin
Jaime Olivares14-May-07 8:58
memberJaime Olivares14-May-07 8:58 
GeneralRe: How can I make this list a MultiColumnList??? Pin
sk28027-Apr-10 19:47
membersk28027-Apr-10 19:47 
QuestionThis is the .net version of my previous MFC article?? Pin
Nirosh23-Apr-07 22:42
memberNirosh23-Apr-07 22:42 
AnswerRe: This is the .net version of my previous MFC article?? PinPopular
Jaime Olivares24-Apr-07 11:53
memberJaime Olivares24-Apr-07 11:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160826.1 | Last Updated 3 Sep 2008
Article Copyright 2007 by Jaime Olivares
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid