RadComboBox template Metro theme issue

5 posts, 1 answers
  1. Erik
    Erik avatar
    36 posts
    Member since:
    Jun 2012

    Posted 12 Jun 2012 Link to this post

    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: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">
                                        <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="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_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="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>
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 13 Jun 2012 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Erik
    Erik avatar
    36 posts
    Member since:
    Jun 2012

    Posted 13 Jun 2012 Link to this post

    Hi Dani,

    Exactly in which folder and file can I find the Metro theme template for RadComboBox? I seem to be looking in the wrong place...
  5. Answer
    Dani
    Admin
    Dani avatar
    848 posts

    Posted 14 Jun 2012 Link to this post

    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 >>
  6. Erik
    Erik avatar
    36 posts
    Member since:
    Jun 2012

    Posted 14 Jun 2012 Link to this post

    Dani thanks for the reply

    implicit styling looks like it will save me a ton of work :)
Back to Top
UI for WPF is Visual Studio 2017 Ready