Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / WPF

RadioListBox: A ListBox with Radio Buttons (WPF Version)

Rate me:
Please Sign up or sign in to vote.
4.64/5 (7 votes)
6 Sep 2009CPOL2 min read 128.9K   4.1K   23   30
How to implement a templated ListBox with radio buttons instead of the standard selection highlight.

RadioListBoxWPF_Source

RadioListBoxWPF_Source

Introduction

This is the WPF version of my previous articles: CRadioListBox: A ListBox with Radio Buttons (MFC Version) and RadioListBox: A ListBox with Radio Buttons (WinForms Version). As explained in those articles, RadioListBox has the same functionalities as a regular ListBox, but with a different look and feel. Anyway, the RadioListBox control offers 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.xaml and RadioListBox.xaml.cs into your project.
  • Drop a RadioListBox object into your XAML form, or do it by hand. An alias for the System.Windows.Controls.Custom namespace will be useful.
  • Change the standard properties of the control, just like for a ListBox.
  • Use the IsTransparent property to mimic a group of RadioButtons.

That's all! Now you can use the radio button collection as a regular ListBox. You can add items with the Items.Add() method, the ItemsSource property, or directly into XAML. Finally, query for user selection with the SelectedIndex property. No more one-by-one evaluations.

RadioListBox Internals

The RadioListBox class is derived from WPF's ListBox class with a custom ControlTemplate to remove all undesired ListBox functionalities like selected item's background. To be consistent with the radio button model, multiple selection has been disabled. The resumed XAML implementation is the following:

XML
<ListBox x:Class="System.Windows.Controls.Custom.RadioListBox"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:s="clr-namespace:System;assembly=mscorlib" >
    <ListBox.Resources>
        <Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <RadioButton x:Name="radio" Click="ItemRadioClick">
                            <RadioButton.Content>
                                <ContentPresenter ... />
                            </RadioButton.Content>
                        </RadioButton>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.Resources>
    <ListBox.Template>
        <ControlTemplate>
            <Border BorderThickness="0" 
                  Padding="1,1,1,1" 
                  Background="Transparent" 
                  Name="theBorder" 
                  SnapsToDevicePixels="True">
                <ScrollViewer Padding="{TemplateBinding Control.Padding}" 
                              Focusable="False">
                  <ItemsPresenter 
                      SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
                </ScrollViewer>
            </Border>
            <ControlTemplate.Triggers ... />
        </ControlTemplate>
    </ListBox.Template>
</ListBox>

As the radio buttons inside the ControlTemplate don't change the selection, this has to be done manually inside the ItemRadioClick event. Here, the ItemContainerGenerator property has an important role by converting between the ListBox's items contents and the ListBoxItem presentation object. Here is a summarized C# source code:

C#
namespace System.Windows.Controls.Custom
{
    public partial class RadioListBox : ListBox
    {
        public RadioListBox() { ... }

        public new SelectionMode SelectionMode { ... }

        public bool IsTransparent { ... }

        private void ItemRadioClick(object sender, RoutedEventArgs e)
        {
            ListBoxItem sel = (e.Source as RadioButton).TemplatedParent as ListBoxItem;
            int newIndex = this.ItemContainerGenerator.IndexFromContainer(sel); ;
            this.SelectedIndex = newIndex;
        }

        protected override void OnSelectionChanged(SelectionChangedEventArgs e)
        {
            base.OnSelectionChanged(e);

            CheckRadioButtons(e.RemovedItems, false);
            CheckRadioButtons(e.AddedItems, true);
        }

        private void CheckRadioButtons(System.Collections.IList radioButtons, bool isChecked) 
        {
            foreach (object item in radioButtons)
            {
                ListBoxItem lbi = 
                  this.ItemContainerGenerator.ContainerFromItem(item) as ListBoxItem;

                if (lbi != null)
                {
                    RadioButton radio = lbi.Template.FindName("radio", lbi) as RadioButton;
                    if (radio != null)
                        radio.IsChecked = isChecked;
                }
            }
        }
    }
}

History

  • September 6th, 2009: First version.

License

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


Written By
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.

Comments and Discussions

 
QuestionChange Radio button Style Pin
Supa Spark Wang24-Nov-15 23:45
Supa Spark Wang24-Nov-15 23:45 
QuestionBy Default First RadioButton Selected? Pin
Member 1121301011-Mar-15 3:52
Member 1121301011-Mar-15 3:52 
AnswerRe: By Default First RadioButton Selected? Pin
Jaime Olivares13-Jul-15 13:59
Jaime Olivares13-Jul-15 13:59 
QuestionException Occurred while Binding Pin
MAQAH29-May-14 21:04
MAQAH29-May-14 21:04 
AnswerRe: Exception Occurred while Binding Pin
MAQAH4-Jun-14 19:25
MAQAH4-Jun-14 19:25 
GeneralMy vote of 5 Pin
Shailesh vora30-Sep-12 0:19
Shailesh vora30-Sep-12 0:19 
GeneralBind a DataTable Pin
MCTimotheus4-Feb-10 1:48
MCTimotheus4-Feb-10 1:48 
GeneralRe: Bind a DataTable Pin
Jaime Olivares7-Feb-10 18:03
Jaime Olivares7-Feb-10 18:03 
GeneralRe: Bind a DataTable Pin
MCTimotheus7-Feb-10 20:36
MCTimotheus7-Feb-10 20:36 
Generala loop "for" Pin
peug30-Jan-10 6:23
peug30-Jan-10 6:23 
GeneralRe: a loop "for" Pin
Jaime Olivares31-Jan-10 6:25
Jaime Olivares31-Jan-10 6:25 
JokeRe: a loop "for" Pin
peug31-Jan-10 6:27
peug31-Jan-10 6:27 
GeneralListBox with checkbox Pin
peug29-Jan-10 2:03
peug29-Jan-10 2:03 
GeneralRe: ListBox with checkbox Pin
Jaime Olivares31-Jan-10 6:30
Jaime Olivares31-Jan-10 6:30 
QuestionSpace between radio Pin
peug29-Jan-10 0:09
peug29-Jan-10 0:09 
AnswerRe: Space between radio Pin
peug31-Jan-10 6:28
peug31-Jan-10 6:28 
GeneralRe: Space between radio Pin
Jaime Olivares31-Jan-10 6:32
Jaime Olivares31-Jan-10 6:32 
GeneralBug Pin
naish_kewl30-Nov-09 14:41
naish_kewl30-Nov-09 14:41 
GeneralRe: Bug Pin
Jaime Olivares1-Dec-09 2:20
Jaime Olivares1-Dec-09 2:20 
GeneralRe: Bug Pin
naish_kewl3-Feb-10 11:51
naish_kewl3-Feb-10 11:51 
GeneralRe: Bug Pin
Jaime Olivares7-Feb-10 18:25
Jaime Olivares7-Feb-10 18:25 
GeneralRe: Bug Pin
naish_kewl8-Feb-10 12:07
naish_kewl8-Feb-10 12:07 
GeneralRe: Bug Pin
Jaime Olivares8-Feb-10 12:14
Jaime Olivares8-Feb-10 12:14 
GeneralRe: Bug Pin
Member 83632665-Apr-12 10:25
Member 83632665-Apr-12 10:25 
General"Checking" in XAML is better Pin
Guillaume Leparmentier6-Sep-09 13:57
Guillaume Leparmentier6-Sep-09 13:57 

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.