Question

I am building a view in WPF, which is supposed to have a quite complex ComboBox, using MVVM pattern with Caliburn.Micro framework. I’m quite new to WPF and Caliburn and I hope I can find the right answer here.

This is what I imagine:

As you can see, it consists of different kinds of items and different child levels. Only items are selectable, not their groups. In addition to that, I would like to display two additional buttons on the combobox, that depend on the item group the selected item belongs to:

I know I could:

• Hardcode the combobox in XAML to look like this, but it doesn’t really work for me as I need to have the data in my view model.
• Programmatically define the control tree in my view model and bind my combobox’s content property to it. But it seems a bit wrong to create visuals in my view model.
• Create a view model (and a view) for combobox items and set various properties to control the way each of them looks.
• Create a completely new control, derived from ComboBox and implement this somehow.

As for the two buttons, I could probably put them on top of the combobox and control their visibility from the main view model.

Having considered all these options, I’m still not confident I know what I’m doing here.

Answer 1

You can restyle a ComboBox using templates to get the look you are after.
Here is a quick example:

XAML

<ComboBox Width="200" Height="30" ItemsSource="{Binding ItemList}">
    <ComboBox.ItemContainerStyle>
        <Style>
            <Setter Property="UIElement.IsEnabled" Value="{Binding IsSelectable}" />
        </Style>
    </ComboBox.ItemContainerStyle>
    <ComboBox.ItemTemplate>
        <DataTemplate >
            <StackPanel Orientation="Horizontal">
                <Image Name="ImageControl" Source="{Binding ImagePath}" Width="10" Height="10" />
                <Label Content="{Binding Name}" >
                    <Label.Style>
                        <Style TargetType="Label">
                            <Style.Triggers>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Foreground" Value="Black" />
                                    <Setter Property="FontWeight" Value="Bold" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </Label.Style>
                </Label>
            </StackPanel>
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding IsSelectable}" Value="False">
                    <Setter TargetName="ImageControl" Property="Visibility" Value="Collapsed" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

C#

// A class to hold my data for the combobox
public class Item
{
    public string Name { get; set; }
    public bool IsSelectable { get; set; }
    public string ImagePath { get; set; }
}

// In your datacontext
public ObservableCollection<Item> ItemList { get; set; }

public ComboBoxFun()
{
    ItemList = new ObservableCollection<Item>()
    {
        new Item() { ImagePath=@"/images/up.png", Name="Item Group 1", IsSelectable=false},
        new Item() { ImagePath=@"/images/up.png", Name="Item 1", IsSelectable=true},
        new Item() { ImagePath=@"/images/up.png", Name="Item 2", IsSelectable=true},
        new Item() { ImagePath=@"/images/up.png", Name="Item 3", IsSelectable=true},
        new Item() { ImagePath=@"/images/up.png", Name="Item Group 2", IsSelectable=false},
        new Item() { ImagePath=@"/images/up.png", Name="Item 1", IsSelectable=true},
        new Item() { ImagePath=@"/images/up.png", Name="Item 2", IsSelectable=true},
        new Item() { ImagePath=@"/images/up.png", Name="Item 3", IsSelectable=true}
    };

The only tricky part is that when you disable an item it will be styled as disabled, so you have to style the non-selectable items so they appear normal.

Here is my result:

You can select any non-group item, and it works like a normal ComboBox.
As for you buttons, you can simply control the visibility of them based on the selected item’s data.

Hope this helps.