BarComboBox and item search questions

Themes, Shared, and Core Libraries for Avalonia Forum

Posted 25 days ago by Grzegorz Z
Avatar

I need a ComboBox with item search capability.

So I used actipro:BarComboBox (in a standard window, without ribbon). The code looks like this:


<actipro:BarComboBox
DisplayMemberBinding="{Binding Name}"
IsEditable="True"
IsUnmatchedTextAllowed="False"
ItemsSource="{Binding ModelAvailableLanguages}"
SelectedItem="{Binding ModelLanguage}"
TextMemberBinding="{Binding Name}"
UseMenuItemAppearance="True"/>

This correctly displays the selected value in the ComboBox, but upon opening the popup, the element's type name is displayed instead of the `Name` field value.

So I removed DisplayMemberBinding and added ItemTemplate:

<actipro:BarComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Margin="6" Text="{Binding Name}" />
</DataTemplate>
</actipro:BarComboBox.ItemTemplate>

This works, but I have questions:

1. Why doesn't DisplayMemberBinding work here, and is ItemTemplate necessary?
2. The popup's appearance differs from a standard ComboBox (with ModernTheme). What needs to change for a consistent look with ComboBox?
3. Is it possible for item searching to work in the open popup menu as well?

Comments (2)

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

Hello,

Keep in mind that BarComboBox doesn't inherit the native ComboBox and is intended to show gallery or menu items in its popup.  Thus its implementation is a little different from how a ComboBox works, since it can show much more advanced content layouts in its popup.

To answer your questions:

1) We don't have DisplayMemberBinding wired up to do anything at the moment, but can add that to the TODO list.  ItemTemplate will work.

2) Yes, the appearance is different since the popup shows gallery items by default.  I mocked up a clone of our ComboBoxItem theme for BarGalleryItem, and got the items looking similar to our native ComboBox theme.  I'll include that test below.

3) As long as you click to open the popup, I believe that focus still remains in the editable text portion of the BarComboBox, and you should be able to edit it and see auto-completion.

Here's a simple BarComboBox test using a custom ItemContainerTheme for a ComboBoxItem-like appearance.

<actipro:BarComboBox Width="200" ItemsSource="{actipro:DelimitedArray 'BarComboBox, Another Item'}" SelectedIndex="0" x:DataType="x:String" TextMemberBinding="{Binding Length}">
	<actipro:BarComboBox.Resources>
		<Thickness x:Key="{actipro:ThemeResourceKey MenuPopupPadding}">0</Thickness>
	</actipro:BarComboBox.Resources>
					
	<actipro:BarComboBox.ItemContainerTheme>
		<ControlTheme TargetType="actipro:BarGalleryItem">
			<Setter Property="Background" Value="Transparent" />
			<Setter Property="Foreground" Value="{actipro:ThemeResource ListItemForegroundBrush}" />
			<Setter Property="Padding" Value="{actipro:ThemeResource ListItemPadding}" />

			<Setter Property="Template">
				<ControlTemplate>

					<ContentPresenter
						x:Name="PART_ContentPresenter"
						Background="{TemplateBinding Background}"
						BorderBrush="{TemplateBinding BorderBrush}"
						BorderThickness="{TemplateBinding BorderThickness}"
						Content="{TemplateBinding Content}"
						ContentTemplate="{TemplateBinding ContentTemplate}"
						CornerRadius="{TemplateBinding CornerRadius}"
						Foreground="{TemplateBinding Foreground}"
						HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
						Padding="{TemplateBinding Padding}"
						VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
						/>

				</ControlTemplate>
			</Setter>

			<Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter, ^:highlighted /template/ ContentPresenter#PART_ContentPresenter">
				<Setter Property="Background" Value="{actipro:ThemeResource ListItemBackgroundBrushPointerOver}" />
			</Style>
			<Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
				<Setter Property="Background" Value="{actipro:ThemeResource ListItemBackgroundBrushPressed}" />
			</Style>
			<Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
				<Setter Property="Foreground" Value="{actipro:ThemeResource ListItemForegroundBrushDisabled}" />
			</Style>
			<Style Selector="^:selected /template/ ContentPresenter#PART_ContentPresenter">
				<Setter Property="Background" Value="{actipro:ThemeResource ListItemBackgroundBrushSelected}" />
				<Setter Property="Foreground" Value="{actipro:ThemeResource ListItemForegroundBrushSelected}" />
			</Style>
			<Style Selector="^:selected:pointerover /template/ ContentPresenter#PART_ContentPresenter, ^:selected:highlighted /template/ ContentPresenter#PART_ContentPresenter">
				<Setter Property="Background" Value="{actipro:ThemeResource ListItemBackgroundBrushSelectedPointerOver}" />
			</Style>
			<Style Selector="^:selected:pressed /template/ ContentPresenter#PART_ContentPresenter">
				<Setter Property="Background" Value="{actipro:ThemeResource ListItemBackgroundBrushSelectedPressed}" />
			</Style>
			<Style Selector="^:selected:disabled /template/ ContentPresenter#PART_ContentPresenter">
				<Setter Property="Foreground" Value="{actipro:ThemeResource ListItemForegroundBrushSelectedDisabled}" />
			</Style>
		</ControlTheme>
	</actipro:BarComboBox.ItemContainerTheme>
					
	<actipro:BarComboBox.ItemTemplate>
		<DataTemplate x:DataType="x:String">
			<TextBlock Text="{Binding Length}" />
		</DataTemplate>
	</actipro:BarComboBox.ItemTemplate>
</actipro:BarComboBox>


Actipro Software Support

Answer - Posted 23 days ago by Grzegorz Z
Avatar

Regarding 3: you're right. My popup was too large and covered the editable text, it was enough to limit its size.

Thanks for the information, great support!

Add Comment

Please log in to a validated account to post comments.