WPF Custom RadioButton ListBox With Image

This blog contains code snippet which guides to create custom RadioListBox in WPF using XAML code.

WPF Custom RadioButton ListBox With Image

Getting Started Windows Presentation Foundation provides various ways to customize existing controls. Here in this blog I have created a custom list box which contains Radio button as item. This Radio button item contains two types of image for select and unselect. Below in this blog I have uploaded the images check it once.

When you select a radio button, the image will appear which has a big black point inside it for un selection an image will appear without a big black point.

Now we will discuss, how I achieved the radio button list box with an image. For achieving the above-mentioned things, I took the help of the Item template, data template list box, and Radio button style of WPF.

With the help of the Item template and data template of the Listbox, I successfully placed the radio button inside the Listbox item container.
The data templated helped me to display the bound value as the text of the radio button inside the item of the Listbox item.

To display radio button content (text and image), I customized the radio button control template with the help of the radio button style. In radio button style I have customized the control template and placed two controls a textbox for displaying text with radio button and image control to appear image in Listbox item.

I added one trigger for the property IsChecked, inside the trigger, I customized the control template again and placed a text block and image for displaying text and another image that indicates the selection of the radio button. Based on the result of IsChecked property, the trigger fire.

After applying the above pieces of stuff to Listbox and radio button, I bound IsSelected property of Listbox item to IsChecked property of Radio button control to update it’s IsChecked property when Listbox item gets selected.
Go through the below code example for more details.

XAML Code: For RadioListBox

 <Border BorderBrush="Red" BorderThickness="1" CornerRadius="10" Margin="50,50,50,50" Padding="10">  
       <ListBox Name="listBoxZone" ItemsSource="{Binding TheList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" >  
         <ListBox.ItemTemplate>  
           <DataTemplate>  
             <RadioButton Content="{Binding Path=TheText, UpdateSourceTrigger=PropertyChanged}" IsChecked="{Binding Path=IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged,RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}">  
               <RadioButton.Style>  
                 <Style TargetType="{x:Type RadioButton}">  
                   <Setter Property="Width" Value="150"/>  
                   <Setter Property="Height" Value="40"/>  
                   <Setter Property="Margin" Value="4"/>  
                   <Setter Property="Padding" Value="4,0,0,0"/>  
                   <Setter Property="Template">  
                     <Setter.Value>  
                       <ControlTemplate TargetType="{x:Type RadioButton}">  
                         <Grid Background="Transparent" >  
                           <Grid.ColumnDefinitions>  
                             <ColumnDefinition Width="50"/>  
                             <ColumnDefinition Width="50"/>  
                           </Grid.ColumnDefinitions>  
                           <TextBlock Margin="5,10" Text="{Binding Path=Content,Mode=OneWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource TemplatedParent}}" />  
                           <Image Grid.Column="1"  Height="35" Width="35" Source="Images/download.png" />  
                         </Grid>  
                       </ControlTemplate>  
                     </Setter.Value>  
                   </Setter>  
                   <Style.Triggers>  
                     <Trigger Property="IsChecked" Value="true">  
                       <Setter Property="Template">  
                         <Setter.Value>  
                           <ControlTemplate TargetType="{x:Type RadioButton}">  
                             <Grid Background="Transparent" >  
                               <Grid.ColumnDefinitions>  
                                 <ColumnDefinition Width="50"/>  
                                 <ColumnDefinition Width="50"/>  
                               </Grid.ColumnDefinitions>  
                               <TextBlock Margin="5,10" Text="{Binding Path=Content,Mode=OneWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource TemplatedParent}}" />  
                               <Image Grid.Column="1" Source="Images/download1.png" Height="35" Width="35"/>  
                             </Grid>  
                           </ControlTemplate>  
                         </Setter.Value>  
                       </Setter>  
                     </Trigger>  
                   </Style.Triggers>  
                 </Style>  
               </RadioButton.Style>  
             </RadioButton>  
           </DataTemplate>  
         </ListBox.ItemTemplate>  
       </ListBox>  
     </Border>

C# Code: For Data

 private void FillList()  
     {  
       TheList.Add(new BoolStringClass() { TheText = "Student1", IsSelected = false });  
       TheList.Add(new BoolStringClass() { TheText = "Student2", IsSelected = false });  
       TheList.Add(new BoolStringClass() { TheText = "Student3", IsSelected = false });  
       TheList.Add(new BoolStringClass() { TheText = "Student4", IsSelected = false });  
       TheList.Add(new BoolStringClass() { TheText = "Student5", IsSelected = false });  
       //this.listBoxZone.ItemsSource = this.TheList;  
       this.DataContext = this;  
     }

WPF Custom RadioButton ListBox With Image

Images: For RadioButton

Thanks

WPF Custom RadioButton ListBox With Image