Modify RadAutoCompleteBox DropDownItemTemplate or styles

1 Answer 20 Views
AutoCompleteBox ListBox
Paul
Top achievements
Rank 1
Veteran
Paul asked on 31 Aug 2021, 02:05 PM

I need to remove all Telerik styling. I've downloaded source code and replaced all templates and styles but the orange color persists. 

Inside the RadAutoCompleteBox I see a RadListBox named PART_ListBox which has a DropDownItemTemplate. I can't figure out how to utilize this. Here's an example:

<Border Background="White" BorderBrush="White">
   <TextBlock Background="White" Foreground="Black" Text="{Binding}" />
   <Border.Resources>
      <SolidColorBrush x:Key="ControlOuterBorder_Highlighted" Color="LightGray" />
      <SolidColorBrush x:Key="ControlInnerBorder_Highlighted" Color="LightGray" />
      <SolidColorBrush x:Key="ControlBackground_Highlighted" Color="#F6F6F6" />
      <SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="#F6F6F6" />
      <SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="#F6F6F6" />
      <SolidColorBrush x:Key="ControlSubItem_Background_Selected" Color="#F6F6F6" />
      <SolidColorBrush x:Key="ControlOuterBorder_Focused" Color="#F6F6F6" />
   </Border.Resources>
</Border>

Issues:

1. TextBlock still has an orange border on hover. I tried adding all the resources I could find in the Telerik source code to hopefully override this. No luck.

2. The text displays the class name. The {Binding} is calling ToString() on the class. I need to display the DisplayMemberPath. I can't do {Binding Name} because I have dozens of classes that could go in here.

Paul
Top achievements
Rank 1
Veteran
commented on 31 Aug 2021, 02:25 PM

I am just noticing that after implementing all this logic and styling the ListBox now contains all items. What should the ItemsSource be bound to? I had custom filtering implemented in it which was working. Now that I have added the template and bound ItemsSource to TemplateBinding ItemsSource, the filtering is ignored.

What I need: Dropdown box with red caret button in the right. This is implemented. Gray X to clear search text. This is implemented. New border and colors. This is implemented. Dropdown list needs to stop looking like Telerik. The scroll bar isn't standard Windows. the colors are orange on the border etc. I do not want a theme. 

Paul
Top achievements
Rank 1
Veteran
commented on 31 Aug 2021, 02:45 PM

Last comment. I did get the filtered items working. Still stuck on the rest.

ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadAutoCompleteBox}, Path=FilteredItems}"

1 Answer, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 03 Sep 2021, 09:09 AM

Hello Paul,

Thank you for the provided details.

Instead of using the source code, I would suggest extracting the template of the RadAutoCompleteBox control and RadListBox. RadListBox is used internally in the RadAutoComplateBox and you can't replace it with a standard ListBox. I have prepared a project which contains both controls templates. The project uses NoXAML binaries with the Office_Black theme applied. To remove the theme style of the ScrollViewer I have don't merged the System.Windows.xaml file. You can check the App.xaml file. 

Another approach would be to create a custom implicit style that targets ScrollViewer and set the default theme as demonstrated in the Setting a Theme on MS Controls help article. 

Upon reading your replies It seems that you have found a solution for your questions except the styling. Correct me if I'm wrong?

Regards,
Dinko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
AutoCompleteBox ListBox
Asked by
Paul
Top achievements
Rank 1
Veteran
Answers by
Dinko
Telerik team
Share this question
or