Creating RadiobuttonList

In Silverlight 3 beta1, RelativeSource and ElementName can be specified on the binding which will enable us to get rid of code. Here is a XAML for the RadiobuttonList using ListBox

 <ListBox ItemContainerStyle=”{StaticResource ListBoxItemStyle}” x:Name=”List1″>

we declare the style like this, style taken from the SDK

changes made – Added the xaml in bold and the original xaml commented in italics

<UserControl.Resources>
        <Style x:Key=”ListBoxItemStyle” TargetType=”ListBoxItem”>
            <Setter Property=”Padding” Value=”3″ />
            <Setter Property=”HorizontalContentAlignment” Value=”Left” />
            <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>
                                            <DoubleAnimation Storyboard.TargetName=”fillColor” Storyboard.TargetProperty=”Opacity” Duration=”0″ To=”.35″/>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name=”SelectionStates”>
                                    <vsm:VisualState x:Name=”Unselected” />
                                    <vsm:VisualState x:Name=”Selected”>
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName=”fillColor2″ Storyboard.TargetProperty=”Opacity” Duration=”0″ To=”.75″/>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name=”FocusStates”>
                                    <vsm:VisualState x:Name=”Focused”>
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName=”FocusVisualElement” Storyboard.TargetProperty=”Visibility” Duration=”0″>
                                                <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” Opacity=”0″ Fill=”#FFBADDE9″ IsHitTestVisible=”False” RadiusX=”1″ RadiusY=”1″/>
                            <Rectangle x:Name=”fillColor2″ Opacity=”0″ Fill=”#FFBADDE9″ IsHitTestVisible=”False” RadiusX=”1″ RadiusY=”1″/>
                            <RadioButton GroupName=”g1″ IsChecked=”{Binding Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}” Content=”{TemplateBinding Content}”/>
                            <!–<ContentPresenter
            x:Name=”contentPresenter”
            Content=”{TemplateBinding Content}”
            ContentTemplate=”{TemplateBinding ContentTemplate}”
            HorizontalAlignment=”Left”
            Margin=”{TemplateBinding Padding}”/>–>
                            <Rectangle x:Name=”FocusVisualElement” Stroke=”#FF45D6FA” StrokeThickness=”1″ Visibility=”Collapsed” RadiusX=”1″ RadiusY=”1″ />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>