Problem while styling the RadComboBox

[Evelyn]

Hello, I am trying to stylize a combo box to look like the "Combo.png" image, but I am facing some problems.

The image "Combo atual.png" shows the farest I could go, but there's some problems:
- There is no border;
- I can only open the combo box popup, by clicking on the DropDownIcon, and I would like to opent it, by clicking on the entire component.


So, I would like a transparent/white combobox that I can open and close the popup, by clinking wherever I want inside the component, like the non stylized telerik combobox.



Notice that the gi:GIComboBox, is a component of mine that inherits the RadComboBox. So, it is the same as use "telerik:RadComboBox".

Can anyone help me to figure it out?

Here is my code:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    xmlns:Telerik_Windows_Controls_MaskedTextBox="clr-namespace:Telerik.Windows.Controls.MaskedTextBox;assembly=Telerik.Windows.Controls.Input"
    xmlns:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:Telerik_Windows_Controls_MaskedInput="clr-namespace:Telerik.Windows.Controls.MaskedInput;assembly=Telerik.Windows.Controls.Input"
    xmlns:Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"
    xmlns:gi="clr-namespace:NL.GI.ComponentesWPF.Cliente">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/System.Windows.xaml" />
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/Telerik.Windows.Controls.xaml" />
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/Telerik.Windows.Controls.Input.xaml" />
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/Telerik.Windows.Controls.GridView.xaml" />
        <ResourceDictionary Source="/NL.GI.ComponentesWPF.Cliente;component/Themes/GIBase.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <Style x:Key="GIComboBoxStyle" TargetType="{x:Type gi:GIComboBox}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type gi:GIComboBox}">
                    <Grid x:Name="VisualRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF8D8D8D"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderEnabled" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>False</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledBorder">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderMouseOver" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>True</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DropDownOpen">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False"/>
                        <telerik:RadToggleButton x:Name="PART_DropDownButton" BorderBrush="Black" ClickMode="Press" Foreground="{TemplateBinding Foreground}" IsTabStop="False" InnerCornerRadius="0" 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>
                                <Border x:Name="DisabledBorder" BorderBrush="#FF989898" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
                                <Chromes:ButtonChrome x:Name="ButtonChrome" 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>
                                </Chromes:ButtonChrome>
                                <Border Background="{TemplateBinding Background}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Margin="1"/>
                                <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">
                            <Grid x:Name="PopupRoot">
                                <Border x:Name="PART_ResizeBorder" 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}" InnerCornerRadius="0" 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" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                            <ItemsPresenter/>
                                        </ScrollViewer>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="EditableTemplate">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type gi:GIComboBox}">
                    <Grid x:Name="VisualRoot">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF989898"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.05">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderEnabled" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>False</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_EditableTextBox"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF8D8D8D"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FFE0E0E0"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Background">
                                            <LinearDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal">
                                    <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>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderActive" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>True</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <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>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DropDownOpen">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                        <GradientStop Color="#FF282828"/>
                                                        <GradientStop Color="#FF5F5F5F" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual">
                                            <LinearDoubleKeyFrame KeyTime="0:0:0.05" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.05">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderFocused" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>True</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0.15">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="WatermarkStates">
                                <VisualState x:Name="WatermarkVisible">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Watermark">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="WatermarkInvisible"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <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" Margin="1"/>
                        <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"/>
                        <TextBox x:Name="PART_EditableTextBox" BorderBrush="Transparent" BorderThickness="0" Background="Transparent" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{TemplateBinding IsReadOnly}" Margin="1,1,0,1" Padding="{TemplateBinding Padding}" VerticalAlignment="Center" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                            <TextBox.Template>
                                <ControlTemplate TargetType="{x:Type TextBox}">
                                    <Grid>
                                        <ScrollViewer x:Name="PART_ContentHost" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsTabStop="False" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="Auto" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </ScrollViewer>
                                    </Grid>
                                </ControlTemplate>
                            </TextBox.Template>
                        </TextBox>
                        <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" InnerCornerRadius="0" 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>
                                <Chromes:ButtonChrome x:Name="ButtonChrome" 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>
                                </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">
                            <Grid x:Name="PopupRoot">
                                <Border x:Name="PART_ResizeBorder" 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}" InnerCornerRadius="0" 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" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                            <ItemsPresenter/>
                                        </ScrollViewer>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="NonEditableTemplate">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type gi:GIComboBox}">
                    <Grid x:Name="VisualRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FF8D8D8D"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderEnabled" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>False</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledBorder">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderMouseOver" Storyboard.TargetName="ButtonChrome">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <System:Boolean>True</System:Boolean>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="DropDownOpen">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="Black"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="DropDownIcon">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="White"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border Background="{TemplateBinding Background}" CornerRadius="1" IsHitTestVisible="False"/>
                        <telerik:RadToggleButton BorderBrush="Black" x:Name="PART_DropDownButton" ClickMode="Press" Foreground="{TemplateBinding Foreground}" IsTabStop="False" InnerCornerRadius="0" 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>
                                <Border x:Name="DisabledBorder" BorderBrush="#FF989898" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
                                <Chromes:ButtonChrome x:Name="ButtonChrome" 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>
                                </Chromes:ButtonChrome>
                                <Border Background="{TemplateBinding Background}" Grid.ColumnSpan="2" CornerRadius="1" IsHitTestVisible="False" Margin="1"/>
                                <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">
                            <Grid x:Name="PopupRoot">
                                <Border x:Name="PART_ResizeBorder" 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}" InnerCornerRadius="0" 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" Foreground="{TemplateBinding Foreground}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                            <ItemsPresenter/>
                                        </ScrollViewer>
                                    </Grid>
                                </Border>
                            </Grid>
                        </Popup>
                    </Grid>
                </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="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="BorderBrush" Value="#FF848484"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Cursor" Value="Hand" />
    </Style>

</ResourceDictionary>

 

 

Thank you

[Evelyn]

I forgot to ask: what's the difference between the properties Template, EditableTemplate and NonEditableTemplate. I read the documentation, but I couldn't understand the diferrence

[Masha]

Hi Evelyn,

In order to modify the ControlTemplate of RadComboBox you need to use NonEditableTemplate and EditableTemplate properties. The NonEditableTemplate is is the default  RadComboBox control template and you need to use it instead of the Template property. The main difference between both templates is when IsEditable property of RadComboBox is set to true you can write inside the control. That's why it uses another control template where there is a TextBox property inside it.

I hope it helps.

Regards,
Masha
Telerik