Combo Box With Check Boxes in WPF DataGrid

Introduction

Recently I have worked with WPF requirements to show a Combo Box with check boxes as shown in the following image. This article shows how to do it.

Procedure

To work with a Data Grid in WPF currently I am using the WPF Toolkit available in the following link.

https://wpftoolkit.codeplex.com/wikipage?title=DataGrid

In the XAML page we need to add the Data Grid code as specified below.

  1. <toolkit:DataGrid Name="resultGrid" Loaded="resultGrid_Loaded" ItemsSource="{Binding Programs}" CanUserAddRows="False"   
  2. CanUserDeleteRows="False" CanUserReorderColumns="False" Margin="7,33,7,0"  
  3. CanUserResizeRows="False" AutoGenerateColumns="False"   
  4. AreRowDetailsFrozen="True" IsReadOnly="False" SelectionMode="Extended"  
  5. CanUserSortColumns="False">  
  6. <toolkit:DataGrid.Columns>  
  7. <toolkit:DataGridTemplateColumn Header="Template">  
  8. <toolkit:DataGridTemplateColumn.CellTemplate>  
  9. <DataTemplate>  
  10. <ComboBox Loaded="ComboBox_Loaded">  
  11. <ComboBox.ItemTemplate>  
  12. <DataTemplate>  
  13. <StackPanel Orientation="Horizontal">  
  14. <CheckBox IsChecked="{Binding IsChecked}" Width="20" />  
  15. <TextBlock Text="{Binding Program}" Width="100" />  
  16. </StackPanel>  
  17. </DataTemplate>  
  18. </ComboBox.ItemTemplate>  
  19. </ComboBox>  
  20. </DataTemplate>  
  21. </toolkit:DataGridTemplateColumn.CellTemplate>  
  22. </toolkit:DataGridTemplateColumn>  
  23. <toolkit:DataGridComboBoxColumn Header="Combo" x:Name="Combo" SelectedItemBinding="{Binding Program}"/>  
  24. <toolkit:DataGridTextColumn Header="Program" Binding="{Binding Program}"/>   
  25. </toolkit:DataGrid.Columns>  
  26. </toolkit:DataGrid>  
In the code above we need to add a “DataGridTemplateColumn” and inside that we can create our own controls like check box and text block.

We have added two “Load” events for Data Grid and Combo box.
  1. private void ComboBox_Loaded(object sender, RoutedEventArgs e)  
  2. {  
  3. ObservableCollection<Programs> data = new ObservableCollection<Programs>();  
  4. data.Add(new Programs("test"false));  
  5. data.Add(new Programs("test1"false));  
  6. data.Add(new Programs("test2"true));  
  7.   
  8. // ... Get the ComboBox reference.  
  9. var comboBox = sender as ComboBox;  
  10.   
  11. // ... Assign the ItemsSource to the List.  
  12. comboBox.ItemsSource = data;  
  13.   
  14. // ... Make the first item selected.  
  15. comboBox.SelectedIndex = 0;  
  16. }  
  17.   
  18. private void resultGrid_Loaded(object sender, RoutedEventArgs e)  
  19. {  
  20. ObservableCollection<Programs> programs = new ObservableCollection<Programs>();  
  21. programs.Add(new Programs("test"false));  
  22. programs.Add(new Programs("test1"false));  
  23. programs.Add(new Programs("test2"true));  
  24.   
  25. //var grid = sender as DataGrid;  
  26. resultGrid.ItemsSource = programs;  
  27.   
  28. Combo.ItemsSource = programs;  
  29.   
  30. }  
And we have the model class as in the following:
  1. public class Programs  
  2. {  
  3. public Programs(string Program, bool IsChecked)  
  4. {  
  5. this.Program = Program;  
  6. this.IsChecked = IsChecked;  
  7. }  
  8. public string Program { getset; }  
  9. public bool IsChecked { getset; }  
  10. }  
Finally we can embed check boxes within the combo box in the DataGrid.

embed check boxes within combo box in DataGrid