ComboBox which filters depending on the input string

Hi Daniel,

We have an AutoCompleteBox control in the Editors product that can filter items based on typed text.

Hi,

I am trying to change the template of the AutoCompleteBox. My problem is that I cannot see the entire popup menu. Even with the unmodified control template, the popup menu is not visible.

Kind regards,

Daniel

This is the template:

 <ControlTemplate x:Key="ddd" TargetType="{x:Type editors:AutoCompleteBox}">
                    <Grid x:Name="rootGrid" SnapsToDevicePixels="True">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <shared:ElementChrome x:Name="chrome" BorderBrush="{TemplateBinding BorderBrush}" BackgroundHover="{DynamicResource {ComponentResourceKey ResourceId=EditBackgroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" BorderBrushDisabled="{DynamicResource {ComponentResourceKey ResourceId=EditBorderDisabledBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrushHover="{DynamicResource {ComponentResourceKey ResourceId=EditBorderHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" BackgroundDisabled="{DynamicResource {ComponentResourceKey ResourceId=EditBackgroundDisabledBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" BorderStyle="{DynamicResource {ComponentResourceKey ResourceId=EditElementChromeBorderStyleKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" Background="{TemplateBinding Background}" BackgroundFocused="{DynamicResource {ComponentResourceKey ResourceId=EditBackgroundFocusedBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" BorderBrushFocused="{DynamicResource {ComponentResourceKey ResourceId=EditBorderFocusedBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" Grid.ColumnSpan="2" CornerRadius="{TemplateBinding themes:ThemeProperties.CornerRadius}" IsAnimationEnabled="{TemplateBinding themes:ThemeProperties.IsAnimationEnabled}" SnapsToDevicePixels="True"/>
                        <shared:EmbeddedTextBox x:Name="PART_TextBox" CharacterCasing="{TemplateBinding CharacterCasing}" shared:HintProperties.Hint="{TemplateBinding PlaceholderText}" IsReadOnly="{TemplateBinding IsReadOnly}" Padding="{TemplateBinding Padding}">
                            <shared:EmbeddedTextBox.Margin>
                                <Binding ConverterParameter="Left,Top,Bottom" Path="BorderThickness" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <shared:ThicknessConverter AllowNegative="True" Multiplier="1"/>
                                    </Binding.Converter>
                                </Binding>
                            </shared:EmbeddedTextBox.Margin>
                        </shared:EmbeddedTextBox>
                        <StackPanel Grid.Column="1" Orientation="Horizontal">
                            <StackPanel.Margin>
                                <Binding ConverterParameter="Top,Right,Bottom" Path="BorderThickness" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <shared:ThicknessConverter AllowNegative="True" Multiplier="1"/>
                                    </Binding.Converter>
                                </Binding>
                            </StackPanel.Margin>
                            <Button x:Name="clearButton" Command="{Binding ClearCommand, RelativeSource={RelativeSource TemplatedParent}}">
                                <Button.Style>
                                    <Style TargetType="{x:Type ButtonBase}">
                                        <Setter Property="ContentTemplate">
                                            <Setter.Value>
                                                <DataTemplate>
                                                    <Path Data="M0.5,0.5L8.5,8.5 M0.5,8.5L8.5,0.5" Stroke="{Binding (TextElement.Foreground), RelativeSource={RelativeSource TemplatedParent}}"/>
                                                </DataTemplate>
                                            </Setter.Value>
                                        </Setter>
                                        <Style.BasedOn>
                                            <Style TargetType="{x:Type ButtonBase}">
                                                <Setter Property="Focusable" Value="False"/>
                                                <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
                                                <Setter Property="Foreground" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonForegroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                                <Setter Property="IsTabStop" Value="False"/>
                                                <Setter Property="MinWidth" Value="17"/>
                                                <Setter Property="VerticalAlignment" Value="Stretch"/>
                                                <Style.BasedOn>
                                                    <Style TargetType="{x:Type ButtonBase}">
                                                        <Setter Property="Background" Value="Transparent"/>
                                                        <Setter Property="BorderBrush" Value="Transparent"/>
                                                        <Setter Property="BorderThickness" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBorderNormalThicknessKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                        <Setter Property="Padding" Value="0"/>
                                                        <Setter Property="HorizontalAlignment" Value="Center"/>
                                                        <Setter Property="VerticalAlignment" Value="Center"/>
                                                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                                                        <Setter Property="VerticalContentAlignment" Value="Center"/>
                                                        <Setter Property="Focusable" Value="False"/>
                                                        <Setter Property="IsTabStop" Value="False"/>
                                                        <Setter Property="themes:ThemeProperties.DisabledOpacity" Value="0.4"/>
                                                        <Setter Property="SnapsToDevicePixels" Value="True"/>
                                                        <Setter Property="Template">
                                                            <Setter.Value>
                                                                <ControlTemplate TargetType="{x:Type ButtonBase}">
                                                                    <Border x:Name="outerBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding themes:ThemeProperties.CornerRadius}" SnapsToDevicePixels="True">
                                                                        <Grid>
                                                                            <Border x:Name="innerBorder" BorderBrush="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonInnerBorderNormalBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" BorderThickness="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBorderNormalThicknessKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" CornerRadius="{TemplateBinding themes:ThemeProperties.CornerRadius}" SnapsToDevicePixels="True"/>
                                                                            <shared:PixelSnapper VerticalRoundMode="CeilingToEven">
                                                                                <ContentPresenter x:Name="presenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                                            </shared:PixelSnapper>
                                                                        </Grid>
                                                                    </Border>
                                                                    <ControlTemplate.Triggers>
                                                                        <Trigger Property="ToggleButton.IsChecked" Value="True">
                                                                            <Setter Property="Background" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBackgroundCheckedNormalBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBorderCheckedNormalBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="innerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonInnerBorderCheckedNormalBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="TextElement.Foreground" TargetName="presenter" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonForegroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                        </Trigger>
                                                                        <Trigger Property="IsMouseOver" Value="True">
                                                                            <Setter Property="Background" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBackgroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBorderHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="innerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonInnerBorderHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="TextElement.Foreground" TargetName="presenter" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonForegroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                        </Trigger>
                                                                        <Trigger Property="IsKeyboardFocused" Value="True">
                                                                            <Setter Property="Background" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBackgroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBorderHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="innerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonInnerBorderHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="TextElement.Foreground" TargetName="presenter" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonForegroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                        </Trigger>
                                                                        <MultiTrigger>
                                                                            <MultiTrigger.Conditions>
                                                                                <Condition Property="IsMouseOver" Value="True"/>
                                                                                <Condition Property="ToggleButton.IsChecked" Value="True"/>
                                                                            </MultiTrigger.Conditions>
                                                                            <Setter Property="Background" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBackgroundCheckedHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBorderCheckedHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="innerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonInnerBorderCheckedHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="TextElement.Foreground" TargetName="presenter" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonForegroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                        </MultiTrigger>
                                                                        <MultiTrigger>
                                                                            <MultiTrigger.Conditions>
                                                                                <Condition Property="IsKeyboardFocused" Value="True"/>
                                                                                <Condition Property="ToggleButton.IsChecked" Value="True"/>
                                                                            </MultiTrigger.Conditions>
                                                                            <Setter Property="Background" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBackgroundCheckedHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBorderCheckedHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="innerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonInnerBorderCheckedHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="TextElement.Foreground" TargetName="presenter" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonForegroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                        </MultiTrigger>
                                                                        <Trigger Property="IsPressed" Value="True">
                                                                            <Setter Property="Background" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBackgroundPressedBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="outerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonBorderPressedBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="BorderBrush" TargetName="innerBorder" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonInnerBorderPressedBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                            <Setter Property="TextElement.Foreground" TargetName="presenter" Value="{DynamicResource {ComponentResourceKey ResourceId=ToolBarButtonForegroundHoverBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                                                                        </Trigger>
                                                                        <Trigger Property="IsEnabled" Value="False">
                                                                            <Setter Property="Opacity" TargetName="presenter" Value="{Binding (themes:ThemeProperties.DisabledOpacity), RelativeSource={RelativeSource TemplatedParent}}"/>
                                                                        </Trigger>
                                                                    </ControlTemplate.Triggers>
                                                                </ControlTemplate>
                                                            </Setter.Value>
                                                        </Setter>
                                                    </Style>
                                                </Style.BasedOn>
                                            </Style>
                                        </Style.BasedOn>
                                    </Style>
                                </Button.Style>
                                <Button.Visibility>
                                    <Binding Path="IsClearButtonVisible" RelativeSource="{RelativeSource TemplatedParent}">
                                        <Binding.Converter>
                                            <BooleanToVisibilityConverter/>
                                        </Binding.Converter>
                                    </Binding>
                                </Button.Visibility>
                            </Button>
                            <editors:DropDownButton x:Name="popupButton" IsChecked="{Binding IsPopupOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                <editors:DropDownButton.Visibility>
                                    <Binding Path="IsPopupButtonVisible" RelativeSource="{RelativeSource TemplatedParent}">
                                        <Binding.Converter>
                                            <BooleanToVisibilityConverter/>
                                        </Binding.Converter>
                                    </Binding>
                                </editors:DropDownButton.Visibility>
                            </editors:DropDownButton>
                        </StackPanel>
                        <Popup x:Name="PART_Popup" AllowsTransparency="True" Grid.ColumnSpan="2" IsOpen="{Binding IsPopupOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Bottom">
                            <shared:DropShadowChrome x:Name="shadow" Color="Transparent" MinWidth="{Binding ActualWidth, ElementName=rootGrid}">
                                <Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {ComponentResourceKey ResourceId=PopupBorderNormalBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" BorderThickness="{DynamicResource {ComponentResourceKey ResourceId=PopupBorderNormalThicknessKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" Background="{DynamicResource {ComponentResourceKey ResourceId=PopupBackgroundNormalBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}" MaxHeight="{TemplateBinding MaxPopupHeight}">
                                    <Grid RenderOptions.ClearTypeHint="Enabled">
                                        <editors:EmbeddedListBox x:Name="PART_Selector" BorderThickness="0" DisplayMemberPath="{TemplateBinding DisplayMemberPath}" ItemTemplate="{TemplateBinding ItemTemplate}" ItemContainerStyle="{TemplateBinding ItemContainerStyle}"/>
                                        <ContentPresenter x:Name="noItemsPresenter" ContentTemplate="{TemplateBinding NoItemsContentTemplate}" Content="{TemplateBinding NoItemsContent}" Visibility="Collapsed"/>
                                    </Grid>
                                </Border>
                            </shared:DropShadowChrome>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasItems" Value="False">
                            <Setter Property="Visibility" TargetName="PART_Selector" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="noItemsPresenter" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="True">
                            <Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/>
                            <Setter Property="Color" TargetName="shadow" Value="#71000000"/>
                        </Trigger>
                        <Trigger Property="themes:ThemeProperties.UseBackgroundStates" Value="False">
                            <Setter Property="BackgroundFocused" TargetName="chrome" Value="{x:Null}"/>
                            <Setter Property="BackgroundHover" TargetName="chrome" Value="{x:Null}"/>
                        </Trigger>
                        <Trigger Property="themes:ThemeProperties.UseBorderStates" Value="False">
                            <Setter Property="BorderBrushDisabled" TargetName="chrome" Value="{x:Null}"/>
                            <Setter Property="BorderBrushFocused" TargetName="chrome" Value="{x:Null}"/>
                            <Setter Property="BorderBrushHover" TargetName="chrome" Value="{x:Null}"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="themes:ThemeProperties.UseBorderStates" Value="False"/>
                                <Condition Property="BorderBrush" Value="Transparent"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderStyle" TargetName="chrome" Value="Default"/>
                        </MultiTrigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="State" TargetName="chrome" Value="Hover"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocusWithin" Value="True">
                            <Setter Property="State" TargetName="chrome" Value="Focused"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" TargetName="PART_TextBox" Value="{DynamicResource {ComponentResourceKey ResourceId=ControlForegroundDisabledBrushKey, TypeInTargetAssembly={x:Type themes:AssetResourceKeys}}}"/>
                            <Setter Property="State" TargetName="chrome" Value="Disabled"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>

Hi Daniel,

You mentioned that you "cannot see the entire popup menu" and that the "popup menu is not visible".  We aren't aware of any current issues.  Can you give more detail on those and tell us exactly how to reproduce it in one of our samples? 

Also since you indicated you are on v19.1, can you try it in the latest v20.1 build to see if that makes any difference?  Thanks!

Hi,

I am testing this inside the SampleApplication in this file: Actipro Software\WPF-Controls\v19.1.0685\SampleBrowser\ProductSamples\EditorsSamples\QuickStart\AutoCompleteBoxIntro

<editors:AutoCompleteBox x:Name="countryBox" Width="300" HorizontalAlignment="Left" 
												 PlaceholderText="Country" TextMemberPath="Name" DisplayMemberPath="Name" InputMode="ComboBox"
                                                 Template="{DynamicResource ddd}"
                                                 IsPopupOpenedOnFocus="True">
							<editors:AutoCompleteBox.DataFilter>
								<editors:AutoCompleteBoxStringFilter />
							</editors:AutoCompleteBox.DataFilter>
						</editors:AutoCompleteBox>

On line 302 :)

I will try to test also with version 20.1

Kind regards,

Daniel

Hi,

I tested with version 20.1.1 and it behaves the same. The popup menu is 2 pixels height.. Maybe that template breaks something.

Kind regads,

Daniel

Hi,

I added ItemsSource="{TemplateBinding ItemsSource}" to the PART_Selector EmbeddedListBox and now I can see the popup but the filter does not work.

Thanks,

Daniel

Hi Daniel,

Where did you get the template that you posted from?  I ask because it looks a bit different than our default.  If you used something like Blend, that doesn't always do a good job capturing third-party styles/templates.

If you are a WPF Studio customer, you can download the default styles/templates from your account.  Or if you've only licensed individual products, please write our support address with your license information and we'll send you the default styles/templates for Editors so that you have the proper one.

Hi,

I indeed I am using Blend to change the template. I think we have license for all the products on version 19.

I will talk with someone to download them.

Kind regards,

Daniel

Hi,

I created a custom control on top of the AutoCompleteBox. The behavior I want is that only when typing, the AutoCompleteBox to have the InputMode = AutoCompleteBoxInputMode.Search. When not typing the InputMode should be AutoCompleteBoxInputMode.ComboBox.

I override the OnTextChanged method and over there I am also setting the InputModel to Search but does not seem to work.

Kind regads,

Daniel

Hi Daniel,

The InputMode isn't really meant to be changed dynamically.  I'm not sure doing so in OnTextChanged would be a good place to do it anyhow since there are many scenarios that can cause the text to change, not just when the user is typing within it.