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

Replace default styles of Controls

3 Answers 146 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Sumit
Top achievements
Rank 1
Sumit asked on 07 Jul 2016, 10:16 AM

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>

3 Answers, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 11 Jul 2016, 11:22 AM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Sumit
Top achievements
Rank 1
answered on 11 Jul 2016, 11:50 AM

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

0
Dilyan Traykov
Telerik team
answered on 12 Jul 2016, 12:11 PM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
GridView
Asked by
Sumit
Top achievements
Rank 1
Answers by
Dilyan Traykov
Telerik team
Sumit
Top achievements
Rank 1
Share this question
or