Unable to customize editable combo box style

[Srikar]

Hi,

 

I am using telerik version 2009.3.1314.1030. I have to customize the editable combo box style. I am facing some issue while customizing it (Please refer screen shot and below XAML for more details.).

<

 

 

UserControl

 

xmlns

 

 

="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

xmlns

 

 

:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

xmlns

 

 

:Telerik_Windows_Controls_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls" xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input" xmlns:System="clr-namespace:System;assembly=mscorlib"

 

x

 

 

:Class="SilverlightApplication1.MainPage"

 

 

 

xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

 

 

 

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"

 

Width

 

 

="640" Height="480">

 

 

 

 

<UserControl.Resources>

 

 

 

 

<SolidColorBrush x:Key="SelectionChrome_Highlight" Color="#FFDAD9D9"/>

 

 

 

 

<ControlTemplate x:Key="ComboBoxItem_HighlightChromeTemplate" TargetType="Telerik_Windows_Controls_Chromes:ButtonChrome">

 

 

 

 

<Border x:Name="Border">

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStatesGroup">

 

 

 

 

<VisualState x:Name="Normal"/>

 

 

 

 

<VisualState x:Name="MouseOver">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0:0:0" Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource SelectionChrome_Highlight}"/>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Pressed"/>

 

 

 

 

<VisualState x:Name="Disabled"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="FocuseStatesGroup">

 

 

 

 

<VisualState x:Name="Unfocused"/>

 

 

 

 

<VisualState x:Name="Focused"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

</Border>

 

 

 

 

</ControlTemplate>

 

 

 

 

<Style x:Key="ComboBoxItem_HighlightChromeStyle" TargetType="Telerik_Windows_Controls_Chromes:ButtonChrome">

 

 

 

 

<Setter Property="IsTabStop" Value="False"/>

 

 

 

 

<Setter Property="Template" Value="{StaticResource ComboBoxItem_HighlightChromeTemplate}"/>

 

 

 

 

</Style>

 

 

 

 

<Style x:Key="RadComboBoxItemStyle1" TargetType="telerikInput:RadComboBoxItem">

 

 

 

 

<Setter Property="MinHeight" Value="16"/>

 

 

 

 

<Setter Property="Margin" Value="0 0 0 1"/>

 

 

 

 

<Setter Property="Padding" Value="3 0"/>

 

 

 

 

<Setter Property="HorizontalContentAlignment" Value="Stretch"/>

 

 

 

 

<Setter Property="VerticalContentAlignment" Value="Center"/>

 

 

 

 

<Setter Property="Template">

 

 

 

 

<Setter.Value>

 

 

 

 

<ControlTemplate TargetType="telerikInput:RadComboBoxItem">

 

 

 

 

<Grid Background="#005E5D5D">

 

 

 

 

<VisualStateManager.VisualStateGroups>

 

 

 

 

<VisualStateGroup x:Name="CommonStates">

 

 

 

 

<VisualState x:Name="Normal"/>

 

 

 

 

<VisualState x:Name="MouseOver">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderMouseOver" Storyboard.TargetName="ButtonChrome">

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0:0:0">

 

 

 

 

<DiscreteObjectKeyFrame.Value>

 

 

 

 

<System:Boolean>True</System:Boolean>

 

 

 

 

</DiscreteObjectKeyFrame.Value>

 

 

 

 

</DiscreteObjectKeyFrame>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Disabled">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content">

 

 

 

 

<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0.33"/>

 

 

 

 

</DoubleAnimationUsingKeyFrames>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ButtonChrome" RenderEnabled="{TemplateBinding IsEnabled}" Style="{StaticResource ComboBoxItem_HighlightChromeStyle}" Foreground="#FF3D3B3B" BorderBrush="#FFADAAAD">

 

 

 

 

<Telerik_Windows_Controls_Chromes:ButtonChrome.Background>

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

<GradientStop Color="#FF474444" Offset="0"/>

 

 

 

 

<GradientStop Color="#FF1A1818" Offset="1"/>

 

 

 

 

<GradientStop Color="#FF1A1818" Offset="0.5"/>

 

 

 

 

<GradientStop Color="#FF1A1818" Offset="0.504"/>

 

 

 

 

</LinearGradientBrush>

 

 

 

 

</Telerik_Windows_Controls_Chromes:ButtonChrome.Background>

 

 

 

 

</Telerik_Windows_Controls_Chromes:ButtonChrome>

 

 

 

 

<ContentControl x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Foreground="#FFF7F3F3">

 

 

 

 

<ContentControl.Background>

 

 

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

 

 

<GradientStop Color="#FF4E4B4B" Offset="0"/>

 

 

 

 

<GradientStop Color="#FF252424" Offset="1"/>

 

 

 

 

</LinearGradientBrush>

 

 

 

 

</ContentControl.Background>

 

 

 

 

</ContentControl>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

 

 

 

</Setter.Value>

 

 

 

 

</Setter>

 

 

 

 

</Style>

 

 

 

 

 

 

 

</UserControl.Resources>

 

 

 

 

<Grid x:Name="LayoutRoot" Background="White">

 

 

 

 

<!--<telerikInput:RadComboBox HorizontalAlignment="Left" Margin="260,134,0,0" ItemsSource="{Binding SimilarItemsToCopy}" IsEditable="True" Style="{StaticResource RadCBStyle}" VerticalAlignment="Top" Foreground="#FFF1EBEB" Background="#FF2D2C2C" Width="155">

 

 

</telerikInput:RadComboBox>-->

 

 

 

<telerikInput:RadComboBox ItemsSource="{Binding SimilarItemsToCopy}" Background="Black" Foreground="Wheat" ItemContainerStyle="{StaticResource RadComboBoxItemStyle1}" Margin="260,177,235,271" />

 

 

 

 

 

</Grid>

 

</

 

 

UserControl>

 

Thanks
Srikar

[Dani]

Hello Srikar,

Let me first point out that the version you are using is very old. I would sugegst that you should upgrade to one of the latest version of RadComboBox for Silverlight. This is because the actual template is quite different than the one you are using.

Secondly, if you wish to customize the Editable control template of RadComboBox, your instance of RadComboBox should be IsEditable="True". Additionally, the Editable ControlTemplate should be present in your UserControl.Resources, because this the template that needs to be modified.

I prepared a basic sample for you that uses version 2011.3.1020.1040 and demonstrates how the Editable template of RadComboBox can be customized.

I hope this will be helpful.

All the best,
Dani
the Telerik team