How to create a toggle button list using radio buttons in WPF?

In this article I am going to discuss How to create toggle button using Radio button in WPF?  Please follow below steps to implement this.

Step 1- Add below style in your style.xaml resource file.

<Style x:Key="ToggleModuleClass" TargetType="{x:Type ToggleButton}">
        <Setter Property="Background" Value="#45C8C7"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="FontFamily" Value="Segoe UI"></Setter>
        <Setter Property="FontSize" Value="13"></Setter>      
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">                   
                        <Grid x:Name="grid" VerticalAlignment="Center" HorizontalAlignment="Left"  >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"></ColumnDefinition>
                                <ColumnDefinition Width="120"></ColumnDefinition>
                               <ColumnDefinition Width="2"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50"></RowDefinition>
                            </Grid.RowDefinitions>
                            <Rectangle Fill="White" Grid.Column="0"  Width="20" Height="20"></Rectangle>
                            <TextBlock Grid.Column="1"  VerticalAlignment="Center" HorizontalAlignment="Center">
                                                   <ContentPresenter  x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"  />
                            </TextBlock>
                        <Grid Grid.Column="2" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="Button.IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True"/>
                            <Trigger Property="IsPressed" Value="True"/>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Setter Property="Grid.Background" TargetName="grid" Value="#45C8C7"/>
                            </Trigger>
                            <Trigger Property="ToggleButton.IsChecked" Value="False">
                                <Setter Property="Grid.Background" TargetName="grid" Value="#DDE1E2"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                            </Trigger>
                        </ControlTemplate.Triggers>                   
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Step 2- Add below list box in your user control(.xaml) file.

     <ListBox HorizontalAlignment="Stretch" BorderBrush="White" BorderThickness="0" >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel IsItemsHost="True" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>               
                <RadioButton GroupName="ABC"  Style="{StaticResource ToggleModuleLeads}">1</RadioButton>
                <RadioButton GroupName="ABC"  Style="{StaticResource ToggleModuleLeads}" >2</RadioButton>
                <RadioButton GroupName="ABC"  Style="{StaticResource ToggleModuleLeads}" >3</RadioButton>
                <RadioButton GroupName="ABC"  Style="{StaticResource ToggleModuleLeads}" >4</RadioButton>
     </ListBox>

That's it your toggle button are ready.