Aug 052012
 
 August 5, 2012  Posted by at 11:17 pm Uncategorized, WinRT  Add comments

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”]

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!– 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]

  8 Responses to “Example Metro app /WinRT: How to change the style of the radiobutton”

  1. 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 🙂

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

  3. […] by the WinRT Framework. This is in fact as easy as managing a list of strings! …”Example Metro app /WinRT: How to change the style of the radiobutton (Iris Classon)“Got a question on twitter today about hot to change the icon color of the […]

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

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 8 + 10 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)