How to make WPF RadioButton Style?


(Yay) #1


I need to style my RadioButton within a WPF Application Window. How to do it?


(jms) #2

you can start by using this style:

<Style TargetType="{x:Type RadioButton}" >
    <Setter Property="Template">
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <BulletDecorator Background="White" Cursor="Hand">
                        <Grid Height="16" Width="16"> <!--Define size of the Bullet-->
                            <!--The two borders-->
                            <Border Name="RadioOuter" Background="Transparent" BorderBrush="Gainsboro"BorderThickness="2" CornerRadius="2" />
                            <Border CornerRadius="0" Margin="4" Name="RadioMark" Background="#FFADADAD"Visibility="Hidden" />
                    <!--Text element-->
                    <TextBlock Margin="3,1,0,0" Foreground="#FF3E3E3E" FontFamily="Calibri"FontSize="12">
                        <ContentPresenter />
                <!--If item is checked, trigger the visibility of the mark-->
                    <Trigger Property="IsChecked" Value="true">
                        <!--If item is checked, trigger the visibility of the mark and change the color of the selected bullet into a darker gray for better highlighting-->
                        <Setter TargetName="RadioMark" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="RadioOuter" Property="BorderBrush" Value="#FFADADAD" />

it’s clean and easy to understand,

I hope that helps

(Yay) #3

Really big thanks @jms that really answers my question :slight_smile: that’s a really nice RadioButton style.