Posted by: Zeeshan Amjad | November 30, 2009

Using Checkbox in Combo Box


Using checkbox in combo box is very much similar to using any other control. Here we are going to use data template to define the visual tree of each and individual items of the combo box. When defining the visual tree we are going to place text box along with check box inside the panel. Here we are using Stack panel and select horizontal orientation of stack panel.

Here is a XAML code of this.

  1: <Window x:Class="CheckBox.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Checked Box in Combo Box" Height="300" Width="300">
  5:     <Grid>
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition/>
  9:         </Grid.RowDefinitions>
 10:         
 11:         <ComboBox Name="cmb" Margin="5" Height="35" >
 12:             <ComboBox.ItemTemplate>
 13:                 <DataTemplate>
 14:                     <StackPanel Orientation="Horizontal">
 15:                         <CheckBox Margin="5" IsChecked="{Binding IsVisited}"/>
 16:                         <TextBlock Margin="5" Text="{Binding CityName}"/>
 17:                     </StackPanel>
 18: 
 19:                 </DataTemplate>
 20:             </ComboBox.ItemTemplate>
 21:         </ComboBox>
 22:     </Grid>
 23: </Window>
 24: 

We are defining one data structure with one Boolean and one string data type to store information about how which city we have already visited. Then we will display that information in side the combo box. Here is a C# code of the project.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace CheckBox
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {
 24:             InitializeComponent();
 25: 
 26:             List<TripInfo> tripList = new List<TripInfo>();
 27: 
 28:             tripList.Add(new TripInfo(false, "Miami"));
 29:             tripList.Add(new TripInfo(true, "Boston"));
 30:             tripList.Add(new TripInfo(true, "Los Angeles"));
 31:             tripList.Add(new TripInfo(true, "Houston"));
 32:             tripList.Add(new TripInfo(false, "Dallas"));
 33:             tripList.Add(new TripInfo(false, "Atlantic City"));
 34:             tripList.Add(new TripInfo(true, "Chicago"));
 35: 
 36:             cmb.ItemsSource = tripList;
 37:         }
 38:     }
 39: 
 40:     public class TripInfo
 41:     {
 42:         public TripInfo(bool isVisited, string cityName)
 43:         {
 44:             IsVisited = isVisited;
 45:             CityName = cityName;
 46:         }
 47: 
 48:         public Boolean IsVisited
 49:         { get; set; }
 50: 
 51:         public String CityName
 52:         { get; set; }
 53:     }
 54: }
 55: 

Here is the output of this program.

CheckBoxComboBox

Advertisements

Responses

  1. […] checkbox in list box We can add the check box in list box just like we did with combo box. We have to define the data template for the listbox item. Here is a complete XAML code of this […]

  2. how do you clear all the checkbox for a button “Clear All”?

    • Its quite simple. First instead of using List, it would be better to use ObservableCollection.

      ObservableCollection tripList = new ObservableCollection();

      Then traverse through the collection and set the IsVisited property to false for all items inside the collection.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: