Hi,
Im trying to customize the RoyalLightTheme. Basically i just want to change the Accent Color to blue and add a custom validation look to some editors.
I added some of the dictionaries in "\Infragistics\2019.2\WPF\Themes\RoyalLight" to my project and linked them via the Mappings. I got it working with some standard microsoft controls and the xamComboEditor. Im extending the theme as described in www.infragistics.com/.../thememanager-extending-existing-control-themeI have several questions.
1. Are all the styles that i need in the "\Infragistics\2019.2\WPF\Themes\RoyalLight folder or are some in "Infragistics\2019.2\WPF\DefaultStyles" ?
2. I saw there is a "ControlMappingKeys.XamDataGrid". What dictionary maps to this? There is none called xamDataGrid. How do i find this out myself?
3. Same as 2 but for more simple editors like XamTextEditor. There is only 1 dictionary "RoyalLight.xamEditors.xaml", but several keys in the ControlMappingKeys enum.
4. I added the RoyalLight.xamGrid.xaml dictionary to my project (hoping its the one for the xamDataGrid), but its full of errors. All looking like this "The name "CultureValueConverter" does not exist in the namespace "">schemas.infragistics.com/.../primitives". What do i do?5. Some dictionaries like the RoyalLight.xamEditors.xaml just look like this: Code I found those in "DefaultStyles/Windows", do i need to edit this, add them to my project, and reference those instead? All for a simple color change on xamTextEditor?
6. Is this even a "feasible" idea? It worked quickly with the sample and the xamComboEditor, but now it looks like i need to really dive into this and the first dictionary depends on another dictionary which depends on 2 dictionaries that are hidden within the general dictionaries which need primitive dictionaries...7. I could remember this wrong, but the first time i played around with this, i think there were typos in some of the dictionaries. Is there a clean version i can download somewhere? A "put these dictionaries in your project for this theme" file collection would be neat too, since they seem to be really all over the place.
Hello,
All xaml files used by a theme are in the specific theme folder, however sometimes there is more than 1 file that you will need to add, as there might be references between them.
In the default styles folder, you will find all the default styles as well as all themes for this group. Some controls are divided in groups, so XamDataGrid is in the DataPresenter group, while all editors are in the Editors folder.
I find working with the default styles folder easier, but using either will net the same result.
Regarding XamGrid, this is a control that was succeeded by XamDataGrid. They are not the same control and work differently, so this is why it produced errors.
Some editors use components in other ordinariness, so yes, you will need to add primitives which are under windows folder as well
Regarding the feasibility, it all depends how much you want to change, and how many components you want styled differently. Some controls are much easier to style than others.
If you just want to tweak some colors, you can try assigning values to the key a brush relates to, and if there are not many controls, you can just create a style based on the themed style, and do the tweaks:
<SolidColorBrush x:Key="{x:Static igDP:DataPresenterBrushKey.EditorNameKey}" Color="Black"/>
<Style TargetType="{x:Type igDP:XamComboEditor}" BasedOn="{x:Static igThemes:EditorsIGTheme.XamComboEditor}"> </Style>
Regarding typos, there should be none. The xaml coming with the installation should be all correct, so if you find a typo, please report it so we can address this issue immediately.
Should you feel I did not cover any of your questions, please let me know.
SIncerely,Tihomir TonevAssociate Software DeveloperInfragistics
okay i managed to move my validation tweaks away from your templates. Now i essentially ONLY want to change the purple to blue and be able to switch between RoyalLight and RoyalDark.
#1 <SolidColorBrush x:Key="{x:Static igDP:DataPresenterBrushKey.EditorNameKey}" Color="Black"/> does not work.
#2 <SolidColorBrush x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type igWPF:XamTextEditor}, ResourceId=EditorsFocusBorderBrush}" Color="Green" /> does work.
#3 <SolidColorBrush x:Key="CheckBoxPressedBorderBrush" Color="Orange" /> does not work.
#2 is great and all but i dont think its the "correct" way of doing this. And i would need to figure out this brush key from the dictionaries. Thats where i got key #3 too and it doesnt work... so this cant be right.
I noticed that i only need to change the "color_011" or "color_013" in the x_Brushes dictionaries. I would think i can just overwrite that brush a couple of times. Its the ones under the "Theme Accent colors" comment.
I think something like your proposed solution in #1 should be possible, but where do i get the correct static Keys?
Hello Martin,
Both #1 and #2 work, 3 wont. . For instance, to change the label background of IGThemed XamDataGrid, you can do this:
<igDP:XamDataGrid BindToSampleData="True" Theme="IGTheme"> <igDP:XamDataGrid.Resources> <LinearGradientBrush x:Key="{ComponentResourceKey {x:Type igDP:XamDataGrid}, LabelBackground}" StartPoint="0,0" EndPoint="0,1"> <GradientStop Offset="0" Color="Red"/> <GradientStop Offset="0.93" Color="Green"/> <GradientStop Offset="0.98" Color="Blue"/> </LinearGradientBrush> </igDP:XamDataGrid.Resources> </igDP:XamDataGrid>
All the brushes used by a component can be found in the brush xaml file in the default styles of the component group.
However, some files so many brushes, so looking at the xaml can be quite confusing. For that I would recommend getting a tool that can inspect the elements and help you here(like snoopWPF).
Inspecting looks like this:
I've also attached the sample I used for this screenshot, it contains a dockmanager with some colors changed using #1 method.
Should you have any further questions, please let me know.
Sincerely,
Tihomir TonevAssociate Software DeveloperInfragistics
2475.WpfApplication1.zip
this looks great and doable. Only problem is it doesn't seem to work for any other brushes.
I added all of these and not one of them worked.
<SolidColorBrush x:Key="{ComponentResourceKey {x:Type igDP:XamDataGrid}, DataRecordCellAreaBackgroundActive}" Color="Red"/> <SolidColorBrush x:Key="{ComponentResourceKey {x:Type igDP:XamDataGrid}, DataRecordCellAreaBackground}" Color="Red"/> <SolidColorBrush x:Key="{ComponentResourceKey {x:Type igDP:XamDataGrid}, MergedCellFieldSelectedBackgroundKey}" Color="Red"/> <SolidColorBrush x:Key="{x:Static igDP:DataPresenterBrushKeys.MergedCellFieldSelectedBackgroundKey}" Color="Red"/> <SolidColorBrush x:Key="{ComponentResourceKey TypeInTargetAssembly={x:Type igDP:XamDataGrid}, ResourceId=HScrollbarThumbBackgroundBrush}" Color="Red"/>
I got them from Snoop, from the DataPresenterRoyalLight_Brushes.xaml file or from the DataPresenterRoyalLight_Express.xaml file.
If i edit the colors directly in snoop the color turns red.
I have been looking further into this, and it seems that including brush resources is not guaranteed to work in this case, since brushes are used as static resources within the base theme, so they don't get resolved by styles using them.
There are a couple of suggestions I can make in this case.
First is, if the color is not broadly used in the application, just styling the component will do the job. In this case, DataRecordCellAreaBackground brush, is used only by the style for the DataRecordCellArea, meaning a style like this will resolve:<Style BasedOn="{x:Static themes:DataPresenterGeneric.DataRecordCellArea}" TargetType="{x:Type igDP:DataRecordCellArea}"> <Setter Property="Background" Value="Red" /> </Style>
The other option would be to include the resource dictionary that represents the base theme and merge it with the new resource dictionary that you will point.
I am attaching a sample extending Royal theme by overwriting few colors.
Sincerely,Tihomir TonevAssociate Software DeveloperInfragistics
8053.6204.ExtendTheme.zip
Well your sample just doesn't work.
See my attached sample. I played around with it and managed to turn a lot of stuff red, but not the hover effect. Also it seems like its a hover effect from an unstyled xamdatagrid, its not usual royal dark one.
Is it just not possible turning purple to blue? I don't understand how no one has ever done this before. How can this not be a common request?
www.file-upload.net/.../6204.ExtendTheme.rar.html
All of the DataPresenter themes consist of three files in total. In this case, they are:
DataPresenterRoyalDarkDataPresenterRoyalDark_BrushesDataPresenterRoyalDark_Express
While in this sample there are a lot of brushes, there are styles in the other files using brushes as static resources. If you inspect these files, you will see that sometimes there is a merged dictionary pointing towards the Generic files of the theme.
This is because there are some shared styles.
What needs to be done in this case, is to overwrite all mappings, so they point to the resources you have defined.
I have modified the sample you have sent me. What I did was to add overwrite of the rest of the mappings as per the guide on our website here:
https://es.infragistics.com/help/wpf/thememanager-extending-existing-control-theme#_Ref398053010
In the xaml resource files I have included, I have also removed the reference to the Generic files.
Now the grid is all red, as all colors have been defined to be red.(With the exception of the XamTextEditor's background, as this is part of the editors group, and the default background of RoyalDarkTheme for it is black).
Please let me know if you have questions about this.
7268.6204.ExtendTheme.zip