[Solved] background colour on autobox items

[Kieran C]

Hi,

I have the below autocomplete box...when the user starts typing it shows the names on a blue background...where can I change the colour for this?

Thanks for your help.


  <telerikInput:RadAutoCompleteBox x:Name="radboxClients" Width="360" VerticalAlignment="Top"
                FilterMode="Contains"    SelectionChanged="radboxClients_SelectionChanged" Watermark="type customer..." />

[Dimitrina]

Hello Kieran,

Please find an attached project  that demonstrates this scenario.

If you want to learn more on how to change the brushes in our controls, please examine the following articles: 

Telerik Named Brushes
Resolving Telerik named resources

I hope this helps. Let us know if you have further questions.

Regards,
Dimitrina
Telerik

 

 

[Kieran C]

Hi,

Thanks for your reply...I was looking to change the background colour when a user is selecting an item in the dropdown rather than the text in the dropdown.
But I have been looking at the named brushes and I can see the one which does this - TelerikAutoCompleteBoxSelectorSelectedItemBackgroundBrush

So following the documentation I have added the below line to my resources dictionary -

[Kieran C]

sorry posted reply by mistake.

  <SolidColorBrush x:Key="TelerikAutoCompleteBoxSelectorSelectedItemBackgroundBrush" Color="DarkCyan" />

In my app.xaml I have the below -

<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///Telerik.UI.Xaml.Input/Themes/ThemeResourcesDark.xaml"/>

</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ms-appx:///Telerik.UI.Xaml.Input/Themes/ThemeResourcesLight.xaml"/>

</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

But the background of the auto box is still the same even though i have requested the theme on the page.

Is there something obvious i am missing?
​

[Dimitrina]

Hi Kieran,

Please find attached a project that demonstrates how to change the selected background brush of the AutoCompleteBox control.

I hope this helps. Let us know if you have further questions.

Regards,
Dimitrina
Telerik

 

 

[Kieran C]

Hi Dimitrina,

I do not see a project attached to your post.

Kieran

[Dimitrina]

Hi Kieran,

Please accept my apology for omitting the project. You can now find it attached to this response. Let me know if it helps.

Regards,
Dimitrina
Telerik

 

 

[Kieran C]

Hi Dimitrina,

Thanks for that but unless I am missing something this seems to be the same code as previously posted.  This code changes the colour of the text in every row which the user has entered i.e. if the user enters mm then MM in each row will be highlighted in this colour.

  <TextBlock Text="{Binding}"
                               telerikInput:RadAutoCompleteBox.IsTextMatchHighlightEnabled="True">
                          <telerikInput:RadAutoCompleteBox.TextMatchHighlightStyle>
                              <telerikInput:HighlightStyle Foreground="#669900" FontSize="21"/>
                          </telerikInput:RadAutoCompleteBox.TextMatchHighlightStyle>
                    </TextBlock> 

However I am looking to change the background when the user hovers over a row.  By default this row appears a medium blue colour...so whenever you move the mouse over a row in the dropdown then the entire background for that row changes to this blue.

Thanks for your help on this.

[Dimitrina]

Hi Kieran,

In order to change brushes of PointerHover state you have to edit the item template of the SuggestionItem, part of  the AutoCompleteBox control. The brush which you want to change is the same for the PointerOver state and the Selected state.

Please find an attached project that demonstrate this scenario. 

Regards,
Dimitrina
Telerik

 

 

[Kieran C]

Dimitrina,

Thanks for all your help on this...have it working perfectly now!
​