RadComboBox

[Bob]

Greetings-
I am trying to tailor a RadComboBox to look behave visually like our mock ups. I have achieved about 80% of what I am looking to do, but I could use some assistance with the last part...as I am not even sure it is possible to do.


I would like the foreground color or font face to be white on the combo box, but have the list below it be black. The reason is that we have a dark gradient for the RadComboBox style, but a white background for the dropdown list. Is there any way to achieve this through the new version of the controls in Expression Blend or through XAML?

I have pasted my XAML for MainWindow and AppResources so you can see where I am at thus far.

Your help would be much appreciated.
Regards...

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    x:Class="Controls.MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot">
        <!--<telerik:RadGridView Style="{DynamicResource RadGridView}"></telerik:RadGridView-->

        <telerik:RadComboBox EmptyText="Please Select from List" Foreground="{DynamicResource ComboBoxText}" Height="25" Width="200" Style="{DynamicResource GreenComboBoxStyle}" FontWeight="Bold" Padding="5,0">
                <telerik:RadComboBoxItem Foreground="Black">Item One</telerik:RadComboBoxItem>
                <telerik:RadComboBoxItem Foreground="Black">Item Two</telerik:RadComboBoxItem>
                <telerik:RadComboBoxItem Foreground="Black">Item Three</telerik:RadComboBoxItem>
                <telerik:RadComboBoxItem Foreground="Black">Item Foure</telerik:RadComboBoxItem>
        </telerik:RadComboBox>

    </Grid>
</Window>

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls">

    <LinearGradientBrush x:Key="GreenComboBox" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF2E7015" Offset="0"/>
        <GradientStop Color="#FF5EAD42" Offset="1"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GreenComboBoxBorder" Color="#FFADADAD"/>

    <LinearGradientBrush x:Key="BlueGradientHeader" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF0387CE" Offset="0"/>
        <GradientStop Color="#FF95CDEB" Offset="1"/>
    </LinearGradientBrush>


    <Style x:Key="GreenComboBoxStyle" TargetType="{x:Type telerik:RadComboBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadComboBox}">
                    <Grid x:Name="VisualRoot">
                        <Border Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False"/>
                        <telerik:RadToggleButton x:Name="PART_DropDownButton" ClickMode="Press" IsTabStop="False" Margin="0" Padding="0">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                            <telerik:RadToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                                </ControlTemplate>
                            </telerik:RadToggleButton.Template>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="GreenComboBox" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDropDownOpen}" RenderFocused="{TemplateBinding IsFocused}" RenderEnabled="{TemplateBinding IsEnabled}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Telerik_Windows_Controls_Chromes:ButtonChrome>
                                <ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
                                    <ContentControl.Template>
                                        <ControlTemplate TargetType="{x:Type ContentControl}">
                                            <Grid Margin="5,0">
                                                <Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
                                                <Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </ContentControl.Template>
                                </ContentControl>
                                <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </telerik:RadToggleButton>
                        <Popup x:Name="PART_Popup" AllowsTransparency="True" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding MinDropDownWidth}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <telerik:RadButton x:Name="PART_ClearButton" Content="{TemplateBinding ClearSelectionButtonContent}" Margin="-1,-1,-1,0" Grid.Row="0" Visibility="{TemplateBinding ClearSelectionButtonVisibility}">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                    </telerik:RadButton>
                                    <ScrollViewer x:Name="PART_ScrollViewer" BorderThickness="0" CanContentScroll="True" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="Auto">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </Grid>
                            </Border>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="Content" Value="0.5"/>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="#FF8D8D8D"/>
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black"/>
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsDropDownOpen" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black"/>
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="EditableTemplate">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadComboBox}">
                    <Grid x:Name="VisualRoot">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="Background" Background="White" Grid.Column="0" CornerRadius="1,0,0,1" IsHitTestVisible="False"/>
                        <Border Background="{TemplateBinding Background}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False"/>
                        <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False"/>
                        <Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Opacity="0" Visibility="Collapsed"/>
                        <telerik:PickerTextBox x:Name="PART_EditableTextBox" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.Column="0" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{TemplateBinding IsReadOnly}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:PickerTextBox>
                        <Border x:Name="FocusVisual" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Visibility="Collapsed">
                            <Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0"/>
                        </Border>
                        <telerik:RadToggleButton x:Name="PART_DropDownButton" ClickMode="Press" Grid.Column="1" IsTabStop="False" Margin="0" Padding="0">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                            <telerik:RadToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                                </ControlTemplate>
                            </telerik:RadToggleButton.Template>
                            <Grid>
                                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="GreenComboBox" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0,1,1,0" RenderMouseOver="{Binding IsMouseOver, ElementName=PART_DropDownButton}" RenderPressed="{TemplateBinding IsDropDownOpen}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" RenderActive="{TemplateBinding IsMouseOver}" RenderEnabled="{TemplateBinding IsEnabled}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Telerik_Windows_Controls_Chromes:ButtonChrome>
                                <ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
                                    <ContentControl.Template>
                                        <ControlTemplate TargetType="{x:Type ContentControl}">
                                            <Grid Margin="5,0">
                                                <Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
                                                <Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </ContentControl.Template>
                                </ContentControl>
                            </Grid>
                        </telerik:RadToggleButton>
                        <TextBlock x:Name="Watermark" HorizontalAlignment="Left" IsHitTestVisible="False" Margin="5,0,0,0" Opacity="0.5" Text="{TemplateBinding EmptyText}" Visibility="Collapsed" VerticalAlignment="Center"/>
                        <Popup x:Name="PART_Popup" AllowsTransparency="True" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding MinDropDownWidth}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <telerik:RadButton x:Name="PART_ClearButton" Content="{TemplateBinding ClearSelectionButtonContent}" Margin="-1,-1,-1,0" Grid.Row="0" Visibility="{TemplateBinding ClearSelectionButtonVisibility}">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                    </telerik:RadButton>
                                    <ScrollViewer x:Name="PART_ScrollViewer" BorderThickness="0" CanContentScroll="True" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="Auto">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </Grid>
                            </Border>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="BorderBrush" TargetName="Border" Value="#FF989898"/>
                            <Setter Property="Foreground" TargetName="PART_EditableTextBox" Value="#FF8D8D8D"/>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="#FF8D8D8D"/>
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
                            <Setter Property="BorderBrush" TargetName="Border" Value="#FF989898"/>
                            <Setter Property="Background" TargetName="Background" Value="#FFE0E0E0"/>
                        </Trigger>
                        <Trigger Property="IsWatermarkVisible" Value="True">
                            <Setter Property="Visibility" TargetName="Watermark" Value="Visible"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.115" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.15" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.15">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black"/>
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsDropDownOpen" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="BorderBrush" TargetName="Border">
                                <Setter.Value>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FF282828"/>
                                        <GradientStop Color="#FF5F5F5F" Offset="1"/>
                                    </LinearGradientBrush>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black"/>
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsKeyboardFocusWithin" Value="True"/>
                                <Condition Property="IsDropDownOpen" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="NonEditableTemplate">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadComboBox}">
                    <Grid x:Name="VisualRoot">
                        <Border Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False"/>
                        <telerik:RadToggleButton x:Name="PART_DropDownButton" ClickMode="Press" IsTabStop="False" Margin="0" Padding="0" Background="{DynamicResource GreenComboBox}">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                            <telerik:RadToggleButton.Template>
                                <ControlTemplate TargetType="{x:Type telerik:RadToggleButton}">
                                    <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
                                </ControlTemplate>
                            </telerik:RadToggleButton.Template>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="GreenComboBox" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDropDownOpen}" RenderFocused="{TemplateBinding IsFocused}" RenderEnabled="{TemplateBinding IsEnabled}" Background="{DynamicResource GreenComboBox}">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </Telerik_Windows_Controls_Chromes:ButtonChrome>
                                <ContentControl x:Name="DropDownIcon" Background="White" Grid.Column="1" Foreground="Black" IsTabStop="False">
                                    <ContentControl.Template>
                                        <ControlTemplate TargetType="{x:Type ContentControl}">
                                            <Grid Margin="5,0">
                                                <Path x:Name="BackgroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Background}" Height="3" Margin="0,2,0,0" Stretch="Fill" Width="5"/>
                                                <Path x:Name="ForegroundIcon" Data="M0,0L2,0 1,1z" Fill="{TemplateBinding Foreground}" Height="3" Margin="0,1" Stretch="Fill" Width="5"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </ContentControl.Template>
                                </ContentControl>
                                <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </telerik:RadToggleButton>
                        <Popup x:Name="PART_Popup" AllowsTransparency="True" PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding MinDropDownWidth}">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="Auto"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <telerik:RadButton x:Name="PART_ClearButton" Content="{TemplateBinding ClearSelectionButtonContent}" Margin="-1,-1,-1,0" Grid.Row="0" Visibility="{TemplateBinding ClearSelectionButtonVisibility}" Background="{DynamicResource GreenComboBox}">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                    </telerik:RadButton>
                                    <ScrollViewer x:Name="PART_ScrollViewer" BorderThickness="0" CanContentScroll="True" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="Auto">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </Grid>
                            </Border>
                        </Popup>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="Content" Value="0.5"/>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="#FF8D8D8D"/>
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsMouseOver" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black"/>
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsEnabled" Value="True"/>
                                <Condition Property="IsDropDownOpen" Value="True"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Foreground" TargetName="DropDownIcon" Value="Black"/>
                            <Setter Property="Background" TargetName="DropDownIcon" Value="White"/>
                        </MultiTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="MinHeight" Value="22"/>
        <Setter Property="Padding" Value="4,0"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="#FFADADAD"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    </Style>


    <Style x:Key="RadGridView" TargetType="{x:Type telerik:RadGridView}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadGridView}">
                    <AdornerDecorator>
                        <Border x:Name="PART_MasterGridContainer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                            <Grid x:Name="HierrarchyBackground" Background="{TemplateBinding Background}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition/>
                                    <ColumnDefinition x:Name="ScrollBarColumn" MinWidth="0" Width="0"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition x:Name="PART_AttachedBehaviorRow" Height="Auto"/>
                                    <RowDefinition/>
                                    <RowDefinition x:Name="ScrollBarRow" Height="0" MinHeight="0"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <telerik:GridViewGroupPanel x:Name="PART_GroupPanel" BorderBrush="#FF848484" Background="{DynamicResource GreenComboBox}" Grid.ColumnSpan="2" Foreground="White" IsTabStop="False" Grid.Row="0" FontSize="14" FontFamily="Segoe UI">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </telerik:GridViewGroupPanel>
                                <telerik:GridViewScrollViewer x:Name="PART_ItemsScrollViewer" Background="Transparent" CanContentScroll="True" Grid.ColumnSpan="2" Grid.Row="2" Grid.RowSpan="2" Style="{DynamicResource GridViewScrollViewerStyle}">
                                    <telerik:GridViewScrollViewer.FooterRow>
                                        <telerik:GridViewFooterRow x:Name="PART_FooterRow" IsTabStop="False" IndentLevel="{TemplateBinding GroupCount}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:GridViewFooterRow>
                                    </telerik:GridViewScrollViewer.FooterRow>
                                    <telerik:GridViewScrollViewer.HeaderRow>
                                        <telerik:GridViewHeaderRow x:Name="PART_HeaderRow" IsTabStop="False" IndentLevel="{TemplateBinding GroupCount}" Background="{DynamicResource BlueGradientHeader}">
                                        </telerik:GridViewHeaderRow>
                                    </telerik:GridViewScrollViewer.HeaderRow>
                                    <telerik:GridViewScrollViewer.NewRow>
                                        <telerik:GridViewNewRow x:Name="PART_AddNewRow" IsTabStop="False" IndentLevel="{TemplateBinding GroupCount}" Visibility="Collapsed">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:GridViewNewRow>
                                    </telerik:GridViewScrollViewer.NewRow>

                                    <telerik:GridViewVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel"/>
                                </telerik:GridViewScrollViewer>
                                <telerik:ScrollPositionIndicator x:Name="PART_ScrollPositionIndicator" Grid.ColumnSpan="2" ContentTemplate="{TemplateBinding ScrollPositionIndicatorTemplate}" HorizontalAlignment="Right" IsHitTestVisible="False" IsTabStop="False" Margin="0,0,28,0" Grid.Row="2">

                                    <telerik:ScrollPositionIndicator.Visibility>
                                        <Binding Mode="TwoWay" Path="IsScrolling" RelativeSource="{RelativeSource TemplatedParent}">
                                            <Binding.Converter>
                                                <telerik:BooleanToVisibilityConverter/>
                                            </Binding.Converter>
                                        </Binding>
                                    </telerik:ScrollPositionIndicator.Visibility>
                                </telerik:ScrollPositionIndicator>
                                <Border x:Name="PART_FrozenColumnsPreview" Background="#33000000" HorizontalAlignment="Left" Grid.Row="1" Grid.RowSpan="4" Visibility="Collapsed" VerticalAlignment="Stretch" Width="6"/>
                                <telerik:GridViewLoadingIndicator x:Name="PART_GridViewLoadingIndicator" Grid.ColumnSpan="2" IsTabStop="False" Grid.RowSpan="4" Visibility="Collapsed">
                                    <telerik:StyleManager.Theme>
                                        <telerik:Office_BlackTheme/>
                                    </telerik:StyleManager.Theme>
                                </telerik:GridViewLoadingIndicator>
                            </Grid>
                        </Border>
                    </AdornerDecorator>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsBusy" Value="True">
                            <Setter Property="Visibility" TargetName="PART_GridViewLoadingIndicator" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsBusy" Value="False">
                            <Setter Property="Visibility" TargetName="PART_GridViewLoadingIndicator" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="ShowColumnFooters" Value="False">
                            <Setter Property="Visibility" TargetName="PART_FooterRow" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="ShowColumnHeaders" Value="False">
                            <Setter Property="Visibility" TargetName="PART_HeaderRow" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="ShowGroupPanel" Value="False">
                            <Setter Property="Visibility" TargetName="PART_GroupPanel" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="ComputedVerticalScrollBarVisibility" SourceName="PART_ItemsScrollViewer" Value="Collapsed">
                            <Setter Property="Width" TargetName="ScrollBarColumn" Value="0"/>
                        </Trigger>
                        <Trigger Property="ComputedHorizontalScrollBarVisibility" SourceName="PART_ItemsScrollViewer" Value="Collapsed">
                            <Setter Property="Height" TargetName="ScrollBarRow" Value="0"/>
                            <Setter Property="Grid.RowSpan" TargetName="PART_ItemsScrollViewer" Value="1"/>
                        </Trigger>
                        <Trigger Property="ShowInsertRow" Value="True">
                            <Setter Property="Visibility" TargetName="PART_AddNewRow" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="White"/>
        <Setter Property="BorderBrush" Value="#FF848484"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="AlternateRowBackground" Value="#FFF4F4F4"/>
        <Setter Property="VerticalGridLinesBrush" Value="#FFCBCBCB"/>
        <Setter Property="HorizontalGridLinesBrush" Value="#FFCBCBCB"/>
        <Setter Property="GroupPanelBackground">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFDFDFDF" Offset="1"/>
                    <GradientStop Color="#FFBABABA"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="GroupPanelForeground" Value="Black"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
    </Style>
    <Style x:Key="GridViewScrollViewerStyle" TargetType="{x:Type telerik:GridViewScrollViewer}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:GridViewScrollViewer}">
                    <Grid x:Name="PART_RootPanel" Background="{TemplateBinding Background}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" CanHorizontallyScroll="False" CanVerticallyScroll="False" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Grid.Row="2"/>
                        <ScrollBar x:Name="PART_VerticalScrollBar" BorderThickness="1,0,0,0" Grid.Column="1" IsTabStop="False" Maximum="{TemplateBinding ScrollableHeight}" Minimum="0" Orientation="Vertical" Grid.Row="0" Grid.RowSpan="4" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                        </ScrollBar>
                        <ScrollBar x:Name="PART_HorizontalScrollBar" BorderThickness="0,1,0,0" Grid.Column="0" IsTabStop="False" Maximum="{TemplateBinding ScrollableWidth}" Minimum="0" Orientation="Horizontal" Grid.Row="4" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                        </ScrollBar>
                        <Rectangle Grid.Column="1" Grid.Row="4">
                            <Rectangle.Fill>
                                <RadialGradientBrush Center="0,0" GradientOrigin="0,0" RadiusY="1" RadiusX="1">
                                    <GradientStop Color="#FF848484" Offset="0.066"/>
                                    <GradientStop Color="#FFBFBFBF" Offset="0.066"/>
                                    <GradientStop Color="#FFF0F0F0" Offset="0.29"/>
                                </RadialGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <SolidColorBrush x:Key="ComboBoxText" Color="White"/>
</ResourceDictionary>

[Dani]

Hi Bob,

You are using RadComboBox in its NonEditable state. Therefore you need to modify the NonEditableTemplate in GreenComboBoxStyle.

Search for the following ContentPresenter:

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

Change it to a ContentControl. Also, add a TemplateBinding to the Foreground property. That Element should now look like this:

<ContentControl x:Name="Content" Foreground="{TemplateBinding Foreground}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Content="{TemplateBinding SelectionBoxItem}" Grid.Column="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

Now your RadComboBox will pick up the foreground which you set in MainWindow, i.e. the ComboBoxText brush.

This functionality is not available by default because of performance precautions. But you can easily replace the ContentPresenter with a ContentControl to take advantage of the template bindings.

I hope this helps.

Greetings,
Dani
the Telerik team