WPF Radio Button style to fill its background with image on selection

Question

I am relatively new with WPF applications and after so many attempts still unable to achieve this. A guidance to this would be awesome !

EDIT:

I achieved this via following method but it doesn't fit image properly in the border :

<Style TargetType="{x:Type RadioButton}" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">

                    <BulletDecorator Name="BD_Check" 
                                     Background="Transparent" 
                                     Cursor="Hand">
                        <BulletDecorator.Bullet>
                            <Grid Height="15" Width="15">
                                <Border Name="RadioDefault" 
                                        BorderBrush="Gray" 
                                        BorderThickness="1" 
                                        CornerRadius="15" />
                                <Border Name="RadioChecked" 
                                        BorderBrush="Gray" 
                                        BorderThickness="1" 
                                        CornerRadius="15" >
                                    <Image Source="Resources\green-tick.png" Stretch="Uniform"/>
                                </Border>
                            </Grid>
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="5 0 0 0"
                                   Foreground="#FF3E3E3E"
                                   FontSize="15">
                                   <ContentPresenter />
                        </TextBlock>
                    </BulletDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter TargetName="RadioChecked" Property="Visibility" Value="Visible"/>
                            <Setter TargetName="RadioDefault" Property="Visibility" Value="Hidden" />
                        </Trigger>
                        <Trigger Property="IsChecked" Value="false">
                            <Setter TargetName="RadioChecked" Property="Visibility" Value="Hidden"/>
                            <Setter TargetName="RadioDefault" Property="Visibility" Value="Visible" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

This is the result when i check the radio button, Image is not properly fit :

improper-image-fit-on-radio-button-background

Image fits properly in the radio button if i set image like this :

<RadioButton.Background>
                <ImageBrush ImageSource="Resources/green-tick.png" Stretch="UniformToFill"/>
            </RadioButton.Background>

But how to convert this to template style? Any viable solution will be a great help !

Answer 1

You can set Background of the RadioCheck Border.

<Style TargetType="{x:Type RadioButton}" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <BulletDecorator Name="BD_Check" 
                                 Background="Transparent" 
                                 Cursor="Hand">
                    <BulletDecorator.Bullet>
                        <Grid Height="15" Width="15">
                            <Border Name="RadioDefault" 
                                    BorderBrush="Gray" 
                                    BorderThickness="1" 
                                    CornerRadius="15" />
                            <Border Name="RadioChecked" 
                                    BorderBrush="Gray" 
                                    BorderThickness="1" 
                                    CornerRadius="15" >
                                <Border.Background>
                                    <ImageBrush ImageSource="Resources/green-tick.png" Stretch="Uniform"/>
                                </Border.Background>
                            </Border>
                        </Grid>
                    </BulletDecorator.Bullet>
                    <TextBlock Margin="5 0 0 0"
                               Foreground="#FF3E3E3E"
                               FontSize="15">
                           <ContentPresenter />
                    </TextBlock>
                </BulletDecorator>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter TargetName="RadioChecked" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="RadioDefault" Property="Visibility" Value="Hidden" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="false">
                        <Setter TargetName="RadioChecked" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="RadioDefault" Property="Visibility" Value="Visible" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Result will look like this