Change RadioButton Color in Combined States - WinUI/UWP

Anderson Rodrigues Cavalcante 311 Reputation points
2024-07-01T19:15:42.5766667+00:00

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.

Universal Windows Platform (UWP)
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
789 questions
{count} votes

Accepted answer
  1. Junjie Zhu - MSFT 16,551 Reputation points Microsoft Vendor
    2024-07-02T03:40:54.8533333+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful