Hello,
I have the below snippet which works fine until IsEditable="True" is added to the combo box control. Once this property is enabled, select one of the dropdown item, the text disappears. It doesn't show up as selected dropdown item. Please assist.
<ControlTemplate x:Key="TestComboBoxToggleButton" TargetType="ToggleButton"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="20" /> </Grid.ColumnDefinitions> <Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="0" BorderBrush="{StaticResource CommonColor}" BorderThickness="0" > </Border> <Border Grid.Column="0" CornerRadius="0" Margin="1" BorderBrush="#CCC" BorderThickness="0,0,0,0"> </Border> <Path x:Name="Arrow" Grid.Column="1" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/> </Grid> </ControlTemplate> <ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox"> <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" /> </ControlTemplate> <Style x:Key="{x:Type ComboBox}" TargetType="ComboBox"> <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> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition Width="20" /> </Grid.ColumnDefinitions> <Border x:Name="Bd" Grid.ColumnSpan="2" CornerRadius="0" BorderThickness="1" IsHitTestVisible="false" BorderBrush="{StaticResource CommonColor}"> <ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" /> </Border> <Path x:Name="ArrowIsDisabled" Grid.Column="1" Fill="Black" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/> <ToggleButton Name="ToggleButton" Template="{StaticResource TestComboBoxToggleButton}" Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"> </ToggleButton> <TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3,3,23,3" Focusable="True" Background="Transparent" 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="Transparent" BorderBrush="{StaticResource CommonColor}" BorderThickness="1" /> <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True"> <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /> </ScrollViewer> </Grid> </Popup> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
Hi Brian,
When the ComboBox is editable it uses the PART_EditableTextBox to display the selected item but the style template is setting the Visibility to "Hidden" so no text will render. You'll probably need a data trigger or something similar to change the Visibility property for PART_EditableTextBox when the IsEditable property is true. If you look at the Microsoft Documentation for ComboBox you'll see they use the VisualStateManager to control the Visibility of that TextBox. https://docs.microsoft.com/en-us/dotnet/framework/wpf/controls/combobox-styles-and-templates