How can I change the Foreground-Color of a selected item only?

3 Answers 144 Views
ComboBox
Peter
Top achievements
Rank 2
Iron
Iron
Veteran
Peter asked on 08 Dec 2021, 11:37 AM

Hello,

I want to change the text color (foreground) of the selected item in a combo box only. The rest of the control should stay as it is.

Can you help me with this?

regards,

Tobias

3 Answers, 1 is accepted

Sort by
1
Accepted
Stenly
Telerik team
answered on 09 Dec 2021, 01:24 PM

Hello Tobias,

Thank you for the clarification.

To achieve the wanted result, you could set a custom data template to the SelectionBoxTemplate property of the RadComboBox control. In this template, you could, for example, use a TextBlock element to visualize the selected item, as well as, control its foreground color via the Foreground property. The following code snippet  shows a sample implementation of a RadComboBox control, as well as a SelectionBoxTemplate:

<telerik:RadComboBox ItemsSource="{Binding Cars}" SelectedItem="{Binding SelectedCar}" DisplayMemberPath="Make">
	<telerik:RadComboBox.SelectionBoxTemplate>
		<DataTemplate>
			<TextBlock Text="{Binding Make}" Foreground="White"/>
		</DataTemplate>
	</telerik:RadComboBox.SelectionBoxTemplate>
</telerik:RadComboBox>

The result from the above code snippet is as follows:

I have attached a sample project for you to test, so, could you give it a try?

Regards,
Stenly
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.

0
Stenly
Telerik team
answered on 08 Dec 2021, 02:30 PM

Hello Tobias,

You could achieve the wanted result by creating a style that targets the RadComboBoxItem element. In the style, create a new Trigger for the IsSelected property with Value="True" and in it, set a Setter for the Foreground property with the desired color. After that, set the newly created style to the ItemContainerStyle property of the RadComboBox control.

<Style x:Key="MyForegroundStyle" TargetType="telerik:RadComboBoxItem">
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Foreground" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>  
<telerik:RadComboBox ItemContainerStyle="{StaticResource MyForegroundStyle}"/> 

Please note that if you use the NoXaml version of the assemblies, the above style would need to be based on the default one provided by the used theme, via the BasedOn property. Otherwise, the drop-down menu and its items would not be visible.

<Style x:Key="MyForegroundStyle" TargetType="telerik:RadComboBoxItem" BasedOn="{StaticResource RadComboBoxItemStyle}">

With that said, could you give this approach a try and let me know whether this works for you?

Regards,
Stenly
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.

0
Peter
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 09 Dec 2021, 07:42 AM

Hello Stenly,

thanks for your quick response.

Unfortunately that's not what I'm looking for. Now the selected item in the ItemContainer has the different foreground.
-> see attached file RadComboBox_Foreground_wrong.png

What I want is to change the foreground of the selected item when the combo box is closed.
-> see attached file RadComboBox_Foreground_correct.png

I've tried to set the ItemTemplate, but than all items in the ComboBox get the new color.

That's not working for me:

<telerik:RadComboBox.ItemTemplate>
    <DataTemplate>
        <ContentControl Content="{Binding Value}" Foreground="White"/>
    </DataTemplate>
</telerik:RadComboBox.ItemTemplate>

 

regards,

Tobias

Tags
ComboBox
Asked by
Peter
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Stenly
Telerik team
Peter
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or