Red square appears around radio button control when clicked in Wpf

Question

I have a set of radio buttons which are displayed correctly (shown in image below). Now when i click on them a red square seems to appear around them(shown in 2nd image below). this remind of rendering issue with wpf as i seen similiar with winforms previously.

Correct behavior:

Error behavior image:

As for the development i'm using wpf with c#, mvvmlight.

Also iv included my code below:

  <RadioButton GroupName="Part_GrpPlayBtn" 
                                     ToolTip="Play" 
                                     Style="{StaticResource StyleRadioButton}" 
                                     Template="{StaticResource Template_Play}"
                                     IsChecked="{Binding PlayState, Converter={StaticResource PlayStateToCheckedConvert}, ConverterParameter={x:Static local:ePlaybackState.ePlay}}" >
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="Checked" >
                                    <i:InvokeCommandAction Command="{Binding PlayCommand,
                                                                                 RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:VMSPlayBarControl}}}" >

                                    </i:InvokeCommandAction>
                                </i:EventTrigger>
                            </i:Interaction.Triggers>
                        </RadioButton>

 <Style TargetType="RadioButton" x:Key="StyleRadioButton" >
    <Setter Property="Margin" Value="5" />
    <Setter Property="ToolTipService.IsEnabled" Value="{Binding IsChecked, RelativeSource={RelativeSource Self}}"/>
</Style>

<ControlTemplate x:Key="Template_Play" TargetType="{x:Type RadioButton}">
    <Grid>
        <Ellipse x:Name="Part_BgEllipse" Style="{StaticResource StyleEllipse}" />
        <Image x:Name="PART_Image" Source="{StaticResource ImgPlayOff}"  Style="{StaticResource StyleImage}"/>
        <ContentPresenter/>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="Part_BgEllipse" Property="Fill" Value="{StaticResource PrimaryBlueColorBrush}" />
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter TargetName="PART_Image" Property="Source" Value="{StaticResource ImgPlayHover}"/>
            <Setter TargetName="Part_BgEllipse" Property="Fill" Value="{StaticResource SecondaryLightGrayColorBrush}" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Any suggestions or ideas on the issue above ?

Thanks.

Answer 1

It's caused due to a binding issue. You're binding you radio button's IsChecked property to ViewModel property as some incorrect data type in your ConvertBack function in your converter. Please post your converter code also.

Anyways try this and check if it works.

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    return Binding.DoNothing;
}