WPF - Hide Selected Item / Text Box portion from Combobox Control

Question

I'm looking for a way to hide the Selected Item / Textbox portion of the wpf combobox, leaving only the drop down button so users can still interact with the list.

I cannot find a property to toggle this behaviour, I was curious to know if there is a way to change visibility of certain portions of this control?

If anyone has any suggestions, It'd be greatly appreciated.

Answer 1

The easiest way to hide the text part is probably to set the Width of the ComboBox :

<ComboBox Width="20" />

Otherwise, you could always define your own custom ControlTemplate and set the Template property to this one but this requires some more effort.

Answer 2

EDIT - To use the below code you will need to use ComboBoxStyleWithoutText as a style on your combobox

To achieve this I had to re-create a combo-box and edit the template itself whilst tweaking the individual styles to suit the colour scheme of our app.

This is the result

In the application

Please feel free to use the code below, it likely has some custom colours I've used from other dictionaries (Change these to whatever suits your app)

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Shared.xaml" />
    <ResourceDictionary Source="Colours.xaml" />
    <ResourceDictionary Source="Brushes.xaml" />
</ResourceDictionary.MergedDictionaries>

<!-- SimpleStyles: ComboBox -->
<ControlTemplate x:Key="ComboBoxToggleButton" 
                 TargetType="ToggleButton">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border x:Name="Border"
                Grid.ColumnSpan="2"
                CornerRadius="2"
                Background="{StaticResource ScreenBackgroundBrush}"
                BorderBrush="{StaticResource GridBorderBrush}"
                BorderThickness="2" />
        <Border Grid.Column="0"
                CornerRadius="2,0,0,2"
                Margin="1"
                Background="{StaticResource ScreenBackgroundBrush}"
                BorderBrush="{StaticResource GridBorderBrush}"
                BorderThickness="1,1,1,1" />
        <Path x:Name="Arrow"
              Grid.Column="1"
              Fill="{StaticResource SecondaryControlBrush}"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Data="M 0 0 L 4 4 L 8 0 Z" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="ToggleButton.IsMouseOver" 
                 Value="true">
            <Setter TargetName="Border" 
                    Property="Background" 
                    Value="{StaticResource DataGridHeaderRowBackgroundBrush}" />
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" 
                 Value="true">
            <Setter TargetName="Border"
                    Property="Background"
                    Value="{StaticResource DataGridHeaderRowBackgroundBrush}" />
        </Trigger>
        <Trigger Property="IsEnabled" 
                 Value="False">
            <Setter Property="Opacity" 
                    Value="0.25" />
            <Setter TargetName="Border" 
                    Property="Background" 
                    Value="{StaticResource DisabledBackgroundBrush}" />
            <Setter TargetName="Border" 
                    Property="BorderBrush" 
                    Value="{StaticResource DisabledBorderBrush}" />
            <Setter Property="Foreground" 
                    Value="{StaticResource DisabledForegroundBrush}" />
            <Setter TargetName="Arrow" 
                    Property="Fill" 
                    Value="{StaticResource DisabledForegroundBrush}" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="ComboBoxTextBox" 
                 TargetType="TextBox">
    <Border x:Name="PART_ContentHost" 
            Focusable="False" 
            Background="{TemplateBinding Background}" />
</ControlTemplate>

<Style x:Key="ComboBoxStyleWithoutText" TargetType="{x:Type ComboBox}">
    <Setter Property="SnapsToDevicePixels"                 Value="true" />
    <Setter Property="OverridesDefaultStyle"                 Value="true" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"                 Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility"                 Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll"                 Value="true" />
    <Setter Property="MinWidth"                 Value="0" />
    <Setter Property="MinHeight"                 Value="20" />
    <Setter Property="Background"                 Value="Green" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0"></ColumnDefinition>
                        <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
                    </Grid.ColumnDefinitions>
                    <ToggleButton Name="ToggleButton" 
                                  Template="{StaticResource ComboBoxToggleButton}" 
                                  Grid.Column="2" 
                                  Focusable="false" 
                                  IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" 
                                  ClickMode="Press">
                    </ToggleButton>
                    <ContentPresenter Name="ContentSite" 
                                      IsHitTestVisible="False" 
                                      Content="{TemplateBinding SelectionBoxItem}" 
                                      ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
                                      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                                      Margin="3,3,3,3" 
                                      VerticalAlignment="Center" 
                                      HorizontalAlignment="Left" />
                    <TextBox x:Name="PART_EditableTextBox" 
                             Style="{x:Null}" 
                             Template="{StaticResource ComboBoxTextBox}" 
                             HorizontalAlignment="Left" 
                             VerticalAlignment="Center" 
                             Margin="3,3,3,3" 
                             Focusable="True" 
                             Visibility="Hidden" 
                             IsReadOnly="{TemplateBinding IsReadOnly}" />
                    <Popup Name="Popup" 
                           Placement="Bottom" 
                           IsOpen="{TemplateBinding IsDropDownOpen}" 
                           AllowsTransparency="True" 
                           Focusable="False" 
                           PopupAnimation="Slide">
                        <Grid Name="DropDown" 
                              SnapsToDevicePixels="True" 
                              MinWidth="{TemplateBinding ActualWidth}" 
                              MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border x:Name="DropDownBorder" 
                                    Background="{StaticResource TextBoxBrush}" 
                                    BorderThickness="2" 
                                    BorderBrush="{StaticResource SolidBorderBrush}" />
                            <ScrollViewer Margin="4,6,2,2" 
                                          SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" 
                                            KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" 
                             Value="false">
                        <Setter TargetName="DropDownBorder" 
                                Property="MinHeight" 
                                Value="95" />
                    </Trigger>
                    <Trigger Property="IsEnabled" 
                             Value="false">
                        <Setter Property="Foreground" 
                                Value="{StaticResource DisabledForegroundBrush}" />
                    </Trigger>
                    <Trigger Property="IsGrouping" 
                             Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" 
                                Value="false" />
                    </Trigger>
                    <Trigger SourceName="Popup" 
                             Property="Popup.AllowsTransparency" 
                             Value="true">
                        <Setter TargetName="DropDownBorder" 
                                Property="CornerRadius" 
                                Value="4" />
                        <Setter TargetName="DropDownBorder" 
                                Property="Margin" 
                                Value="0,2,0,0" />
                    </Trigger>
                    <Trigger Property="IsEditable" 
                             Value="true">
                        <Setter Property="IsTabStop" 
                                Value="false" />
                        <Setter TargetName="PART_EditableTextBox" 
                                Property="Visibility" 
                                Value="Visible" />
                        <Setter TargetName="ContentSite" 
                                Property="Visibility" 
                                Value="Hidden" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
    </Style.Triggers>
</Style>

<Style x:Key="{x:Type ComboBox}" 
       TargetType="ComboBox">
    <Setter Property="SnapsToDevicePixels" 
            Value="true" />
    <Setter Property="OverridesDefaultStyle" 
            Value="true" />
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" 
            Value="Auto" />
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" 
            Value="Auto" />
    <Setter Property="ScrollViewer.CanContentScroll" 
            Value="true" />
    <Setter Property="MinWidth" 
            Value="120" />
    <Setter Property="MinHeight" 
            Value="20" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton Name="ToggleButton" 
                                  Template="{StaticResource ComboBoxToggleButton}" 
                                  Grid.Column="2" 
                                  Focusable="false" 
                                  IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" 
                                  ClickMode="Press">
                    </ToggleButton>
                    <ContentPresenter Name="ContentSite" 
                                      IsHitTestVisible="False" 
                                      Content="{TemplateBinding SelectionBoxItem}" 
                                      ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" 
                                      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                                      Margin="3,3,23,3" 
                                      VerticalAlignment="Center" 
                                      HorizontalAlignment="Left" />
                    <TextBox x:Name="PART_EditableTextBox" 
                             Style="{x:Null}" 
                             Template="{StaticResource ComboBoxTextBox}" 
                             HorizontalAlignment="Left" 
                             VerticalAlignment="Center" 
                             Margin="3,3,23,3" 
                             Focusable="True" 
                             Visibility="Hidden" 
                             IsReadOnly="{TemplateBinding IsReadOnly}" />
                    <Popup Name="Popup" 
                           Placement="Bottom" 
                           IsOpen="{TemplateBinding IsDropDownOpen}" 
                           AllowsTransparency="True" 
                           Focusable="False" 
                           PopupAnimation="Slide">
                        <Grid Name="DropDown" 
                              SnapsToDevicePixels="True" 
                              MinWidth="{TemplateBinding ActualWidth}" 
                              MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border x:Name="DropDownBorder" 
                                    Background="{StaticResource TextBoxBrush}" 
                                    BorderThickness="2" 
                                    BorderBrush="{StaticResource SolidBorderBrush}" />
                            <ScrollViewer Margin="4,6,4,6" 
                                          SnapsToDevicePixels="True">
                                <StackPanel IsItemsHost="True" 
                                            KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" 
                             Value="false">
                        <Setter TargetName="DropDownBorder" 
                                Property="MinHeight" 
                                Value="95" />
                    </Trigger>
                    <Trigger Property="IsEnabled" 
                             Value="false">
                        <Setter Property="Foreground" 
                                Value="{StaticResource DisabledForegroundBrush}" />
                    </Trigger>
                    <Trigger Property="IsGrouping" 
                             Value="true">
                        <Setter Property="ScrollViewer.CanContentScroll" 
                                Value="false" />
                    </Trigger>
                    <Trigger SourceName="Popup" 
                             Property="Popup.AllowsTransparency" 
                             Value="true">
                        <Setter TargetName="DropDownBorder" 
                                Property="CornerRadius" 
                                Value="4" />
                        <Setter TargetName="DropDownBorder" 
                                Property="Margin" 
                                Value="0,2,0,0" />
                    </Trigger>
                    <Trigger Property="IsEditable" 
                             Value="true">
                        <Setter Property="IsTabStop" 
                                Value="false" />
                        <Setter TargetName="PART_EditableTextBox" 
                                Property="Visibility" 
                                Value="Visible" />
                        <Setter TargetName="ContentSite" 
                                Property="Visibility" 
                                Value="Hidden" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
    </Style.Triggers>
</Style>

<!-- SimpleStyles: ComboBoxItem -->
<Style x:Key="{x:Type ComboBoxItem}" 
       TargetType="ComboBoxItem">
    <Setter Property="SnapsToDevicePixels" 
            Value="true" />
    <Setter Property="OverridesDefaultStyle" 
            Value="true" />
    <Setter Property="Background" 
            Value="{StaticResource ScreenBackgroundBrush}"/>
    <Setter Property="Foreground" 
            Value="{StaticResource PrimaryTextBrush}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBoxItem">
                <Border Name="Border" 
                        Padding="2" 
                        SnapsToDevicePixels="true">
                    <ContentPresenter />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsHighlighted" 
                             Value="true">
                        <Setter TargetName="Border"
                                Property="Background"
                                Value="{StaticResource DataGridRowSelectedBrush}" />
                        <Setter TargetName="Border"
                                Property="CornerRadius"
                                Value="2" />
                    </Trigger>
                    <Trigger Property="IsEnabled" 
                             Value="false">
                        <Setter Property="Foreground" 
                                Value="{StaticResource DisabledForegroundBrush}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>