Search code examples
wpfxamltemplatescheckboxstyles

How Design a style in WPF radiobutton like checkbox


I want to have a radiobutton similar to checkbox, so I define a style in Dictionary file like:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:local="clr-namespace:WpfCheckBoxLikeRadiobutton">

<Style x:Key="MyRadioButton" TargetType="{x:Type RadioButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <Grid>
                    <CheckBox
                        IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                        Path=IsChecked, Mode=TwoWay}"
                        IsHitTestVisible="False" />
                    <CheckBox
                    IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                    Path=IsChecked, Mode=TwoWay}" Opacity="0"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

and merge it in app.xaml file like this

<Application x:Class="WpfCheckBoxLikeRadiobutton.App"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:WpfCheckBoxLikeRadiobutton"
         StartupUri="MainWindow.xaml">
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Dictionary1.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

and then use it in my window

<GroupBox Margin="5" Padding="5">
        <StackPanel >
            <CheckBox Content="this is checkbox" />
            <RadioButton Content="this is first radio button" Style="{DynamicResource MyRadioButton}"/>
            <RadioButton Content="this is Second radio button" Style="{DynamicResource MyRadioButton}"/>
            <RadioButton Content="this is third radio button" Style="{DynamicResource MyRadioButton}"/>
        </StackPanel>
    </GroupBox>

but after assigning style for radiobutton, that content will disappear. What is the wrong with my style?

enter image description here


Solution

  • It happens because you ignore content of your control in you ControlTemplate. Your style should look like this:

    <Style x:Key="MyRadioButton" TargetType="{x:Type RadioButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <Grid>
                    <CheckBox
                        IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                    Path=IsChecked, Mode=TwoWay}"
                        IsHitTestVisible="False" Content="{TemplateBinding Content}" />
                    <CheckBox
                    IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, 
                                Path=IsChecked, Mode=TwoWay}"   
                    Content="{TemplateBinding Content}" Opacity="0"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>