How to change foreground on default RadRadioButton

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:

See your "Checked" `VisualState`? Slap this in between the `storyboard` tags there; `` — Chris W., Dec 17 '18 at 22:28
@ChrisW. Thankt for your comment, please see my updated question. — dhrm, Dec 18 '18 at 06:21
ah right, you've got a `ContentPresenter` in there. Change the `TargetName` to Content and the `TargetProperty` to `Foreground` — Chris W., Dec 18 '18 at 15:08
Ah crap, actually just replace `Foreground` property with `TextElement.Foreground` and should be good. Sorry, my xaml is a lil rusty. — Chris W., Dec 18 '18 at 19:35
@ChrisW. Sorry, but I still got the same error. Except it now says: *Cannot resolve all property references in the property path 'TextElement.Foreground'. Verify that applicable objects support the properties.* — dhrm, Dec 19 '18 at 07:10
Hmmm, my xaml is rusty but it's not that rusty. That should be fine. Will try to go look at a copy of the telerik button in a button and see your culprit. I know in their docs there's a brush you can override real easily to accomplish your goal but you've essentially overridden the style template now so it wouldn't apply anyway. This task is also generally real easy using Blend and the states panel to see the available properties but I switched to web stuff some time ago. Either way, to be continued. — Chris W., Dec 19 '18 at 15:29
@dhrm Because I'm interested in it can you please check what happens when you use a `TextBlock` or something similar as `Content` of `telerik:RadRadioButton` (or do you already using something like that). Does the answer from Kamran Asim still working? — nosale, Dec 20 '18 at 12:54

score 1 · Accepted Answer · answered Dec 20 '18 at 06:35

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>

answered Dec 20 '18 at 06:35

Kamran Asim

670
4
16

Your solution will work, unless you do something like this `Content` (I used `ToggleButton` for reference) – nosale Dec 20 '18 at 07:36
I tried above solution, by using Contenet to some text. it works. It should work with other controls, having foreground property. anyway you know what should be content, therefore you can set property accordingly – Kamran Asim Dec 23 '18 at 05:06
I am very thankful for your comment. I know this isn't the right place to ask questions, but I provided a litte [example](https://github.com/n0sale/showcases/blob/master/MainWindow.xaml) what I tried with your solution and which for me is not working. – nosale Dec 23 '18 at 11:05
Hellow @nosale Thanks for sharing example. I solved your issue in another way. Can you please try this. 1. Remove Foreground color animation from checked and unchecked 2. apply following style It worked for me, please check it – Kamran Asim Dec 24 '18 at 05:35
Thanks for your time. I know that this will work, but the question is how to get it work by using `VisualStateManager` (I didn't find a solution so far, beside that one I posted). I found an [answer](https://stackoverflow.com/a/3068659/10718884) why your approach is not working under this conditions (still seems to apply in 2018) – nosale Dec 24 '18 at 13:02

nosale · Answer 2 · 2018-12-20T12:48:07.130

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>

score 0 · Answer 3 · answered Dec 20 '18 at 14:29

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.

How to change foreground on default RadRadioButton

3 Answers3