Replace default styles of Controls

[Sumit]

Hi,

I'm new to WPF and Telerik controls.

I'm using trial version of Telerik controls.

I'm developing a WPF desktop application. For one of its UI, it requires some complex requirement to have a Hierarchical Grid View, with two dependent ComboBox columns, UpDownNumeric button in Text Column and AutoFilter/Sorting on Columns in child and parent grids.

I'm able to achieve the above by using telerik controls, but the styles of all the controls are not matching my current WPF UI Desktop application. The telerik controls shows up yellow and orange colors on mouse over and selection in all controls.

I would like to override this default behaviour with the coloring schemes as per my application.

Please let me know where to make the change so as to affect all the controls to override the default color styles.

Below is the code snippet of UI:

<DockPanel>
        <DockPanel.Resources>
            <DataTemplate x:Key="InnerTemplate" >
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <telerik:RadCollectionNavigator x:Name="collectionNavigator" CommandButtonsVisibility="All" Grid.Column="0" Grid.Row="0"
                                                    Visibility="Visible" Source="{Binding }" ScrollViewer.CanContentScroll="True" 
                                                    SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
                    <telerik:RadGridView x:Name="grid" ItemsSource="{Binding ElementName=collectionNavigator, Path=CollectionView}" Grid.Column="0" Grid.Row="1"
                                         Height="600" AutoGenerateColumns="False" CanUserInsertRows="True"
                                         IsReadOnly="False"  SelectionMode="Single"
                                         AlternationCount="2"
                                         AlternateRowBackground="{x:Static SystemColors.ControlLightBrush}" 
                                         HorizontalGridLinesBrush="{x:Static SystemColors.ActiveBorderBrush}" 
                                         VerticalGridLinesBrush="{x:Static SystemColors.ActiveBorderBrush}"
                                         BorderBrush="{x:Static SystemColors.ActiveBorderBrush}"
                                         BorderThickness="0"
                                         FontWeight="Normal"
                                         VerticalContentAlignment="Stretch"
                                         orizontalContentAlignment="Stretch"
                                         Padding="0" 
                                         SnapsToDevicePixels="True"
                                         ValidatesOnDataErrors="None">
                        <telerik:RadGridView.Columns>
                            <telerik:GridViewComboBoxColumn Header="Material" 
                                                            DataMemberBinding="{Binding MaterialId, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                                                            ItemsSource="{Binding Materials}" 
                                                            SelectedValueMemberPath="MaterialId" 
                                                            DisplayMemberPath="MaterialDescription" 
                                                            EditTriggers="CellClick"  Width="200" >
                                <telerik:GridViewComboBoxColumn.EditorStyle  >
                                    <Style TargetType="telerik:RadComboBox">
                                        <Setter Property="OpenDropDownOnFocus" Value="True"/>
                                        <Setter Property="Background" Value="{x:Static SystemColors.ControlLightBrush}"/>
                                    </Style>
                                </telerik:GridViewComboBoxColumn.EditorStyle>
                            </telerik:GridViewComboBoxColumn>
                            <telerik:GridViewComboBoxColumn  Header="Attribute Type"  Width="200"
                                                             ItemsSourceBinding="{Binding DemoList,UpdateSourceTrigger=PropertyChanged}" 
                                                             DataMemberBinding="{ Binding MaterialAttributeTypeId}" 
                                                             DisplayMemberPath="Description" 
                                                             SelectedValueMemberPath="MaterialAttributeTypeId" 
                                                             EditTriggers="CellClick" >
                                <telerik:GridViewComboBoxColumn.EditorStyle>
                                    <Style TargetType="telerik:RadComboBox">
                                        <Setter Property="OpenDropDownOnFocus" Value="True"/>
                                        <Setter Property="Background" Value="{x:Static SystemColors.ControlLightBrush}"/>
                                    </Style>
                                </telerik:GridViewComboBoxColumn.EditorStyle>
                            </telerik:GridViewComboBoxColumn>
                            <telerik:GridViewDataColumn DataMemberBinding="{Binding ColumnWidth}" Width="200"
                                                        Header="Column Width"  >
                                <telerik:GridViewDataColumn.CellEditTemplate>
                                    <DataTemplate>
                                        <telerik:RadNumericUpDown Value="{Binding ColumnWidth}" UpdateValueEvent="PropertyChanged"  />
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellEditTemplate>
                            </telerik:GridViewDataColumn>

                            <telerik:GridViewCheckBoxColumn Header="Include ?" Width="200"
                                                            DataMemberBinding="{Binding IncludeInReport}" 
                                                            EditTriggers="CellClick"  />

                            <telerik:GridViewDataColumn DataMemberBinding="{Binding ReportSequenceTag,Mode=TwoWay}" Width="100"
                                                        Header="Report Sequence" >
                                <telerik:GridViewDataColumn.CellEditTemplate>
                                    <DataTemplate>
                                        <telerik:RadNumericUpDown Value="{Binding ReportSequenceTag}" UpdateValueEvent="PropertyChanged"  />
                                    </DataTemplate>
                                </telerik:GridViewDataColumn.CellEditTemplate>
                            </telerik:GridViewDataColumn>
                        </telerik:RadGridView.Columns>
                    </telerik:RadGridView>
                </Grid>
            </DataTemplate>
        </DockPanel.Resources>
        <telerik:RadGridView EnableRowVirtualization="True"  x:Name="HierarchicalGridView" DockPanel.Dock="Top"
                             AutoGenerateColumns="False"   HierarchyChildTemplate="{StaticResource InnerTemplate }" 
                             RowIndicatorVisibility="Collapsed" IsReadOnly="True" AlternationCount="2"
                             AlternateRowBackground="{x:Static SystemColors.ControlLightBrush}" 
                             HorizontalGridLinesBrush="{x:Static SystemColors.ActiveBorderBrush}" 
                             VerticalGridLinesBrush="{x:Static SystemColors.ActiveBorderBrush}"
                             BorderBrush="{x:Static SystemColors.ActiveBorderBrush}" 
                             ShowGroupPanel="False"
                             ColumnWidth="*" 
                             ValidatesOnDataErrors="None">
            <telerik:RadGridView.ChildTableDefinitions>
                <telerik:GridViewTableDefinition >
                </telerik:GridViewTableDefinition>
            </telerik:RadGridView.ChildTableDefinitions>
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Report Name" DataMemberBinding="{Binding ReportName}">
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </DockPanel>

[Dilyan Traykov]

Hello Sumit,

I believe the Color Theme Generator is what you're looking for. It can be downloaded here and you can use it to easily customize the default palette of a theme. Bear in mind that it currently only works with the following dynamic themes: Green, Office2013, VisualStudio2013, Windows8 & Windows8 Touch.

I hope you find it helpful for achieving the desired look.

Regards,
Dilyan Traykov
Telerik by Progress

[Sumit]

Thanks Dilyan for the response. I appreciate. :)

But what I'm looking for is to remove the default colors that shows up (yellow and orange colors) on mouse over and selection in all controls. Because, my existing WPF UI has custom coloring schemes and I need to match the same.

I have also gone through the documentation on Telerik website but unable to find one.

Please try to look into it. Thanks in advance.

 

Regards,

Sumit Kumar Verma

[Dilyan Traykov]

Hello Sumit,

In such case, you will need to create implicit styles, targeting the elements of interest, predefine their control templates and more specifically, modify the Selected and MouseOver states.

You might want to have a look at the following threads which discuss similar scenarios:
- Hiding Row Selection Highlight
- RadComboBoxItem - Change Foreground on Mouseover

I hope you find this helpful.

Regards,
Dilyan Traykov
Telerik by Progress