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

WPF Custom RadioButton ListBox With Image 


Images: For RadioButton

WPF Custom RadioButton ListBox With Image
WPF Custom RadioButton ListBox With Image

Related Articles

  1. Data Validation in WPF
  2. WPF Round Corner Button with click effects
  3. Round Corner PasswordBox in WPF
  4. Round Corner TextBox in WPF
  5. WPF Custom Datagrid Control(Filterable)
  6. WPF Round Corner ListBox
  7. Custom RadioButtonListBox With Image
  8. RadiobuttonList in WPF
  9. Custom CheckedListBox in WPF

Thanks

Kailash Chandra Behera

An IT Professional with 12 years experience in development life cycle in windows, service and Web based application using Microsoft.Net technologies. Proven record of developing all phases of projects in Microsoft.Net technology from initiation to closure aligning with the company's Business objectives to drive process improvements, competitive advantage and bottom-line gains. -> Good exposure of independently working and developing multiple projects ->Committed to efficient and effective development of projects in a fast-paced and deadline driver environment. Skill :- Develop and design projects in various technologies of Microsoft Technology. Total IT Experience- 13+

Previous Post Next Post

نموذج الاتصال