RadioButtonListBox using the ListBox control in Silverlight

You always hear of Win and Web Forms developers complaining about the lack of controls in WPF and Silverlight. This can be attributed to the CISC vs. RISC paradigm shift of WPF.

Simply by using this as the ItemContainerStyle of a ListBox your ListBox will magically turn into a RadioButtonListBox.

The style provided by the ItemContainerStyle property is used by the ListBox when it is generating ListBox containers for each of its items. By putting a Content Presenter inside of a RadioButton we are allowing the contents of the ItemTemplate to be rendered inside of the RadioButton.

<Style x:Key="RadioButtonListItemStyle" TargetType="ListBoxItem">
    <Setter Property="Padding" Value="3"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="ListBoxItem">
          <Grid Background="{TemplateBinding Background}">
            <vsm:VisualStateManager.VisualStateGroups>
              <vsm:VisualStateGroup x:Name="CommonStates">
                <vsm:VisualState x:Name="Normal"/>
                <vsm:VisualState x:Name="MouseOver">
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
                      <SplineDoubleKeyFrame KeyTime="0" Value=".35"/>
                    </DoubleAnimationUsingKeyFrames>
                  </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Disabled">
                  <Storyboard d:ShouldSerialize="False"/>
                </vsm:VisualState>
              </vsm:VisualStateGroup>
              <vsm:VisualStateGroup x:Name="SelectionStates">
                <vsm:VisualState x:Name="Unselected">
                  <Storyboard>
                  </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Selected">
                  <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
                      <SplineDoubleKeyFrame KeyTime="0" Value=".75"/>
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="radioButton" Storyboard.TargetProperty="(ToggleButton.IsChecked)">
                      <DiscreteObjectKeyFrame KeyTime="00:00:00">
                        <DiscreteObjectKeyFrame.Value>
                          <System:Boolean>True</System:Boolean>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="SelectedUnfocused">
                  <Storyboard>
                  </Storyboard>
                </vsm:VisualState>
              </vsm:VisualStateGroup>
              <vsm:VisualStateGroup x:Name="FocusStates">
                <vsm:VisualState x:Name="Focused">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0">
                        <DiscreteObjectKeyFrame.Value>
                          <Visibility>Visible</Visibility>
                        </DiscreteObjectKeyFrame.Value>
                      </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Unfocused"/>
              </vsm:VisualStateGroup>
            </vsm:VisualStateManager.VisualStateGroups>
            <Rectangle x:Name="fillColor" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
            <Rectangle x:Name="fillColor2" Fill="#FFBADDE9" RadiusX="1" RadiusY="1" IsHitTestVisible="False" Opacity="0"/>
            <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1" Visibility="Collapsed"/>
            <RadioButton
                IsHitTestVisible="False"
                IsChecked="{TemplateBinding IsSelected}"
                Margin="0,0,0,0"
                VerticalAlignment="Center"
                d:LayoutOverrides="Width">
              <ContentPresenter />
            </RadioButton>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s