Skip to main content

WPF Custom Listbox with Checkbox

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 which contains Check Box as item. This Check Box item contains two types of image for checked and unchecked. Below in this.
When you select a Check Box, the image will appear which has a right symbol inside it for unchecked an image will appear without right symbol.

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

With help of Item template and data template of list box, I successfully placed Check Box inside list box item container.
The data template helped me to display bound value as text of Check Box in side item of list box item.

To display Check Box content (text and image), I customized the Check Box control template with help of Check Box style. In Check Box style I have customize the control template and placed two controls a text block for displaying text with Check Box and an image control to appear image in list box item.

I added one trigger for the property IsChecked, inside the trigger I customized control template again and placed a text block and image for displaying text and another image that indicates to selection of Check Box. Based on the result of IsChecked property, the trigger fire.
After applying above stuffs to list box and Check Box, I bound IsSelected property of list box item to IsChecked property of Check Box control to update its IsChecked property when list box 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>

Thanks
Kailash Chandra Behera

Comments

Post a Comment

Popular posts from this blog

Generate QR Code in WPF

Introduction In my previous two blogs, we have discussed how to display generate and display various barcodes on the web page. In this blog, we are going to demonstrate how to Generate QR Code in the WPF application. Getting Started Here in the demonstration Generate QR Code in WPF , will generate QR code using third party library as there is not inbuilt library provided by Microsoft to generate QR code and will display in WPF image control, In the below, we will see the steps to display QR Code. As I mentioned in the above paragraph that there is no inbuild library provided by Microsoft to generate QR code, I have taken the help of the ZXing library which is a third party free library and available Nuget. This library provides various options to generate barcodes and QR Code from the user-friendly text. Generate QR Code in WPF Here are the steps to generate QR code and let's follow the steps to complete demonstrations. Demonstration:- Generate QR Code Open visual stud
Post a Comment
Read more

Creating Application in Prism

Introduction This article explains an illustration of creating a windows application in Prism Library(WPF Prism). The solution includes recommended practices and techniques and is the basis for the procedures in Prism. This illustration created in the Visual Studio 2012, It can also developed in the visual studio 2008 and 2010, because wpf supports from .net framework 3.5 to latest version. Microsoft.Practices.Prism.dll. This assembly contains the implementation of the Prism Library core components such as modularity, logging services, communication services, and definitions for several core interfaces. It also contains the implementation of Prism Library components that target WPF applications, including commands, regions, and events. Microsoft.Practices.Prism.UnityExtensions.dll. This assembly contains base and utility classes you can reuse in applications built with the Prism Library that consume the Unity Application Block. For example, it contains a bootstrapper base class
1 comment
Read more

WPF Binding

Introduction This blog describes WPF Binding and the measure elements exist with binding with XAML example in XAML and code-behind. Getting Started Binding helps in WPF to flow data from one object to another object, the object which fetches data is called source and the object which receives the data is called target. The Object a be a UI control or object of a class that means in binding you can bind a property of a class and property of another control to WPF UI controls as well. XAML Example <TextBox x:Name="sourceText" Grid.Row="0" /> <Button Grid.Row="1" Content="{Binding ElementName=sourceText, Path=Text}"/> Code Example Button btn=new Button(); Binding binding = new Binding("Text"); binding.Source = sourceText; btn.SetBinding(Button.ContentProperty, binding); In WPF binding has some measure properties or elements that we are using while developing application or projects, here we are going to d
1 comment
Read more