How do not allow onMouseOver/Out state while Radio button is selected? - wpf

Question

I am wondering if it is possible to halt onMouserOver state while Radio button is checked/selected. I have a prototype where I switch content by clicking restyled radio buttons. I need to keep selected state not changed while the radio button is selected. Now, when mouse rollover/rollout happed it changed the background color as supposed to change when button is not selected. Below is the code. Thank you in advance.
<StackPanel>
<RadioButton x:Name="one" Content="one" IsChecked="True" GroupName="intro" Style="{DynamicResource RadioButtons}" Style="{DynamicResource RadioButtons}" />
<RadioButton x:Name="two" Content="two" IsChecked="True" GroupName="intro" Style="{DynamicResource RadioButtons}" Style="{DynamicResource RadioButtons}" />
<RadioButton x:Name="three" Content="three" IsChecked="True" GroupName="intro" Style="{DynamicResource RadioButtons}" Style="{DynamicResource RadioButtons}" />
</StackPanel>
Style:
<Style x:Key="IntroRadioButtons" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
x:Name="borderRadioButon" BorderBrush="{x:Null}" BorderThickness="0"
Background="#FFFFB343" Width="90" Height="90" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="0,0,0,4" HorizontalAlignment="Center" VerticalAlignment="Bottom"
TextBlock.FontSize="{DynamicResource PrimaryFontSize}"
TextBlock.FontFamily="{DynamicResource PrimaryFontFamily}"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
<Setter Property="Padding" Value="4,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

Similar question here. Seems like the two VisualStateGroup's conflict when they target the same property for the same control. Used the same approach as in the link and it seems to be working: Added two borders, one for each group. If there's a better way to solve this than I'm interested in what that is as well :)
<Style x:Key="IntroRadioButtons" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon2">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
x:Name="borderRadioButon" BorderBrush="{x:Null}" BorderThickness="0"
Background="#FFFFB343" Width="90" Height="90">
<Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
x:Name="borderRadioButon2" BorderBrush="{x:Null}" BorderThickness="0"
Background="Transparent" Width="90" Height="90">
<ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="0,0,0,4" HorizontalAlignment="Center" VerticalAlignment="Bottom"
TextBlock.FontSize="{DynamicResource PrimaryFontSize}"
TextBlock.FontFamily="{DynamicResource PrimaryFontFamily}"/>
</Border>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
<Setter Property="Padding" Value="4,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>