Theme of custom control ComboBox

6 posts, 0 answers
  1. Beister Software GmbH
    Beister Software GmbH avatar
    7 posts
    Member since:
    Oct 2009

    Posted 29 Jul 2011 Link to this post

    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
  2. Pana
    Admin
    Pana avatar
    748 posts

    Posted 03 Aug 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Beister Software GmbH
    Beister Software GmbH avatar
    7 posts
    Member since:
    Oct 2009

    Posted 03 Aug 2011 Link to this post

    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
  5. Pana
    Admin
    Pana avatar
    748 posts

    Posted 05 Aug 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
  6. Beister Software GmbH
    Beister Software GmbH avatar
    7 posts
    Member since:
    Oct 2009

    Posted 09 Aug 2011 Link to this post

    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
  7. Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 12 Aug 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>
Back to Top
UI for WPF is Visual Studio 2017 Ready