Windows Phone development–applying a custom style to change the visual presentation of a radiobutton

Fact: the Metro principles are great and the controls we have available renders with grace and simplicity.

Regardless of all that, there are times when we just want the functionality of a radiobutton list, but the appearance of something completely different. This is where retemplating or applying styles come into play and really makes xaml shine.

in the following example we’re going to turn this..

.. into this..

.. by simply applying a custom style.

so, from the top then, we have a group of radiobuttons..

    <RadioButton x:Name="rbCar" GroupName="one" IsChecked="True">
        Car
    </RadioButton>
    <RadioButton x:Name="rbBike" GroupName="one">
        Motorcycle
    </RadioButton>
    <RadioButton x:Name="rbTruck" GroupName="one">
        Truck
    </RadioButton>
    <RadioButton x:Name="rbWheelchair" GroupName="one">
        Wheelchair
    </RadioButton>

now, we’ll addew n a custom style called “AVeryDifferentRadioButton”..

        <Style x:Key="AVeryDifferentRadioButton" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="RadioButton">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed" />
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="CheckStates">
                                    <VisualState x:Name="Checked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unchecked">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneSubtleBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Indeterminate"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="ContentGrid" Margin="{StaticResource PhoneTouchTargetLargeOverhang}" Width="80">
                                <ContentControl VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" 
                                                x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" 
                                                Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" 
                                                FontFamily="{TemplateBinding FontFamily}" Margin="0" Padding="{TemplateBinding Padding}" />
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

and we’ll use that style and also change the contents to images..

    <RadioButton x:Name="rbCar" GroupName="one" IsChecked="True">
        <Image Source="/Content/images/car.png" />
    </RadioButton>
    <RadioButton x:Name="rbBike" GroupName="one">
        <Image Source="/Content/images/bike.png" />
    </RadioButton>
    <RadioButton x:Name="rbTruck" GroupName="one">
        <Image Source="/Content/images/truck.png" />
    </RadioButton>
    <RadioButton x:Name="rbWheelchair" GroupName="one">
        <Image Source="/Content/images/wheelchairpng" />
    </RadioButton>

and that is it:

Now it renders in quite differently while still giving us the functionality of a traditional radiobutton.