xamlbuttonuwpradio-buttonvisualstates

Keep PointerOver from changing text color of Checked button


I am having issue trying to have a set of radio buttons behave as buttons, and my goal is to have the text color of the buttons change on hover, and to have it go back to original color and be bolded on click. I am implementing recomendations on a previous similar question here but I seem to be doing something wrong because I am not getting the desired behavior. When I hover over the buttons the PointerOver is still changing the text color of a "Checked" button

   <Page.Resources>
    <Style x:Key="RadioButtonStyle" TargetType="RadioButton">
        <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}"/>
        <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}"/>

        <Setter Property="Padding" Value="8,6,0,0"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="MinWidth" Value="120"/>
        <Setter Property="UseSystemFocusVisuals" Value="True"/>
        <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Grid x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="20"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="ContentPresenter.Foreground" Value="Purple" />
                                    </VisualState.Setters>

                                </VisualState>
                                <VisualState x:Name="Pressed">

                                </VisualState>
                                <VisualState x:Name="Disabled">

                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <VisualState.Setters>
                                        <Setter Target="FocusContentPresenter.FontWeight" Value="Bold" />
                                        <Setter Target="ContentPresenter.FontWeight" Value="Bold" />
                                        <Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" />
                                        <Setter Target="ContentPresenter.(UIElement.Opacity)" Value="0" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                                <VisualState x:Name="Indeterminate"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <ContentPresenter x:Name="FocusContentPresenter" Opacity="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" />

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" Margin="10,165,0,0" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}"/>
    <RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" Margin="10,235,0,0" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}"/>
    <RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" Margin="10,94,0,0" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}" />
</Grid>

Solution

  • I think you are almost there except some minor padding issues.

    <Style x:Key="RadioButtonStyle" TargetType="RadioButton">
        <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}" />
        <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="MinWidth" Value="0" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
        <Setter Property="Padding" Value="16,12" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Grid x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="ContentPresenter.Foreground" Value="Purple" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <VisualState.Setters>
                                        <Setter Target="FocusContentPresenter.FontWeight" Value="Bold" />
                                        <Setter Target="ContentPresenter.FontWeight" Value="Bold" />
                                        <Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" />
                                        <Setter Target="ContentPresenter.(UIElement.Opacity)" Value="0" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Unchecked" />
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
    
                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
                        <ContentPresenter x:Name="FocusContentPresenter" Opacity="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>