Unable to customize editable combo box style

2 posts, 0 answers
  1. Srikar
    Srikar avatar
    4 posts
    Member since:
    Jan 2011

    Posted 02 Nov 2011 Link to this post

    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
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 02 Nov 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft banner
Back to Top