Question

I have a ComboBox, bound to a DataTable. I’m trying to add an extra ComboBoxItem to the top of the list, where I can put a link to customize the list. Currently I am just inserting a dummy row to the top of my DataTable, and then using a DataTrigger on the ComboBox to make it appear correctly. However, I’m not quite getting the correct result.

I’ve tried two methods. In the first, my DataTrigger replaces the dummy item with a ControlTemplate, which contains a TextBlock.

<ComboBox IsEditable="True" Name="comboWell" ItemsSource="{Binding}" DisplayMemberPath="wellId">
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding wellId}" Value="(settings)">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ComboBoxItem">
                                <TextBlock Text="Customize..." />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

The result looks right, but there is no mouseover highlight on that item. The rest of the list works fine, but that one item doesn’t react at all when I mouse over it. I’ve tried adding extra triggers and styles to apply a mouseover effect, but I get no change.

The second method I tried was just to alter the appearance of the item rather than completely replace it with a ControlTemplate.

<ComboBox IsEditable="True" Name="comboWell" ItemsSource="{Binding}" DisplayMemberPath="wellId">
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding wellId}" Value="(settings)">
                    <Setter Property="Content" Value="Customize..." />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

This one functions like a regular list item, mouseover works fine. However, the item is blank. Neither the original text, nor the text I try to set in the DataTrigger, are there. No errors, just an empty list item.

Is there a better way to accomplish this?

Answer 1

Remove the DisplayMemberPath and add the default Content to the Style

<ComboBox IsEditable="True" Name="comboWell" ItemsSource="{Binding }">
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}">
            <Setter Property="Content" Value="{Binding wellId}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding wellId}" Value="(settings)">
                    <Setter Property="Content" Value="Customize..." />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

DisplayMemberPath is actually a shortcut way of saying the item template should just be a TextBlock with it’s Text bound to the DisplayMemberPath item, and I am guessing it was overwritting whatever you had in the Style.