How to change foreground on default RadRadioButton - wpf

Question

I'm trying to style my RadRadioButton's based on the default style for RadRadioButton:
<Style x:Key="MyRadRadioButtonStyle" TargetType="{x:Type telerik:RadRadioButton}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="Gainsboro" Offset="0.5"/>
<GradientStop Color="#FFADADAD" Offset="0.5"/>
<GradientStop Color="#FFD4D4D4" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#FF848484"/>
<Setter Property="CornerRadius" Value="1"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type telerik:RadRadioButton}">
<Grid SnapsToDevicePixels="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="OuterMouseOverBorder"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OuterPressedBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CommonStatesWrapper"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DisabledVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>
</Storyboard>
</VisualState>
<VisualState x:Name="DisabledChecked">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOverChecked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Background" Storyboard.TargetName="CheckedVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFE8AB" Offset="0"/>
<GradientStop Color="#FFFFE08F" Offset="0.5"/>
<GradientStop Color="#FFFEAF27" Offset="0.5"/>
<GradientStop Color="#FFFFE74E" Offset="1"/>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="CheckedVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF282828"/>
<GradientStop Color="#FF5F5F5F" Offset="1"/>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="InnerCheckedVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB69A78"/>
<GradientStop Color="#FFFFE17A" Offset="0.169"/>
</LinearGradientBrush>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BackgroundVisibility">
<VisualState x:Name="BackgroundIsHidden">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="OuterBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name="BackgroundIsVisible"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckedVisual"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStatesGroup">
<VisualState x:Name="Unfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
<DiscreteObjectKeyFrame KeyTime="0:0:0.15">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
<DiscreteObjectKeyFrame KeyTime="0:0:0.115">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}">
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Background="{x:Null}" CornerRadius="{TemplateBinding InnerCornerRadius}"/>
</Border>
<Border x:Name="OuterMouseOverBorder" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFFBDA" Offset="0"/>
<GradientStop Color="#FFFEEBAE" Offset="0.5"/>
<GradientStop Color="#FFFFD25A" Offset="0.5"/>
<GradientStop Color="#FFFFFBA3" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Background="{x:Null}" CornerRadius="{TemplateBinding InnerCornerRadius}"/>
</Border>
<Border x:Name="OuterPressedBorder" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Visibility="Collapsed">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF282828"/>
<GradientStop Color="#FF5F5F5F" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFDCAB" Offset="0"/>
<GradientStop Color="#FFFFD18F" Offset="0.5"/>
<GradientStop Color="#FFFE9227" Offset="0.5"/>
<GradientStop Color="#FFFFBA74" Offset="0"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderThickness="{TemplateBinding BorderThickness}" Background="{x:Null}" CornerRadius="{TemplateBinding InnerCornerRadius}">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB69A78"/>
<GradientStop Color="#FFFFE17A" Offset="0.126"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Border>
<Border x:Name="DisabledVisual" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="#FFE0E0E0" CornerRadius="{TemplateBinding CornerRadius}" Visibility="Collapsed"/>
<Grid x:Name="CommonStatesWrapper">
<Border x:Name="FocusVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" CornerRadius="{TemplateBinding CornerRadius}" Visibility="Collapsed">
<Border x:Name="FocusInnerVisual" BorderBrush="Transparent" BorderThickness="1" Background="{x:Null}" CornerRadius="{TemplateBinding InnerCornerRadius}"/>
</Border>
<Border x:Name="CheckedVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFFDCAB" Offset="0"/>
<GradientStop Color="#FFFFD18F" Offset="0.5"/>
<GradientStop Color="#FFFE9227" Offset="0.5"/>
<GradientStop Color="#FFFFD74E" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border x:Name="InnerCheckedVisual" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" Background="{x:Null}" CornerRadius="{TemplateBinding InnerCornerRadius}"/>
</Border>
</Grid>
<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Say I, for instance, would make a dark background for the Checked state, how can I change the button to have a white foreground (text color) in this state?
EDIT1
Based on Chris W.'s comment, I've added a ColorAnimation to this CheckStates VIsualStateGroup:
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="CheckedVisual"
Storyboard.TargetProperty="Opacity" To="1" />
<ColorAnimation Storyboard.TargetName="FontColor" Storyboard.TargetProperty="Color" To="White" Duration="0:0:0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
</VisualStateGroup>
But that does not work, it gives me this error:
EDIT2
I changed to this based on new comment:
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="CheckedVisual"
Storyboard.TargetProperty="Opacity" To="1" />
<ColorAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground" To="White" Duration="0:0:0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
</VisualStateGroup>
But now I got this error:

Answer 1

Did you changed Check background to Black?. You can edit background property of
For Foreground Please apply ColorAnimation inside Checked VisualState="Checked"
<VisualState x:Name="Checked">
<Storyboard>
...........
<ColorAnimation To="White" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="Content" />
</Storyboard>
</VisualState>

Answer 2

Note: I don't have access to telerik:RadRadioButton therefore I used ToggleButton for reference
To make your animation work even when your Content is more complex
<telerik:RadRadioButton>
<TextBlock>SomeContent</TextBlock>
</telerik:RadRadioButton>
You want to set the Foreground of RadRadioButton
Normally the first approach would be something like this
<ColorAnimation To="White" Storyboard.TargetProperty="Foreground.(SolidColorBrush.Color)" Storyboard.Target="{Binding RelativeSource={RelativeSource TemplatedParent}}" />
But then you will get this error
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element...
This error occurs because VisualStateManager is not part of the VisualTree
See also: WPF Error: Cannot find governing FrameworkElement for target element
To solve this you have to use a BindingProxy
For reference see also: Binding Visibility for DataGridColumn in WPF
public class BindingProxy : Freezable
{
#region Overrides of Freezable
protected override Freezable CreateInstanceCore()
{
return new BindingProxy();
}
#endregion
public object Data
{
get { return (object)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("Data", typeof(object),
typeof(BindingProxy));
}
<ControlTemplate TargetType="{x:Type telerik:RadRadioButton}">
<Grid SnapsToDevicePixels="True">
<Grid.Resources>
<local:BindingProxy x:Key="BindingProxy" Data="{Binding RelativeSource={RelativeSource TemplatedParent}}" />
</Grid.Resources>
...
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
...
<VisualState x:Name="Checked">
<Storyboard>
...
<ColorAnimation To="White" Storyboard.TargetProperty="Foreground.(SolidColorBrush.Color)" Storyboard.Target="{Binding Path=Data, Source={StaticResource BindingProxy}}" />
...
</Storyboard>
</VisualState>
...
</VisualStateGroup>
...
</VisualStateManager>
...
</Grid>
</ControlTemplate>

Answer 3

Here is the code, that should work (works for me at least):
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckedVisual"/>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="Content">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="White"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
To make such styles in the correct way (means "recommended by Telerik"), you should Right click on the component in designer -> Edit Template... -> Edit a Copy (well, you can try others at this point).
After those, correct (working) code will be generated in xaml, either in Resources or in the App.xaml file. Having this code, you can change those parameters. Hope it helped.