Change RadioButton Color in Combined States - WinUI/UWP

Question

Hello.

I'm trying to change the radio button color according to combined states: CheckedPressed, UncheckedPressed, CheckedPointerOver, CheckedDisabled, UncheckedDisabled.

How can I do that? I added these states but didn't work.

Answer 1

Hello @Anderson Rodrigues Cavalcante ,

Welcome to Microsoft Q&A!

The default style, template, and resources that define the look of the control are included in the generic.xaml file. You can find the styles of RadioButton in generic.xaml which is available in the \(Program Files (x86))\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.xxxxx.0\Generic.

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundPointerOver}"/>
        </ObjectAnimationUsingKeyFrames>
          .....
          ......

Once you have found the RadioButton, you can change its colour according to the ThemeResource in the default style. here is an example of how to do it.

<StackPanel>
    <StackPanel.Resources>
        <SolidColorBrush x:Key="CheckedPressedColor" Color="Red"/>
        <StaticResource x:Key="RadioButtonOuterEllipseCheckedStrokePressed" ResourceKey="CheckedPressedColor" />
        <StaticResource x:Key="RadioButtonCheckGlyphFillPressed" ResourceKey="CheckedPressedColor" />
        <SolidColorBrush x:Key="UncheckedPressedColor" Color="Yellow"/>
        <StaticResource x:Key="RadioButtonOuterEllipseStrokePressed" ResourceKey="UncheckedPressedColor" />
        <SolidColorBrush x:Key="CheckedPointerOverColor" Color="Blue"/>
        <StaticResource x:Key="RadioButtonOuterEllipseCheckedStrokePointerOver" ResourceKey="CheckedPointerOverColor" />
        <StaticResource x:Key="RadioButtonCheckGlyphFillPointerOver" ResourceKey="CheckedPointerOverColor" />
        <SolidColorBrush x:Key="DisabledrColor" Color="HotPink"/>
        <StaticResource x:Key="RadioButtonForegroundDisabled" ResourceKey="DisabledrColor" />
        <StaticResource x:Key="RadioButtonOuterEllipseStrokeDisabled" ResourceKey="DisabledrColor" />
        <StaticResource x:Key="RadioButtonCheckGlyphFillDisabled" ResourceKey="DisabledrColor" />
        <StaticResource x:Key="RadioButtonOuterEllipseCheckedStrokeDisabled" ResourceKey="DisabledrColor" />
        
    </StackPanel.Resources>
        
    <RadioButton  Content="Choice" />
    <RadioButton  Content="Choice" />
    <RadioButton  Content="Choice" IsEnabled="False" IsChecked="True"/>
    <RadioButton  Content="Choice" />
    
</StackPanel>

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.