Data bound radio button list in WPF Data bound radio button list in WPF wpf wpf

Data bound radio button list in WPF


Basically, after reviewing the google results, I started with the info from an MSDN discussion thread where Dr. WPF provided an answer, which talks about styling a ListBox to look right. However, when the listbox is disabled, the background was an annoying color that I couldn't get rid of for the life of me, until I read the MSDN example of the ListBox ControlTemplate, which shows the secret Border element that was kicking my background butt.

So, the final answer here was this style:

<Style x:Key="RadioButtonList" TargetType="{x:Type ListBox}">    <!-- ControlTemplate taken from MSDN http://msdn.microsoft.com/en-us/library/ms754242.aspx -->    <Setter Property="SnapsToDevicePixels" Value="true"/>    <Setter Property="OverridesDefaultStyle" Value="true"/>    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>    <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>    <Setter Property="MinWidth" Value="120"/>    <Setter Property="MinHeight" Value="95"/>    <Setter Property="Template">        <Setter.Value>            <ControlTemplate TargetType="ListBox">                <Border Name="Border" Background="Transparent"                        BorderBrush="Transparent"                        BorderThickness="0"                        CornerRadius="2">                    <ScrollViewer Margin="0" Focusable="false">                        <StackPanel Margin="2" IsItemsHost="True" />                    </ScrollViewer>                </Border>                <ControlTemplate.Triggers>                    <Trigger Property="IsEnabled" Value="false">                        <Setter TargetName="Border" Property="Background"                                Value="Transparent" />                        <Setter TargetName="Border" Property="BorderBrush"                                Value="Transparent" />                    </Trigger>                    <Trigger Property="IsGrouping" Value="true">                        <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>                    </Trigger>                </ControlTemplate.Triggers>            </ControlTemplate>        </Setter.Value>    </Setter>    <Setter Property="ItemContainerStyle">        <Setter.Value>            <Style TargetType="{x:Type ListBoxItem}" >                <Setter Property="Margin" Value="2" />                <Setter Property="Template">                    <Setter.Value>                        <ControlTemplate TargetType="{x:Type ListBoxItem}">                            <Border Name="theBorder" Background="Transparent">                                <RadioButton Focusable="False" IsHitTestVisible="False"                                             IsChecked="{TemplateBinding IsSelected}">                                    <ContentPresenter />                                </RadioButton>                            </Border>                        </ControlTemplate>                    </Setter.Value>                </Setter>            </Style>        </Setter.Value>    </Setter></Style>

Which provides a ControlTemplate for, and styles, the ListBox and the Items. And it gets used like this:

<ListBox Grid.Column="1" Grid.Row="0" x:Name="TurnChargeBasedOnSelector" Background="Transparent"    IsEnabled="{Binding Path=IsEditing}"    Style="{StaticResource RadioButtonList}"    ItemsSource="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:MainForm}}, Path=DataContext.RampTurnsBasedOnList}"    DisplayMemberPath="Description" SelectedValuePath="RampTurnsBasedOnID"    SelectedValue="{Binding Path=RampTurnsBasedOnID, NotifyOnValidationError=True, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True, ValidatesOnExceptions=True}"/>

The more I spend time with WPF, the more I think it makes the trivial insanely difficult and the insanely difficult trivial. Enjoy. -Scott


Bind the listbox to the ItemsSource of a ListBox with a list of objects that have a property Name (this can change)

<ListBox Name="RadioButtonList">   <ListBox.ItemTemplate >        <DataTemplate >             <RadioButton GroupName="radioList" Tag="{Binding}" Content="{Binding Name}"/>         </DataTemplate>                                                    </ListBox.ItemTemplate>                                                </ListBox>

important GroupName="radioList"


Super Simple, MVVM friendly, leveraging DataTemplates for types.XAML:

<Window x:Class="WpfApplication1.MainWindow"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="clr-namespace:WpfApplication1"    Title="MainWindow" Height="350" Width="525"><Window.Resources>    <DataTemplate DataType="{x:Type local:Option}">        <RadioButton Focusable="False"                IsHitTestVisible="False"                Content="{Binding Display}"                IsChecked="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListBoxItem}}">        </RadioButton>    </DataTemplate></Window.Resources><Grid>    <ListBox ItemsSource="{Binding Options}" SelectedItem="{Binding SelectedOption}"/></Grid>

View Model, etc:

public partial class MainWindow : Window{    public MainWindow()    {        InitializeComponent();        this.DataContext = new Vm();    }}public class Vm{    public Option[] Options { get { return new Option[] {         new Option() { Display = "A" },         new Option() { Display = "B" },         new Option() { Display = "C" } }; } }    public Option SelectedOption { get; set; }}public class Option{    public string Display { get; set; }}

If you wrap your option into a specific type (or likely it is already). You can just set a DataTemplate for that type, WPF will automatically use it. (Define DataTemplate in ListBox resources to limit the scope of where the DataTemplate will be applied).

Also use group name in the DataTemplate to set the group if you want.

This is much simpler than changing the control template, however it does mean that you get a blue line on selected items. (Again, nothing a bit of styling can't fix).

WPF is simple when you know how.