How to put background image to radio button in wpf

deniz koyuncu 16 Reputation points
2022-03-24T07:54:31.263+00:00

Same as title

Developer technologies Windows Presentation Foundation
{count} votes

2 answers

Sort by: Most helpful
  1. Castorix31 90,521 Reputation points
    2022-03-24T08:32:29.863+00:00

    You can change the Template : RadioButton Styles and Templates
    with many samples on Google, like How to make WPF RadioButton Style?
    where you can add any image in background

    0 comments No comments

  2. Hui Liu-MSFT 48,676 Reputation points Microsoft External Staff
    2022-03-24T09:55:44.573+00:00

    Here are two RadioButton styles with image backgrounds.

    MainWindow.xaml:

    <Window.Resources>  
            <Style  x:Key="radio" 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="35" />  
                                        <Border Name="RadioChecked"   BorderBrush="Gray"      BorderThickness="1"     CornerRadius="35" >  
                                            <Border.Background>  
                                                <ImageBrush ImageSource="spring.jpg" 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>  
            <Style x:Key="Flag" TargetType="RadioButton">  
                <Style.Triggers>  
                    <Trigger Property="IsChecked" Value="False">  
                        <Setter Property="Opacity" Value="0.5"/>  
                    </Trigger>  
                </Style.Triggers>  
                <Setter Property="BorderThickness" Value="2"/>  
                <Setter Property="Template">  
                    <Setter.Value>  
                        <ControlTemplate TargetType="RadioButton">  
                            <Border BorderThickness="{TemplateBinding BorderThickness}"  BorderBrush="{TemplateBinding BorderBrush}"   Background="{Binding}"   CornerRadius="20">  
                                <Image Source="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"/>  
                            </Border>  
                        </ControlTemplate>  
                    </Setter.Value>  
                </Setter>  
            </Style>  
        </Window.Resources>  
        <StackPanel>  
            <RadioButton  BorderBrush="Red" Width="100" Height="50">  
                    <WrapPanel>  
                        <Image Source="spring.jpg" Width="56" Height="46"  Margin="0,0,5,0"/>  
                        <TextBlock Text="No" Foreground="Red" />  
                    </WrapPanel>  
                </RadioButton>  
                <RadioButton Content="spring.jpg" Style="{StaticResource Flag}" BorderBrush="Green" Width="40" Height="40"/>  
                <RadioButton Content="images.jpg" Style="{StaticResource Flag}" BorderBrush="Blue" Width="40" Height="40"/>  
    
        </StackPanel>  
    

    The result:
    186441-image.png


    If the response is helpful, please click "Accept Answer" and upvote it.
     Note: Please follow the steps in our [documentation][5] to enable e-mail notifications if you want to receive the related email notification for this thread. 

    [5]: https://learn.microsoft.com/en-us/answers/articles/67444/email-notifications.html

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.