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

IsReadOnly Mask Issue

5 Answers 138 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
crazy05
Top achievements
Rank 1
crazy05 asked on 22 Mar 2016, 02:36 PM

Hello,

When we make RadCombobox IsReadonly="True", the value inside is not looking good. It masks the value.

How can we remove the mask or make more transparent to make the value visible more bright ?

Please guide me,

5 Answers, 1 is accepted

Sort by
0
Masha
Telerik team
answered on 23 Mar 2016, 07:46 AM
Hello Ram,

Unfortunately, currently, the only possible solution to have different look for IsReadOnly or Disabled state is to set custom style per every control, modify its control template and change the value in its ReadOnly / Disabled visual state.

I've created a demo project where is demonstrated how to do this for RadComboBox. Please note the project uses implicit styles approach and NoXaml binaries.

I hope this helps.

Regards,
Masha
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
crazy05
Top achievements
Rank 1
answered on 23 Mar 2016, 01:15 PM

Hello Masha,

I downloaded your project and did not see any styles for control template. Can you please post the code here.?

0
Masha
Telerik team
answered on 23 Mar 2016, 01:40 PM
Hello Ram,

Can you check inside the Resources folder, the file is called CommonStyles.xaml. Also it is merged in App.xaml file among other resource dictionaries. This way you will keep styles in separated resource dictionaries.

Please let me know do you find the styles? If you still have problems I'll paste them in this forum post.


Regards,
Masha
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
crazy05
Top achievements
Rank 1
answered on 23 Mar 2016, 02:38 PM

Hello Masha,

I checked that and I understand that is the straight forward solution. I am using two themes, Visual Studio and Expression Dark themes and user can change it by their interests. In this case, it wont work I guess.

I tried to change to bold and fore color but still it is not working because It was masked on top of the control. All I need to do is more transparent for that mask. How can I reduce transparency ?

It is difficult for me to download the zip files in my office. Can you please keep the solution here ?

0
Masha
Telerik team
answered on 24 Mar 2016, 12:05 PM
Hello Ram,

When you switch themes run-time you need to have two separate resource dictionaries with custom styles for each theme and merge the corresponding resource dictionary when the theme is changed. You need to merge resource dictionaries in code behind as follow:

if (button.Content.ToString() == "VisualStudio2013")
    {
        Application.Current.Resources.MergedDictionaries.Clear();
        VisualStudio2013Palette.LoadPreset(VisualStudio2013Palette.ColorVariation.Dark);
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/Telerik.Windows.Themes.VisualStudio2013;component/Themes/System.Windows.xaml", UriKind.RelativeOrAbsolute)
        });
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.xaml", UriKind.RelativeOrAbsolute)
        });
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.Input.xaml", UriKind.RelativeOrAbsolute)
        });
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/IsReadOnlyDemoProject;component/Resources/CommonStylesVisualStudio2013.xaml", UriKind.RelativeOrAbsolute)
        });
       
    }
    else
    {
        Application.Current.Resources.MergedDictionaries.Clear();
        
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/Telerik.Windows.Themes.Expression_Dark;component/Themes/System.Windows.xaml", UriKind.RelativeOrAbsolute)
        });
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/Telerik.Windows.Themes.Expression_Dark;component/Themes/Telerik.Windows.Controls.xaml", UriKind.RelativeOrAbsolute)
        });
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/Telerik.Windows.Themes.Expression_Dark;component/Themes/Telerik.Windows.Controls.Input.xaml", UriKind.RelativeOrAbsolute)
        });
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/IsReadOnlyDemoProject;component/Resources/CommonStylesExpressionDark.xaml", UriKind.RelativeOrAbsolute)
        });
    }

You can find below the  NonEditable and EditableComboBox control template for VisualStudio2013 theme, which you need to place in a separate resource dictionary. Inside it you need play with the VisualState named Disabled in order to modify the transparency of the control. Also you need to apply the desired modification in both resource dictionaries : For ExpressionDark and VisualStudio2103 themes.

<SolidColorBrush x:Key="DisabledForegroundColor" Color="red" />
 
<ControlTemplate x:Key="NonEditableComboToggleButtonControlTemplate" TargetType="telerik:RadToggleButton">
    <Grid Background="Transparent">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonBackground" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:VisualStudio2013Resource ResourceKey=MouseOverBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonBackground" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:VisualStudio2013Resource ResourceKey=AccentBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Fill">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:VisualStudio2013Resource ResourceKey=MarkerBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonBackground" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:VisualStudio2013Resource ResourceKey=AccentDarkBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:VisualStudio2013Resource ResourceKey=SelectedBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Fill">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:VisualStudio2013Resource ResourceKey=SelectedBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownIcon" Storyboard.TargetProperty="Fill">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:VisualStudio2013Resource ResourceKey=BasicBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ToggleButtonBackground" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:VisualStudio2013Resource ResourceKey=ComplementaryBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
 
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource DisabledForegroundColor}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To="0.8"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="FontWeight">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <FontWeight>Bold</FontWeight>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Unfocused"/>
                <VisualState x:Name="Focused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusVisual">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="CheckedStates">
                <VisualState x:Name="Unchecked"/>
                <VisualState x:Name="Checked">
                    <Storyboard>
                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ToggleButtonBackgroundChecked"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Indeterminate"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Border x:Name="ToggleButtonBackground"
                Grid.ColumnSpan="2"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}"/>
        <Border x:Name="ToggleButtonBackgroundChecked"
                Grid.ColumnSpan="2"
                Opacity="0"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{telerik:VisualStudio2013Resource ResourceKey=AccentBrush}"/>
        <Border x:Name="FocusVisual" Grid.ColumnSpan="2" Visibility="Collapsed" BorderThickness="1" BorderBrush="{telerik:VisualStudio2013Resource ResourceKey=AccentMainBrush}"/>
        <Path x:Name="DropDownIcon"
                Grid.Column="1"
                Data="M0,0 L6,0 L3,4 z"
                Stretch="Fill"
                Fill="{telerik:VisualStudio2013Resource ResourceKey=StrongBrush}"
                Width="6"
                Height="4"
                Margin="5 0"/>
        <ContentControl x:Name="Content"
                IsTabStop="False"
                Grid.Column="0"
                Foreground="{TemplateBinding Foreground}"
                Margin="{TemplateBinding Padding}"
                Content="{TemplateBinding Content}"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Grid>
</ControlTemplate>
<Style x:Key="NonEditableComboToggleButtonStyle" TargetType="telerik:RadToggleButton">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="IsTabStop" Value="True"/>
    <Setter Property="Template" Value="{StaticResource NonEditableComboToggleButtonControlTemplate}"/>
</Style>
 
<ControlTemplate x:Key="EditableComboBox" TargetType="telerik:RadComboBox">
    <Grid x:Name="VisualRoot">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_DropDownButton" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{telerik:VisualStudio2013Resource ResourceKey=ComplementaryBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <!--<DoubleAnimation Duration="0" Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="0.8"/>-->
                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledBorder" Storyboard.TargetProperty="Opacity" To="1"/>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{telerik:VisualStudio2013Resource ResourceKey=BasicBrush}"/>
                        </ObjectAnimationUsingKeyFrames>-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource DisabledForegroundColor}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="Opacity" To="0.8"/>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="FontWeight">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <FontWeight>Bold</FontWeight>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownOpenBorder" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{telerik:VisualStudio2013Resource ResourceKey=AccentBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_DropDownButton" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{telerik:VisualStudio2013Resource ResourceKey=AccentBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="DropDownOpenBorder" Storyboard.TargetProperty="Opacity" To="1"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="DropDownOpen">
                    <Storyboard>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="FocusBorder" Storyboard.TargetProperty="Opacity" To="0"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="DropDownOpenBorder" Storyboard.TargetProperty="Opacity" To="1"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Focused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusBorder">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <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.TargetName="Watermark" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="WatermarkInvisible"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Border x:Name="Background" Grid.ColumnSpan="2" IsHitTestVisible="False" Background="{TemplateBinding Background}"/>
        <Border x:Name="ReadOnly"
                Grid.ColumnSpan="2"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="1"
                Background="{telerik:VisualStudio2013Resource ResourceKey=AlternativeBrush}"
                Visibility="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"/>
        <Border x:Name="DisabledBorder"
                Grid.ColumnSpan="2"
                Opacity="0"
                IsHitTestVisible="False"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{telerik:VisualStudio2013Resource ResourceKey=ComplementaryBrush}"/>
        <TextBox x:Name="PART_EditableTextBox"
                Grid.Column="0"
                Margin="1 1 0 1"
                VerticalAlignment="Stretch"
                Padding="{TemplateBinding Padding}"
                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                IsReadOnly="{TemplateBinding IsReadOnly}"
                VerticalContentAlignment="Center"
                Style="{StaticResource ComboBoxTextBoxStyle}"
                CaretBrush="#FF808080">
            <TextBox.Template>
                <ControlTemplate TargetType="TextBox">
                    <Grid>
                        <ScrollViewer
                                Padding="{TemplateBinding Padding}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                IsTabStop="False"
                                VerticalScrollBarVisibility="Auto"
                                x:Name="PART_ContentHost"
                                VerticalContentAlignment="Stretch"/>
                    </Grid>
                </ControlTemplate>
            </TextBox.Template>
        </TextBox>
        <telerik:RadToggleButton x:Name="PART_DropDownButton"
                Grid.Column="1"
                IsTabStop="False"
                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                Style="{StaticResource EditableComboToggleButtonStyle}"
                Background="{Binding Background, ElementName=PART_EditableTextBox}"/>
        <Border x:Name="Border" Grid.ColumnSpan="2" IsHitTestVisible="False" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
        <Border x:Name="DropDownOpenBorder"
                Grid.ColumnSpan="2"
                IsHitTestVisible="False"
                BorderBrush="{telerik:VisualStudio2013Resource ResourceKey=AccentMainBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Opacity="0"/>
        <Border x:Name="FocusBorder"
                Visibility="Collapsed"
                Grid.ColumnSpan="2"
                IsHitTestVisible="False"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{telerik:VisualStudio2013Resource ResourceKey=AccentMainBrush}"/>
        <TextBlock x:Name="Watermark"
                Text="{TemplateBinding EmptyText}"
                IsHitTestVisible="False"
                Padding="{TemplateBinding Padding}"
                VerticalAlignment="Center"
                HorizontalAlignment="Left"
                Visibility="Collapsed"
                Margin="4 0 0 0"
                Foreground="{telerik:VisualStudio2013Resource ResourceKey=StrongBrush}"/>
        <Popup x:Name="PART_Popup" VerticalOffset="0">
            <Grid x:Name="PopupRoot">
                <Grid Opacity="0.3">
                    <Rectangle Margin="1 1 -1 -1" Opacity="0.05" Stroke="Black" StrokeThickness="1" RadiusX="4" RadiusY="3"/>
                    <Rectangle Margin="1 1 0 0" Opacity="0.1" Stroke="Black" StrokeThickness="1" RadiusX="3" RadiusY="2"/>
                    <Rectangle Margin="2 2 1 1" Fill="Black" RadiusX="2" RadiusY="1" Opacity="0.3" StrokeThickness="1"/>
                </Grid>
                <Border
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        MinWidth="{TemplateBinding MinDropDownWidth}"
                        MaxHeight="{TemplateBinding MaxDropDownHeight}"
                        x:Name="PART_ResizeBorder"
                        Background="{telerik:VisualStudio2013Resource ResourceKey=AlternativeBrush}"
                        Margin="0 0 2 2">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <telerik:RadButton x:Name="PART_ClearButton"
                                Grid.Row="0"
                                Margin="-1 -1 -1 0"
                                FontSize="{TemplateBinding FontSize}"
                                FontFamily="{TemplateBinding FontFamily}"
                                Visibility="{TemplateBinding ClearSelectionButtonVisibility}"
                                Content="{TemplateBinding ClearSelectionButtonContent}"/>
                        <ScrollViewer x:Name="PART_ScrollViewer"
                                Grid.Row="1"
                                BorderThickness="0"
                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                Foreground="{TemplateBinding Foreground}"
                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}"
                                Padding="0 1 0 0">
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </Grid>
                </Border>
            </Grid>
        </Popup>
    </Grid>
</ControlTemplate>
<ControlTemplate x:Key="NonEditableComboBox" TargetType="telerik:RadComboBox">
    <Grid x:Name="VisualRoot">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal"/>
                <VisualState x:Name="MouseOver"/>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="BackgroundBorder" Storyboard.TargetProperty="Opacity" To="0"/>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="DisabledBorder" Storyboard.TargetProperty="Opacity" To="1"/>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="DropDownOpen">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_DropDownButton" Storyboard.TargetProperty="BorderThickness" Duration="0">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Thickness>1</Thickness>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusBorder" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:VisualStudio2013Resource ResourceKey=AccentDarkBrush}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="FocusBorder" Storyboard.TargetProperty="Opacity" To="1"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Focused">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="FocusBorder">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Visible</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Unfocused"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border x:Name="BackgroundBorder" IsHitTestVisible="False" Background="{TemplateBinding Background}"/>
        <Border x:Name="DisabledBorder" IsHitTestVisible="False" Opacity="0" Background="{telerik:VisualStudio2013Resource ResourceKey=AlternativeBrush}"/>
        <telerik:RadToggleButton x:Name="PART_DropDownButton"
                IsTabStop="False"
                Padding="{TemplateBinding Padding}"
                Content="{TemplateBinding SelectionBoxItem}"
                ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                Style="{StaticResource NonEditableComboToggleButtonStyle}"
                BorderThickness="{TemplateBinding BorderThickness}"
                BorderBrush="{TemplateBinding BorderBrush}"
                Background="{x:Null}"
                FontFamily="{TemplateBinding FontFamily}"
                FontSize="{TemplateBinding FontSize}"/>
        <Border x:Name="FocusBorder"
                IsHitTestVisible="False"
                BorderThickness="{TemplateBinding BorderThickness}"
                Visibility="Collapsed"
                Background="Transparent"
                BorderBrush="{telerik:VisualStudio2013Resource ResourceKey=AccentMainBrush}"/>
        <Popup x:Name="PART_Popup" VerticalOffset="0">
            <Grid x:Name="PopupRoot">
                <Grid Opacity="0.3">
                    <Rectangle Margin="1 1 -1 -1" Opacity="0.05" Stroke="Black" StrokeThickness="1" RadiusX="4" RadiusY="3"/>
                    <Rectangle Margin="1 1 0 0" Opacity="0.1" Stroke="Black" StrokeThickness="1" RadiusX="3" RadiusY="2"/>
                    <Rectangle Margin="2 2 1 1" Fill="Black" RadiusX="2" RadiusY="1" Opacity="0.3" StrokeThickness="1"/>
                </Grid>
                <Border
                        BorderThickness="{TemplateBinding BorderThickness}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        MinWidth="{TemplateBinding MinDropDownWidth}"
                        MaxHeight="{TemplateBinding MaxDropDownHeight}"
                        x:Name="PART_ResizeBorder"
                        Margin="0 0 2 2"
                        Background="{telerik:VisualStudio2013Resource ResourceKey=AlternativeBrush}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <telerik:RadButton x:Name="PART_ClearButton"
                                Grid.Row="0"
                                Margin="-1 -1 -1 0"
                                FontSize="{TemplateBinding FontSize}"
                                FontFamily="{TemplateBinding FontFamily}"
                                Visibility="{TemplateBinding ClearSelectionButtonVisibility}"
                                Content="{TemplateBinding ClearSelectionButtonContent}"/>
                        <ScrollViewer x:Name="PART_ScrollViewer"
                                Grid.Row="1"
                                BorderThickness="0"
                                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                Foreground="{TemplateBinding Foreground}"
                                CanContentScroll="{TemplateBinding ScrollViewer.CanContentScroll}"
                                Padding="0 1 0 0">
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </Grid>
                </Border>
            </Grid>
        </Popup>
    </Grid>
</ControlTemplate>
 
<Style TargetType="telerik:RadComboBox" BasedOn="{StaticResource RadComboBoxStyle}">
    <Setter Property="EditableTemplate" Value="{StaticResource EditableComboBox}"/>
    <Setter Property="NonEditableTemplate" Value="{StaticResource NonEditableComboBox}"/>
</Style>

I hope it helps.

Regards,
Masha
Telerik
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
ComboBox
Asked by
crazy05
Top achievements
Rank 1
Answers by
Masha
Telerik team
crazy05
Top achievements
Rank 1
Share this question
or