ComboBox which filters depending on the input string

Editors for WPF Forum

The latest build of this product (v2020.1.1) was released 2 months ago, which was before this thread was created.
Posted 9 days ago by Daniel Constantin - ModuleWorks GmbH
Version: 19.1.0685
Avatar

Hi,

Inside actipro controls can I find control like a ComboBox which filters depending on the input string ?

Kind regads,

Daniel

Comments (9)

Answer - Posted 9 days ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Daniel,

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


Actipro Software Support

Posted 5 days ago by Daniel Constantin - ModuleWorks GmbH
Avatar

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

Posted 5 days ago by Daniel Constantin - ModuleWorks GmbH
Avatar

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>
Posted 5 days ago by Actipro Software Support - Cleveland, OH, USA
Avatar

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!


Actipro Software Support

Posted 4 days ago by Daniel Constantin - ModuleWorks GmbH
Avatar

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

Posted 4 days ago by Daniel Constantin - ModuleWorks GmbH
Avatar

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

Posted 4 days ago by Daniel Constantin - ModuleWorks GmbH
Avatar

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

[Modified 4 days ago]

Answer - Posted 4 days ago by Actipro Software Support - Cleveland, OH, USA
Avatar

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.


Actipro Software Support

Posted 3 days ago by Daniel Constantin - ModuleWorks GmbH
Avatar

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

Add Comment

Please log in to a validated account to post comments.