This is a migrated thread and some comments may be shown as answers.

RadComboBox template Metro theme issue

4 Answers 305 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Erik asked on 12 Jun 2012, 09:31 PM

In the xaml file below I have two RadComboBoxes: In the top one I set the theme to MetroTheme. For the bottom RadComboBox, in Blend I selected "Edit Template", "Edit a copy", and in the template I replaced all occurrences of the office_black theme with the Metro theme.
The top combobox works as expected, but the bottom one doesn't respond to mouse input and doesn't look right. Is this a bug or am I doing something wrong?

I use version 2012.2.607.40

<Window

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_Chromes="clr-namespace:Telerik.Windows.Controls.Chromes;assembly=Telerik.Windows.Controls"

x:Class="RadComboBoxStyle.MainWindow"

Title="MainWindow" Height="350" Width="525">

<Window.Resources>

<Style x:Key="RadComboBoxStyle" TargetType="{x:Type telerik:RadComboBox}">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadComboBox}">

<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>

</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" ClickMode="Press" Foreground="{TemplateBinding Foreground}" IsTabStop="False" InnerCornerRadius="0" Margin="0" Padding="0">

<telerik:StyleManager.Theme>

<telerik:MetroTheme/>

</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="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:MetroTheme/>

</telerik:StyleManager.Theme>

</Telerik_Windows_Controls_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 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:MetroTheme/>

</telerik:StyleManager.Theme>

</telerik:RadButton>

<ScrollViewer x:Name="PART_ScrollViewer" BorderThickness="0" CanContentScroll="True" Foreground="{TemplateBinding Foreground}" Padding="0,1,0,0" Grid.Row="1" VerticalScrollBarVisibility="Auto">

<telerik:StyleManager.Theme>

<telerik:MetroTheme/>

</telerik:StyleManager.Theme>

<ItemsPresenter/>

</ScrollViewer>

</Grid>

</Border>

</Grid>

</Popup>

</Grid>

</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>

<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.5" 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>

</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:MetroTheme/>

</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:MetroTheme/>

</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="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:MetroTheme/>

</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">

<Grid x:Name="PopupRoot">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<telerik:StyleManager.Theme>

<telerik:MetroTheme/>

</telerik:StyleManager.Theme>

</telerik:RadButton>

<telerik:StyleManager.Theme>

<telerik:MetroTheme/>

</telerik:StyleManager.Theme>

<ItemsPresenter/>

</ScrollViewer>

</Grid>

</Border>

</Grid>

</Popup>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

<Setter Property="NonEditableTemplate">

<Setter.Value>

<ControlTemplate TargetType="{x:Type telerik:RadComboBox}">

<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>

</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" ClickMode="Press" Foreground="{TemplateBinding Foreground}" IsTabStop="False" InnerCornerRadius="0" Margin="0" Padding="0">

<telerik:StyleManager.Theme>

<telerik:MetroTheme/>

</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:StyleManager.Theme>

<telerik:MetroTheme/>

</telerik:StyleManager.Theme>

</Telerik_Windows_Controls_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>

</Grid>

</telerik:RadToggleButton>

<Popup x:Name="PART_Popup">

<Grid x:Name="PopupRoot">

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<telerik:StyleManager.Theme>

<telerik:MetroTheme/>

</telerik:StyleManager.Theme>

</telerik:RadButton>

<telerik:StyleManager.Theme>

<telerik:MetroTheme/>

</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="SnapsToDevicePixels" Value="True"/>

<Setter Property="FocusVisualStyle" Value="{x:Null}"/>

</Style>

</Window.Resources>

<Grid HorizontalAlignment="Left" VerticalAlignment="Top">

<StackPanel>

<telerik:RadComboBox

ItemsSource="{Binding MyItems}"

SelectedItem="{Binding SelectedItem}"

Width="200">

<telerik:StyleManager.Theme>

<telerik:MetroTheme/>

</telerik:StyleManager.Theme>

</telerik:RadComboBox>

<telerik:RadComboBox

ItemsSource="{Binding MyItems}"

SelectedItem="{Binding SelectedItem}"

Width="200"

Style="{DynamicResource RadComboBoxStyle}" />

</StackPanel>

</Grid>

</Window>

4 Answers, 1 is accepted

answered on 13 Jun 2012, 06:54 AM

Hello Erik,

Expression Blend will only generate the default Office Black theme template and resources for RadComboBox. If you need to modify the Metro style for RadComboBox, you should obtain the style from your local RadControls installation folder.

The templates in Office Black and in Metro are quite different and so only changing the StaticResource to Metro will not help make it work. You need the Metro style for the control.

I hope this helps.

All the best,
Dani
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Accepted

answered on 14 Jun 2012, 07:44 AM

Hi Erik,

The Metro theme xaml for RadComboBox can be found in the Theme.Implicit subfolder of your local RadControls installation folder. Drill down to find the Metro folder, containing all xaml for the Metro theme. RadComboBox style is contained in Telerik.Windows.Controls.Input.xaml. But if you intend to take advantage of the latest implicit styling improvements in our theming mechanism and want to merge it in App.xaml , you will also need to copy and merge the Telerik.Windows.Control.xaml file.

More details on the implicit styles in our theming mechanism can be found here.

I hope this will give you a clue.

Greetings,
Dani
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>