The items of the RadComboBox control flicker when scrolling and the Windows 11 theme is applied.
To work this around, a new Style with TargetType="RadComboBoxItem" could be created for the ItemContainerStyle property of RadComboBox. Then, set the BorderBrush and ThemeHelper.MouseOverBrush properties to "#F9F9F9".
xmlns:helpers="clr-namespace:Telerik.Windows.Controls.Theming.Helpers;assembly=Telerik.Windows.Controls"
<telerik:RadComboBox.ItemContainerStyle>
<Style TargetType="telerik:RadComboBoxItem">
<Setter Property="helpers:ThemeHelper.MouseOverBrush" Value="#F9F9F9" />
<Setter Property="BorderBrush" Value="#F9F9F9"/>
</Style>
</telerik:RadComboBox.ItemContainerStyle>
The selected items of the RadComboBox will not be displayed correctly if the ItemsSource is bound to a collection of enums that are converted via a custom EnumConverter.
Currently, you could work around this behavior by implementing a custom DataTemplate for the MultipleSelectionBoxTemplate property of RadComboBox:
<telerik:RadComboBox x:Name="comboBox"
AllowMultipleSelection="True">
<telerik:RadComboBox.MultipleSelectionBoxTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding ElementName=comboBox, Path=SelectedItems}"
AlternationCount="{Binding RelativeSource={RelativeSource Self}, Path=Items.Count}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="commaTextBlock" Text=", "/>
<TextBlock Text="{Binding}" HorizontalAlignment="Left"/>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Visibility" TargetName="commaTextBlock" Value="Collapsed" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</telerik:RadComboBox.MultipleSelectionBoxTemplate>
</telerik:RadComboBox>
Steps to Create Problem using EditableTextBoxTemplate_WPF sample project provided by Telerik:(modified project is zipped and attached just in case)
- Edit Example.xaml to add "AllowMultipleSelection="True":
<telerik:RadComboBox IsEditable="True" ItemsSource="{Binding Companies}" SelectAllTextEvent="None" FontFamily="Calibri" FontSize="14"
1) Run project
2) Click drop down button to see list in the drop down
3) Type "Global" (at this point it should autocomplete "Global Corporation")
4) Without clicking on anything or Press space bar to continue typing (type space character)
5) Typed text will disappear leaving only space character behind - At this point, nothing is selected.
This does NOT happen if typed text before space does NOT match with any item from the list.
This does NOT happen if AllowMultipleSelection set to false.
This does NOT happen if dropdown is NOT open while typing.
NullReferenceException appears when the multiple selection is enabled, items are selected and the Text property of the RadComboBox control becomes null.
To resolve this, you can override the OnTextChanged method of RadComboBox and replace the null value with an empty string.
public class CustomRadComboBox : RadComboBox
{
protected override void OnTextChanged(string oldValue, string newValue)
{
if (string.IsNullOrEmpty(newValue))
{
newValue = string.Empty;
Dispatcher.BeginInvoke(new Action(() =>
{
SelectedItems.Clear();
}));
}
base.OnTextChanged(oldValue, newValue);
}
}
In this case, the control is bound to a collection of strings. The collection contains equal string values. ("h1","h2","h1"). When the first item is selected and afterward we select the last one, will not trigger the SelectionChanged event. This behavior could be improved.
According to the following article, when the UpdateSelectionOnLostFocus property is set to True and you enter a text that cannot update the selection, once the control loses the focus, the typed text should stay in the textbox.
https://docs.telerik.com/devtools/wpf/controls/radcombobox/howto/perform-selection-only-lost-focus
However, this doesn't happen if an item is already selected. In this case, the searched text is cleared. If you do not have a selection, then the text stays on lost focus.
To work this around, you can cache the value of the RadComboBox's Text property in the PreviewLostKeyboardFocus event handler and then restore it in the LostFocus event handler.
private string textCache;
private void RadComboBox_PreviewLostKeyboardFocus(object sender, System.Windows.Input.KeyboardFocusChangedEventArgs e)
{
this.textCache = this.comboBox.Text;
}
private void RadComboBox_LostFocus(object sender, RoutedEventArgs e)
{
this.comboBox.Text = this.textCache;
}
The "{" character cannot be entered in the RadComboBox when the keyboard is German (Swiss).
As a wokaround, you can inherit the RadComboBox and override the HandleKeyDown method:
public class CustomRadComboBox : RadComboBox
{
protected override bool HandleKeyDown(Key systemKey, int platformKeyCode)
{
if(systemKey == Key.Oem5)
{
return false;
}
return base.HandleKeyDown(systemKey, platformKeyCode);
}
}
When the theme variation is changed in the VisualStudio2013 theme, the mouse over color is not updated.
As a workaround, we can reset the Template of the RadComboBox.
var template = this.comboBox.Template;
this.comboBox.Template = null;
this.comboBox.Template = template;
When you start navigating through the ribbon via the keytips or the arrow keys, and you get to a RadRibbonComboBox, this opens its drop down which contains RadRibbonComboBoxItems.
In this case the keyboard navigation (using the arrows) of the RadRibbonComboBox doesn't work. This happens because the ribbon navigation implementation interfere with the combobox navigation.
If the height of RadComboBox is set to a value smaller than 26px (in Office2013) then the content of the RadToggleButton presenting the selected content is clipped.
This was reproduced with the Office2013 theme.
To work this around set the MinHeight of the child RadToggleButton to the same MinHeight as RadComboBox.
private
void
RadComboBox_Loaded(
object
sender, RoutedEventArgs e)
{
var comboBox = (RadComboBox)sender;
var toggle = comboBox.FindChildByType<RadToggleButton>();
toggle.MinHeight = comboBox.MinHeight;
}
The following xaml code
<telerik:RadComboBox Margin="5"
ItemsSource="{Binding Path=AvailableServices}"
IsEditable="True"
Text="{Binding Path=Service, Mode=TwoWay}"/>
<ComboBox Margin="5"
ItemsSource="{Binding Path=AvailableServices}"
IsEditable="True"
Text="{Binding Path=Service, Mode=TwoWay}"/>
with this view model
public class ViewModel {
public ObservableCollection<string> AvailableServices { get; set; } = new ObservableCollection<string> { "UPS Standard", "UPS Express Saver", "UPS Express 12:00", "UPS Express" };
public string Service { get; set; } = "UPS Express";
}
produces the attached output.
The standard WPF ComboBox is set to "UPS Express" as expected while the RadComboBox shows "UPS Express Saver" which probably was incorrectly autocompleted.
It looks like the `Fluent` themes may not properly theme the Non-Editable RadComboBox control.
Within the default style for RadComboBox within Telerik.Windows.Controls.Input.xaml, there exists a RadToggleButton with the name "PART_DropDownButton" which is part of the main control template. This toggle button uses the style "NonEditableComboToggleButtonStyle", which then sets the toggle button template to the "NonEditableComboToggleButtonControlTemplate" control template.
This control template has a Border named "ToggleButtonBackground" where to background is set to a template binding. However, the NonEditableComboToggleButtonStyle does not set background, and it therefore leads to a control that looks like the attached image.
This can be fixed by overriding the RadComboBox style, but it isn't simple to set the background on the ToggleButton, so you need to create custom templates and style to do it.