During the process of writing a WPF application recently, I had the need for a data bound list of items where the options had to be mutually exclusive, so I figured something like a list of RadioButtons would be in order.
However, when I started looking around I could not find a RadioButtonList or anything that fitted the bill out-of-the-box. Therefore, I thought I’d put something together myself; I also needed to have the list render horizontally rather than vertically. This is what I came up with:
<!-- Item Style for the ListBoxItem to add a RadioButton -->
<Style x:Key="RadioButtonItemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Margin" Value="0,0,5,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border BorderThickness="0" Background="Transparent">
<!-- Note: IsChecked is bound to IsSelected-->
<RadioButton
Focusable="False"
IsHitTestVisible="False"
IsChecked="{TemplateBinding IsSelected}">
<ContentPresenter />
</RadioButton>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Turns the ListBox in to a Horizontal ListBox -->
<ItemsPanelTemplate x:Key="HorizontalItemsPanel">
<VirtualizingStackPanel
Orientation="Horizontal" />
</ItemsPanelTemplate>
I defined a Style and the ItemsPanelTemplate in the Resources property of my Window that contains all the necessary XAML for the effects I need; note that you could just as easily define this XAML inline on the ListBox as opposed to using the Resources property. I then applied these two new elements to an instance of ListBox using the following mark-up:
<ListBox
BorderThickness="0"
ItemsSource="{Binding MyDataList}"
SelectedValue="{Binding MyDataListSelectedValue}"
ItemContainerStyle="{StaticResource RadioButtonItemStyle}"
ItemsPanel="{StaticResource HorizontalItemsPanel}" />
I’ve highlighted where I’ve used the two resources.
For this example the data list is trivial and is provided by a ViewModel class attached to the DataContext of the Window; I’m only showing the code here as a example of how you can add sample data to an application, as well as proving that the above XAML all works as expected using a bound list of data:
public class MainWindowViewModel
{
public IEnumerable<string> MyDataList
{
get
{
yield return "Stan";
yield return "Cartman";
yield return "Kenny";
yield return "Karl";
}
}
public string MyDataListSelectedValue
{
get { return "Cartman"; }
set { /* TODO: save the value */ }
}
}
<!-- XAML -->
<Window.DataContext>
<vm:MainWindowViewModel />
</Window.DataContext>
Here’s what it all looks like in the Visual Studio designer:
And there we have it, job done. Hope this helps someone, happy XAML hacking.
