Disable separator selection in data bound combo box in WPF

Question

I have a Combo Box that is databound. In this list, I need a separator. Since this is databound, I do something very similar to this post. My database returns the list, includes a '-' to mark where the separator needs to go, and the datatrigger makes this a separator.

<ComboBox Name="cbAction" Grid.Column="1" Grid.Row="0" Margin="5,2,5,2" DisplayMemberPath="Description" SelectedValuePath="Code" SelectionChanged="cbAction_SelectionChanged">
    <ComboBox.ItemContainerStyle>
        <Style TargetType="{x:Type ComboBoxItem}" BasedOn="{StaticResource {x:Type ComboBoxItem}}">
             <Style.Triggers>
                <DataTrigger Binding="{Binding Code}" Value="-">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                                <Separator HorizontalAlignment="Stretch" IsEnabled="False"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ComboBox.ItemContainerStyle>
</ComboBox>

This works mostly fine, other than the issue I have here, and a minor design problem (which I will put in another question).

When using the mouse, the user can not select the separator, which is correct. But if the user uses the up/down arrow to select items, they can select the separator. This is not the default behavior, which would skip over the separator.

How can I make this separator behave similar to the way it would be if your XAML had various ComboBoxItems and a Separator item (skipping over the separator when using the up and down keys)

+1 I've been trying to do something similar for several hours, but it's been almost impossible to find since I didn't know what to search for. This question (and answer) were exactly what I needed. — David Pement, Dec 07 '20 at 04:44

score 5 · Accepted Answer · answered Nov 24 '10 at 15:12

Instead of setting "Focusable" as suggested by Meleak, set "IsEnabled" to false instead in the Setter.

<DataTrigger Binding="{Binding Code}" Value="-"> 
    <Setter Property="IsEnabled" Value="False"/>
    <Setter Property="Template"> 
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
                <Separator HorizontalAlignment="Stretch"/> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</DataTrigger>

Setting the IsEnabled fixed this issue. – jmlumpkin Nov 24 '10 at 16:38 — jmlumpkin, Nov 24 '10 at 16:38

score 2 · Answer 2 · answered Nov 26 '10 at 10:59

I tried the suggestion mentioned above and I was still not able to get the separator. Instead it added a blank selectable entry in the combo box. Finally this is what worked for me.

I set the bound data item as NULL. And my XAML looks so:

<DataTrigger Binding="{Binding}" Value="{x:Null}">
    <Setter Property="IsEnabled" Value="False"/>
    <Setter Property="Template"> 
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
                <Separator HorizontalAlignment="Stretch"/> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</DataTrigger>

Fredrik Hedblad · Answer 3 · 2010-11-24T16:27:48.353

1

The selectable item is not the Separator itself but the ComboBoxItem containing a Separator.
Try to set Focusable="False" in the DataTrigger. This should make the ComboBoxItem "unselectable"

Update
Fixed Setter position

<DataTrigger Binding="{Binding Code}" Value="-"> 
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="Template"> 
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBoxItem}"> 
                <Separator HorizontalAlignment="Stretch" IsEnabled="False"/> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</DataTrigger>

edited Nov 24 '10 at 16:27

answered Nov 23 '10 at 22:19

Fredrik Hedblad

83,499
23
264
266

This does solve part of the problem, but not fully. If I have the combobox 'expanded', it no longer will select the separator with the arrow keys. But if the combobox is current tab stop if you will, and not expanded, the user can use the arrow keys to go up and down and still select the separator. – jmlumpkin Nov 24 '10 at 14:12
Ah yes, that's true, I only thought about the drop-down. For selection directly in the ComboBox you'll have to use IsEnabled instead of Focusable as karmicpuppet said. – Fredrik Hedblad Nov 24 '10 at 15:17

Disable separator selection in data bound combo box in WPF

3 Answers3

Linked