How to make WPF RadioButton Style?

xaml
wpf

(Yay) #1

Hi,

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

thanks


(jms) #2

you can start by using this style:

<Style TargetType="{x:Type RadioButton}" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <BulletDecorator Background="White" Cursor="Hand">
                    <BulletDecorator.Bullet>
                        <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" />
                        </Grid>
                    </BulletDecorator.Bullet>
                    <!--Text element-->
                    <TextBlock Margin="3,1,0,0" Foreground="#FF3E3E3E" FontFamily="Calibri"FontSize="12">
                        <ContentPresenter />
                    </TextBlock>
                </BulletDecorator>
                <!--If item is checked, trigger the visibility of the mark-->
                <ControlTemplate.Triggers>
                    <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" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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.