Change selected foreground text

[Scott]

when I set the foreground color for a RadComboBox it only seems to change the forground color for the items in the drop down list. I would also like to change the color of the selected text in the text area of the combobox when the drop down is not selected.

For example, this code changes all items in the drop down to red but not the selected item, it is still black

<telerik:RadComboBox Foreground="Red" Grid.Row="3" Grid.Column="0" Margin="6,4">
    <telerik:RadComboBoxItem IsSelected="True">Item 1</telerik:RadComboBoxItem>
    <telerik:RadComboBoxItem>Item 2</telerik:RadComboBoxItem>
</telerik:RadComboBox>

I edited a copy of the style and I'm fiarly sure the line that shows the text is

<ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="8,0,4,0" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

but there is no forground option on this since ContentPresenter can display any type.

Any ideas?

[Dani]

Hi Scott,

If you are using the NonEditable template (which is the default one), the code snippet you referred to is exactly what you need. Change it from ContentPresenter to ContentControl and add a Foreground property.

If you are using the ComboBox with IsEditable="True", then defining a SelectionBoxTemplate can do the job for you:

<UserControl.Resources>
  <DataTemplate x:Key="SelectedCombo">
            <TextBlock Text="{Binding}" Foreground="Red" />
  </DataTemplate>
</UserControl.Resources>

<Grid x:Name="LayourRoot">
  <telerik:RadComboBox Width="200"
                             Foreground="Red"
                             VerticalAlignment="Center"   HorizontalAlignment="Center"
                             telerik:StyleManager.Theme="{StaticResource Theme}"
                             SelectionBoxTemplate="{StaticResource SelectedCombo}"
                             IsEditable="True">
            <telerik:RadComboBoxItem Content="Item 1" />
            <telerik:RadComboBoxItem Content="Item 2" />
            <telerik:RadComboBoxItem Content="Item 3" />
            <telerik:RadComboBoxItem Content="Item 4" />
            <telerik:RadComboBoxItem Content="Item 5" />

        </telerik:RadComboBox>
</Grid>

I hope this helps.

Sincerely yours,
Dani
the Telerik team

[Scott]

That did the trick. Thanks you very much for the very quick answer.

[Phil]

Your example shows how to change the foreground text color of a selected radcombobox item.  I want to be able to do the same thing but dynamically at run time depending on other characteristics.  In other words,  depending on which item is selected will determine if the selected items text forecolor should be changed.  I'd also like to be able to dynamically add a tool tip to the selected item as well.

Thank you.
Phil

[Dani]

Hello Phil,

You can use the same approach with some extra effort. To use a different foreground color of the text depending on the selected item, you can bind the Foreground property of the TextBlock to the SelectedIndex or the SelectedItem property of its parent with a Converter. The Converter will supply conditionally different foreground colors.

And if you wish to add a tooltip to the selected item, I would suggest that you add it to the RadComboBox itself in the standard way. In visual terms it is basically the same, but adding a tooltip to the RadComboBox is more natural.


All the best,
Dani
the Telerik team

[Francis]

Hi,

I have a RadComboBox that is as follows;

<telerik:RadComboBox ItemsSource="{Binding LevelOfActivityList}" SelectedItem="{Binding SelectedLevelOfActivity,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" MinWidth="200">
                                <telerik:RadComboBox.ItemTemplate>
                                    <DataTemplate>
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                </Grid.RowDefinitions>
                                                <TextBlock Grid.Row="0" Margin="3,0,0,0" HorizontalAlignment="Left" Text="{Binding Level,Mode=TwoWay}" FontWeight="Bold" />
                                                <TextBlock Grid.Row="1" Margin="3,0,0,0" HorizontalAlignment="Left" Text="{Binding Detail,Mode=TwoWay}" />
                                            </Grid>
                                    </DataTemplate>
                                </telerik:RadComboBox.ItemTemplate>
                                <telerik:RadComboBox.SelectionBoxTemplate>
                                    <DataTemplate>
                                            <Grid>
                                                <Grid.RowDefinitions>
                                                    <RowDefinition />
                                                    <RowDefinition />
                                                </Grid.RowDefinitions>
                                                <TextBlock Grid.Row="0" Margin="3,0,0,0" HorizontalAlignment="Left" Text="{Binding Level, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" FontWeight="Bold" />
                                            </Grid>
                                    </DataTemplate>
                                </telerik:RadComboBox.SelectionBoxTemplate>
                            </telerik:RadComboBox>

The LevelOfActivity object is a list that has two properties Level and detail. When I run the application I can select the level of activity okay and its just the level that is displayed on the combobox once I select, that is how I want it to work. My problem is when I set the level of activity from the viewmodel (am using MVVM), i.e SelectedLevelOfActivity.Level, the combobox remains blank, nothing is displayed. I am using RadControls for Silverlight Q1 2012. What am I doing wrong? How do I get the combobox to display what I set in the viewmodel? I have tried setting the IsEditable property to true, setting the TextSearch.TextPath and all but still have not got it to work. Please provide any and all the help you can I need to solve this.

Francis. 

[Dani]

Hi,

I am posting here a link to another forum thread of yours on the same topic.

All the best,
Dani
the Telerik team

[Sri]

Hi,

How to achieve conditional formatting in a RadCombobox (for a particular RadComboboxItem)?

See this example:

<telerik:RadComboBox
                    x:Name="cmbRecordset"
                    DisplayMemberPath="RecordsetName"
                    IsEnabled="{Binding IsVersionInfoControlsEnabled}"
                    ItemsSource="{Binding RecordsetList}"
                    SelectedItem="{Binding Path=SelectedRecordset, NotifyOnValidationError=True, ValidatesOnNotifyDataErrors=True, Mode=TwoWay}"
                    SelectedValuePath="RecordsetId">
                    <telerik:RadComboBox.Width>
                        <MultiBinding Converter="{converters:ComboBoxConverter}">
                            <Binding RelativeSource="{RelativeSource Self}" />
                            <Binding Path="RecordsetList" />
                        </MultiBinding>
                    </telerik:RadComboBox.Width>
                </telerik:RadComboBox>

So based one of the property value in the "RecordsetList" I would need to format the foreground color of an item in RadCombobox .

 

For RadGridView I was able to achieve that using this below code but not finding it easy for RadCombobox. Any help?

<telerik:ConditionalStyleSelector>
    <telerik:StyleRule Condition="ErrorCode=0">
         <Style BasedOn="{StaticResource GridViewRowStyle}" TargetType="telerik:GridViewRow">
               <Setter Property="Foreground" Value="Red" />
         </Style>
    </telerik:StyleRule>
</telerik:ConditionalStyleSelector>

ErrorCode=0 is the property value in RecordsetList that drives this conditional formatting.

 

Thanks

[Sri]

This is the code.. the conditional formatting <telerik:ConditionalStyleSelector> is not applying any format to the item. Can you pls tell what am I missing? Thanks

<telerik:RadComboBox
                    x:Name="cmbRecordset"
                    DisplayMemberPath="RecordsetName"
                    IsEnabled="{Binding IsVersionInfoControlsEnabled}"
                    ItemsSource="{Binding RecordsetList}"
                    SelectedItem="{Binding Path=SelectedRecordset, NotifyOnValidationError=True, ValidatesOnNotifyDataErrors=True, Mode=TwoWay}"
                    SelectedValuePath="RecordsetId">
                    <telerik:RadComboBox.Width>
                        <MultiBinding Converter="{converters:ComboBoxConverter}">
                            <Binding RelativeSource="{RelativeSource Self}" />
                            <Binding Path="RecordsetList" />
                        </MultiBinding>
                    </telerik:RadComboBox.Width>

                    <telerik:RadComboBox.ItemContainerStyleSelector>
                        <telerik:ConditionalStyleSelector>
                            <telerik:StyleRule Condition="MetricTypeId=1">
                                <Style TargetType="telerik:RadComboBoxItem">
                                    <Setter Property="Foreground" Value="Red" />
                                </Style>
                            </telerik:StyleRule>
                        </telerik:ConditionalStyleSelector>
                    </telerik:RadComboBox.ItemContainerStyleSelector>
                </telerik:RadComboBox>

[Sia]

Hello,

You need to use ItemContainerStyleSelector as shown in our help. In your case you will apply two different styles depending on the MetricTypeId property. Also it is very important to base the style on RadComboBoxItemStyle if you use implicit styles, as you did with the GridViewRowStyle:

<Style x:Key="EnableStyle" TargetType="telerik:RadComboBoxItem" BasedOn="{StaticResource RadComboBoxItemStyle}">
    <Setter Property="Foreground" Value="Black"/>
</Style>

<Style x:Key="DisableStyle" TargetType="telerik:RadComboBoxItem" BasedOn="{StaticResource RadComboBoxItemStyle}">
    <Setter Property="Foreground" Value="Gray"/>
</Style>

If this does not help, can you please send us a small project showing the specific scenario in your application.

Regards,
Sia
Progress Telerik

[Sri]

That worked. Thanks