Example Metro app /WinRT: How to change the style of the radiobutton

Got a question on twitter today about hot to change the icon color of the radiobutton, and I thought - why not put an example up on the blog in case others are wondering the same thing :)

If you want to change just the color of the radiobutton icon itself you can change the brushes set for the “BackgroundEllipse” , and if you want to change the checked eclipse brushes, then it is the brushes for the “CheckGlyph” that you want to change.

Here is an example of how to change the background eclipse:

Changing the radiobutton icon in WinRT /Metro app

[sourcecode language=“XML”]

<!-- Non-brush values that vary across themes -->  

<ResourceDictionary.ThemeDictionaries>  
    <ResourceDictionary x:Key="Default">  
        <SolidColorBrush x:Key="RadioButtonBackgroundThemeBrush" Color="Red"></SolidColorBrush>  
        <SolidColorBrush x:Key="RadioButtonPointerOverBackgroundThemeBrush" Color="Green"></SolidColorBrush>  
        <SolidColorBrush x:Key="RadioButtonPressedBackgroundThemeBrush" Color="Yellow"></SolidColorBrush>  
        <SolidColorBrush x:Key="RadioButtonDisabledBackgroundThemeBrush" Color="Blue"></SolidColorBrush>  
    </ResourceDictionary>  
</ResourceDictionary.ThemeDictionaries>  

[/sourcecode]

To get more control you can generate the template for teh radiobuttons like I have shown in this post.

[sourcecode language=“XML”]

<Page.Resources>  
    <Style x:Key="RadioButtonStyle1" TargetType="RadioButton">  
        <Setter Property="Background" Value="Transparent"/>  
        <Setter Property="Foreground" Value="{StaticResource RadioButtonContentForegroundThemeBrush}"/>  
        <Setter Property="Padding" Value="1,4,0,0"/>  
        <Setter Property="HorizontalAlignment" Value="Stretch"/>  
        <Setter Property="VerticalAlignment" Value="Center"/>  
        <Setter Property="HorizontalContentAlignment" Value="Left"/>  
        <Setter Property="VerticalContentAlignment" Value="Top"/>  
        <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>  
        <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>  
        <Setter Property="Template">  
            <Setter.Value>  
                <ControlTemplate TargetType="RadioButton">  
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">  
                        <VisualStateManager.VisualStateGroups>  
                            <VisualStateGroup x:Name="CommonStates">  
                                <VisualState x:Name="Normal"/>  
                                <VisualState x:Name="PointerOver">  
                                    <Storyboard>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonPointerOverBackgroundThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="BackgroundEllipse">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonPointerOverBorderThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonPointerOverForegroundThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                    </Storyboard>  
                                </VisualState>  
                                <VisualState x:Name="Pressed">  
                                    <Storyboard>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonPressedBackgroundThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="BackgroundEllipse">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonPressedBorderThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonPressedForegroundThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                    </Storyboard>  
                                </VisualState>  
                                <VisualState x:Name="Disabled">  
                                    <Storyboard>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BackgroundEllipse">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonDisabledBackgroundThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="BackgroundEllipse">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonDisabledBorderThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonDisabledForegroundThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">  
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadioButtonContentDisabledForegroundThemeBrush}"/>  
                                        </ObjectAnimationUsingKeyFrames>  
                                    </Storyboard>  
                                </VisualState>  
                            </VisualStateGroup>  
                            <VisualStateGroup x:Name="CheckStates">  
                                <VisualState x:Name="Checked">  
                                    <Storyboard>  
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>  
                                    </Storyboard>  
                                </VisualState>  
                                <VisualState x:Name="Unchecked"/>  
                                <VisualState x:Name="Indeterminate"/>  
                            </VisualStateGroup>  
                            <VisualStateGroup x:Name="FocusStates">  
                                <VisualState x:Name="Focused">  
                                    <Storyboard>  
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualWhite"/>  
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualBlack"/>  
                                    </Storyboard>  
                                </VisualState>  
                                <VisualState x:Name="Unfocused"/>  
                                <VisualState x:Name="PointerFocused"/>  
                            </VisualStateGroup>  
                        </VisualStateManager.VisualStateGroups>  
                        <Grid>  
                            <Grid.ColumnDefinitions>  
                                <ColumnDefinition Width="29"/>  
                                <ColumnDefinition Width="\*"/>  
                            </Grid.ColumnDefinitions>  
                            <Ellipse x:Name="BackgroundEllipse" Fill="{StaticResource RadioButtonBackgroundThemeBrush}" Height="23" Margin="3,3,3,3" Stroke="{StaticResource RadioButtonBorderThemeBrush}" StrokeThickness="{StaticResource RadioButtonBorderThemeThickness}" UseLayoutRounding="True" VerticalAlignment="Top" Width="23"/>  
                            <Ellipse x:Name="CheckGlyph" Fill="{StaticResource RadioButtonForegroundThemeBrush}" HorizontalAlignment="Right" Height="13" Margin="0,8,8,0" Opacity="0" VerticalAlignment="Top" Width="13"/>  
                            <Rectangle x:Name="FocusVisualWhite" Height="29" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1" VerticalAlignment="Top" Width="29"/>  
                            <Rectangle x:Name="FocusVisualBlack" Height="29" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1" VerticalAlignment="Top" Width="29"/>  
                            <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>  
                        </Grid>  
                    </Border>  
                </ControlTemplate>  
            </Setter.Value>  
        </Setter>  
    </Style>  
</Page.Resources>  

[/sourcecode]

Comments

Hi Iris,

This is a nice tip, it will be useful. I recently use the toggleswitch to change the entire style of a Windows 8 metro application it could be one of your next articles about styling controls =). 

Thank you! That is a good idea! I'll see if I can find the time and maybe even make a small tutorial :) 

Thanks =) If I have sometime I'll do it my self and I'll share it with you if you want. 

Yeah, absolutely! That would be great! 

How I set the state (Disabled, checked, etc ... ) on c# ? Thank you. 

mmmm ... I think with http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.visualstatemanager.gotostate 

Last modified on 2012-08-05