Consuming Complex Comboboxes WPF

Question

I want to have complex combobox with checkboxes, text, and may be a thumbnail. I have already looked at the following links which helped me alot while building complex comboboxes.

http://blogs.microsoft.co.il/blogs/justguy/archive/2009/01/19/wpf-combobox-with-checkboxes-as-items-it-will-even-update-on-the-fly.aspx

Looking for a WPF ComboBox with checkboxes

But, I can not find a way to consume these complex usercontol in my application. I am new to WPF, so any kind of demonstration support would be highly appreciated.

Dean, I was looking a solution of how to bind in code behind file with following example mentioned in an SO post earlier.

<ComboBox.ItemTemplate>
<DataTemplate>
    <StackPanel Orientation="Horizontal">
        <CheckBox IsChecked="{Binding IsSelected}"
                   Width="20" />
        <TextBlock Text="{Binding DayOfWeek}"
                   Width="100" />
    </StackPanel>
</DataTemplate>

So the question is, Do I need DataTable or something else to bind my list of Checkboxes and Titles with this combobox template? Thanks in Advance

Answer 1

A Combobox is an ItemsControl. All ItemsControls can be filled "hardcoded" with items or containers.

This adds a new entry in the combobox, and wrappes the string into an ItemsContainer, which is a ComboBoxItem.

<ComboBox>
    <sys:string>Hello</string>
<ComboBox>

Here we create a combobox item directly, and add its content to a string with the value "Hello"

<ComboBox>
    <ComboBoxItem Content="Hello"/>
<ComboBox>

Both look visually the same. Its important to understand that in the first case the ComboBox takes care of wrapping our, to the ComboBox unknown type string, into an ComboBoxItem, and uses a default DataTemplate to display it. The default DataTemplate will display a TextBlock and calls ToString() on the given data item.

Now to have dynamic data, we need a ObservableCollection with our data items.

    class Employee
    {
        public BitmapSource Picture {get;set;}
        public string Name{get;set}
    }

ObservableCollection<Employee> employees;
myComboBox.ItemsSource = employees;

We have a DataClass called Employee, an observable Collection which holds many of our dataitem, and set this collection as the ItemsSource. From this point on, our Combobox listens to changes to this collection. Like adding and removing Employees and automatically takes care of wrapping the new Employee into a ComboBoxItem. Everything is done automatically. The only thing we need to do is to provide a proper DataTemplate. The combobox doesn't know how to "display" an employee and thats exactly what a DataTemplate is for.

<DataTemplate x:Key="employeeTemplate">
    <StackPanel Orientation="Horizontal">
        <Image Source="{Binding Picture}"/>
        <TextBlock Text="{Binding Name}"/>
    </StackPanel>
</DataTemplate>

We know an employee is wrapped in a ComboBoxItem, and the ComboBoxItem uses a provided Datatemplate to display its data, which means that inside the DataTemplate we can use Binding to access all properties on the data item.

Hope that helps you.

Answer 2

to just answer your question. all you need is a collection of an object with at least 2 public properties (IsSelected as bool and DayOfWeek as string) and just set these collection as the itemssource. so all you need is a collection of such an object. just comment if you need an example.

ps: pls read through the www for wpf and binding to get the basics.

Answer 3

you could simple add the items directly

<ComboBox>
    <ComboBox.Items>
        <ComboBoxItem>
            <TextBlock Text="test text" />
        </ComboBoxItem>
        <ComboBoxItem>
            <CheckBox Content="test checkbox" />
        </ComboBoxItem>
        <ComboBoxItem>
            <Button Content="test button" />
        </ComboBoxItem>
    </ComboBox.Items>
</ComboBox>

or if you want to use ItemsSource, the a DataTemplateSelector would be required

<ComboBox>
    <ComboBox.ItemTemplateSelector>
        <local:MyCustomTemplateSelector />
    </ComboBox.ItemTemplateSelector>
</ComboBox>

here is a link that explains DataTemplateSelectors

http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.itemtemplateselector.aspx