Jebarson's dev blog

Coffee, Code

Radio Button List Box With Seperate Group Name in Silverlight

I am developing a windows phone application and came across a situation where I needed mulitple radio button list box binding different values of same type. When I went for a control template as below, everything went just fine except that I ended up having the group name which means that doesn’t matter I have 5 list box with radio buttons, I can select only one button.

<Style x:Key="RadioListItem" TargetType="ListBoxItem">
     <Setter Property="Template">
          <Setter.Value>
               <ControlTemplate TargetType="ListBoxItem">
                    <RadioButton x:Name="RadioButtonControl" 
                              IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}" 
                              DataContext="{TemplateBinding IsSelected}" Content="{TemplateBinding Content}" />
               </ControlTemplate>
          </Setter.Value>
     </Setter>
&lt/Style>

I implemented the template to the listbox as below.

<ListBox x:Name="SizeFilter" SelectedItem="{Binding Size, Mode=TwoWay}" 
          ItemContainerStyle="{StaticResource  RadioListItem}" />

So after getting cornored by different problem like that I will not be able to use AncestorType or use a data template, I was stuck up here for a long time. I could have done a workaround by writing a piece of code on the code behind to set the group name and resolved. But, when it comes to Silverlight / WPF, I would love to solve everything right in the XAML itself.

Well as in my olden times of VB6, I thought what is “Tag” for; if it can’t help me here. So I changed my solution to pass GroupName as a tag from my ListBox to the template. And below is how I accompolised.

<Style x:Key="RadioListItem" TargetType="ListBoxItem">
     <Setter Property="Template">
          <Setter.Value>
               <ControlTemplate TargetType="ListBoxItem">
                    <RadioButton x:Name="RadioButtonControl" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected, Mode=TwoWay}" 
                                     DataContext="{TemplateBinding IsSelected}" Content="{TemplateBinding Content}"
                                     GroupName="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}" />
               </ControlTemplate>
          </Setter.Value>
      </Setter>
&lt/Style>

And here goes my ListBox.

<ListBox x:Name="SizeFilter" SelectedItem="{Binding Size, Mode=TwoWay}" >
     <ListBox.ItemContainerStyle>
          <Style BasedOn="{StaticResource RadioListItem}" TargetType="ListBoxItem" >
               <Setter Property="Tag" Value="SizeFilterGroup" />
          </Style>
      </ListBox.ItemContainerStyle>
&lt/ListBox>

As I mentioned I am using the Tag property of the ItemContainer to pass the “GroupName” to the control template. So now all is fine and I can use the same template for multiple list box with different groups. And now I can select 5 radio buttons according to their list.

Radio Button List Box With Seperate Group Name in Silverlight

One thought on “Radio Button List Box With Seperate Group Name in Silverlight

Leave a Reply

Scroll to top