How to change foreground on default RadRadioButton

3
votes

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:

compile 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:

compile error

3
wpfxamltelerikradio-button
See your "Checked" VisualState? Slap this in between the storyboard tags there; <ColorAnimation Storyboard.TargetName="FontColor" Storyboard.TargetProperty="Color" To="White" Duration="0:0:0" /> – Chris W.
@ChrisW. Thankt for your comment, please see my updated question. – dhrm
ah right, you've got a ContentPresenter in there. Change the TargetName to Content and the TargetProperty to Foreground – Chris W.
@ChrisW. Thank you again, please see my new edit. – dhrm
Ah crap, actually just replace Foreground property with TextElement.Foreground and should be good. Sorry, my xaml is a lil rusty. – Chris W.

3 Answers

1
votes

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>
0
votes

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>
0
votes

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.