Search code examples
wpfxamltelerikradio-button

How to change foreground on default RadRadioButton


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


Solution

  • 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>