WPF Custom CheckedListBox

Kailash Chandra Behera | Wednesday, January 31, 2018

Introduction

WPF doesn’t have a CheckedListBox control by default but with the WPF being so flexible it’s simple to make one just by changing the ItemsTemplate of a ListBox. This blog describes how to create CheckedListBox in WPF using XAML Code.

Getting Started


Windows Presentation Foundation provides various ways to customize existing controls. Here in this blog, I have created a custom list box that contains CheckBox as an item. This Checkbox item contains two types of images for checked and unchecked. Below in this.
When you select a CheckBox, the image will appear which has a right symbol inside it for unchecked an image will appear without the right symbol.

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

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

To display CheckBox content (text and image), I customized the CheckBox control template with the help of the CheckBox style. In CheckBox style, I have customized the control template and placed two controls a text block for displaying text with CheckBox 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 CheckBox. Based on the result of IsChecked property, the trigger fire.
After applying the above pieces of stuff to Listbox and CheckBox, I bound IsSelected property of Listbox item to IsChecked property of CheckBox control to update its IsChecked property when Listbox item gets selected.
Go through the below code example for more details.

  <ListBox Name="listBoxZone" >  
       <ListBox.ItemTemplate>  
         <DataTemplate>  
           <CheckBox Content="{Binding Name}" x:Name="CheckBoxZone" IsChecked="{Binding Path=IsSelected, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">  
             <CheckBox.Style>  
               <Style TargetType="{x:Type CheckBox}">  
                 <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 CheckBox}">  
                       <Grid Background="Transparent" >  
                         <Grid.ColumnDefinitions>  
                           <ColumnDefinition Width="*"/>  
                           <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 CheckBox}">  
                           <Grid Background="Transparent" >  
                             <Grid.ColumnDefinitions>  
                               <ColumnDefinition Width="*"/>  
                               <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/download1.png"/>  
                           </Grid>  
                         </ControlTemplate>  
                       </Setter.Value>  
                     </Setter>  
                   </Trigger>  
                 </Style.Triggers>  
               </Style>  
             </CheckBox.Style>  
           </CheckBox>  
         </DataTemplate>  
       </ListBox.ItemTemplate>  
     </ListBox>

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

By at