Theme of custom control ComboBox

[Beister Software GmbH]

Hi,

i am having a (maybe?) simple question. In our framework, we have a custom control derivation for each telerik control we use. This works pretty good, but sometimes i have problems to set the theme of the nested controls within such a derivation. One of these problematic cases is the ComboBox. The Vista theme is assigned via Generic.xaml:

<Style TargetType="{x:Type data:ComboBox}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=telerik:RadComboBox}}">
        <Setter Property="Height" Value="23"></Setter>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="{x:Type telerik:RadComboBoxItem}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=telerik:RadComboBoxItem}}">
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

In the code file, we force the usage of the new theme:

Shared Sub New()

    ' Connect new template
    DefaultStyleKeyProperty.OverrideMetadata(GetType(ComboBox), New FrameworkPropertyMetadata(GetType(ComboBox)))

End Sub
Protected Overrides Sub OnInitialized(ByVal e As System.EventArgs)

    ' Call base class method
    MyBase.OnInitialized(e)

    ' Ensure template
    Me.DefaultStyleKey = GetType(ComboBox)

End Sub

This works good. The ComboBox and the items are using the Vista theme. But now, i want the Box to be editable. The TextBox, the Button and the ScrollViewer are still using the default theme. How can i archive, that the named controls use the Vista theme? I want to define that in the Generic.xaml.

I hope you can help me. Styling and templating are not my favourite tasks ;-)

Greeting from germany, Carsten

[Pana]

Hello,

You can not set that in the Generic.xaml I think but you could add in your app.xaml the implicit style setter like:

<Style TargetType="TextBox" BasedOn="{StaticResource {tekerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=TextBox}}" />

Best wishes,
Pana
the Telerik team

[Beister Software GmbH]

Hi Pana, thank you for your reply. Unfortunately if i use the following code snippet

<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=TextBox}}" />
<Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=ScrollViewer}}" />
<Style TargetType="{x:Type telerik:RadButton}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=telerik:RadButton}}" />
<Style TargetType="{x:Type telerik:RadDropDownButton}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=telerik:RadDropDownButton}}" />

in the xaml-file, the themes of the scrollviewer and the clear-button are set, but the textbox and the dropdown-button still have the yellow default theme. In the xaml-file the combobox is defined as follows:

<data:ComboBox Grid.Row="0" Grid.Column="1" x:Name="cbxRemarksLegalBasis" ClearSelectionButtonVisibility="Visible" ClearSelectionButtonContent="Leeren" IsEditable="True" extensions:ComboBoxEditableExtension.CharacterCasing="Upper" extensions:ComboBoxEditableExtension.MaxLength="29" TextSearchMode="StartsWith" TextSearch.TextPath="LegalText" DisplayMemberPath="LegalText"></data:ComboBox>

Have you any other suggestions, why the textbox does still not use the wished theme?

Carsten

[Pana]

Hello,

You could find the complete RadComboBox template located in the installation folder of the RadControls for WPF. For example on my computer they are located here:

C:\Program Files (x86)\Telerik\RadControls for WPF Q2 2011\Themes\Vista\Themes\Vista\ComboBox.xaml

You could see there that in the EditableComboBox ControlTemplate a ButtonChrome and a PickerTextBox are used. You could use the style from there in your application and include it in the default style for your control or try to add implicit styles for the rest of the controls used instead the RadComboBox.

Kind regards,
Pana
the Telerik team

[Beister Software GmbH]

Hi Pana,

thanks for your advice. I could change most of the control. The only thing i could not change was the border around the input area and the drop down button. It still glows yellow. All other things are now using the Vista blue. Can you give me one last advice, how i can change the yellow border. Like i said earlier, the whole style and theme thing is not my world.

Carsten

[Konstantina]

Hi Carsten,

Could you please send us some screenshot of the Borders you want to change, as I am not quite sure I can understand you. Meanwhile, I can suggest you to look for some triggers that might change those borders on a MouseOver event. Also, keep in mind that the DropDownButton is a ButtonChrome control and in order to change it, you have to edit the template of the ButtonChrome. You can find some more information about the customization of the ButtonChrome in this KB article.

Kind regards,
Konstantina
the Telerik team