Hello all,
we found that XamCheckEditor is the only editor control not taking over the assigned metro style when we use the advanced style assignment with the Style keyword:
<StackPanel> <igEditor:XamCheckEditor/> <igEditor:XamCheckEditor Theme="Metro"/> <igEditor:XamCheckEditor Style="{x:Static igThemes:EditorsMetro.XamCheckEditor}"/> <igEditor:XamTextEditor/> <igEditor:XamTextEditor Theme="Metro"/> <igEditor:XamTextEditor Style="{x:Static igThemes:EditorsMetro.XamTextEditor}"/> <igEditor:XamNumericEditor/> <igEditor:XamNumericEditor Theme="Metro"/> <igEditor:XamNumericEditor Style="{x:Static igThemes:EditorsMetro.XamNumericEditor}"/> <igEditor:XamComboEditor/> <igEditor:XamComboEditor Theme="Metro"/> <igEditor:XamComboEditor Style="{x:Static igThemes:EditorsMetro.XamComboEditor}"/> </StackPanel>
Plus you can see small differences also with the other editors. Is there a way to
We are also aware of the following blog post, which helped us actually to understand how to combine styles: Blog - but why is this not working for XamCheckEditor?
BR Florian
Hi Florian,
I have received a reply from our development team and when the ‘Style’ property is used in order to apply a theme, the theme is not applied for any of the control completely. This is by design because the control is referring to a style for the theme, but this way the dynamic resources used in this style are not loaded. This is why the theme cannot be completely applied. This issue can be recognized in the other editors too. For example, you can open and close the second and third XamComboEditors and you will see the difference in their appearance. My suggestion is to use the ‘Theme’ property which purpose is to apply a theme on the controls.
Let me know, if you need any further assistance on this matter.
Dear Yanko,
please tell them to look at the blog entry I have linked and then they should tell us how to achieve Scenario 2:
<QUOTE>
Another case where this occurs is if you explicitly or implicitly set the Style of an element. Recall that when WPF is locating the local style, it will first check the Style Property. If that is set then that will be the local style and it will not attempt to look for an implicit style. Since the implicit style will not be used, the Style provided for the element from the Theme will not be used. One way to workaround this is to set the Based on of your Style to the Style for the Theme you are using.
</QUOTE>
Because this is exactly our case: we want to use Theme on the control + we want to use some certain style which will override just some validation properties. I marked the important part in bold. We need to use BasedOn already, so we defined the following:
<Style x:Key="XamTextEditorMetro" TargetType="{x:Type igWPF:XamTextEditor}" BasedOn="{x:Static igThemes:EditorsMetro.XamTextEditor}"/>
Still it leads to the result that not all styling is applied.
So I would summarize:
- If we need to make changes to the style for example for validating the input, we cannot use Themes anymore
- The blog article needs to be revised, since using "BasedOn" is not leading to equal results and therefore is no valid workaround
Is it really like this? We dont want to mess with the visual part of the theme, just add validation style elements. Would be really nice to have this... Maybe also Andrew can bring light on this issue.
Hi Andrew,
yes we are able to use that information. While it is not 100% straightforward in this way, we can add the missing things in this way. Thanks!
BR
Yes that's another way besides setting the string Theme property or using ResourceSetLoader. The ig:ThemeManager basically does the same thing as it's including the theme resources at that element's Resources.
Dear Andrew,
thanks for the insights. I need some time to digest it though. What we also tried now is to use the Theme Manager at the right level of the tree:
<Grid Grid.Row="1"> <ig:ThemeManager.Theme> <ig:MetroTheme/> </ig:ThemeManager.Theme>
This looks already like it would resolve the problems. Still now we see some other issues with the databinding. But let me come back to your answer in a few days.
Florian
The blog post you're referring to is explaining why setting the Style of an element (or putting an implicit style closer to the element than that provided by say a theme) causes it to not pick up another implicit style higher up (in the case of that article one such as one that might be provided by the Theme property). The description of the issue is still accurate. The problem you are reporting/describing is a different situation. The Style that you are setting is being correctly applied to the xamCheckEditor so whatever you do in that style is affecting the xamCheckEditor element itself (as that is all the Style affects). The reason why it doesn't appear visually as you were expecting is because there are other things that are being used by that Style that are not present from the Metro theme.
One such thing is the Style of other elements used (directly or indirectly) within that affected element. So in the case of the xamCheckEditor it contains a ValueEditorCheckBox element (which is what is providing the visuals for the checkbox portion of the control). So that element like any other that doesn't have its Style set will pick up its implicit style from the point of use - i.e. the WPF framework walks up the tree from where that instance is used looking for a style for that element. There is none so it ultimately checks the App.Resources (which also doesn't have one in this case) and then ultimately goes to the resource dictionary loaded by the WPF framework based upon the OS theme. So the ValueEditorCheckBox will end up using whatever style is being defined by the RD loaded based on the OS theme.
Another such thing are any DynamicResources. Those too are essentially located by the WPF framework based on the point of use - i.e. starting from the element referencing the DynamicResource and walking up the tree to locate a resource for that key. Again since there isn't one up the visual tree and isn't one in the app.resources the WPF framework will ultimately check in the RD loaded based on the OS theme. That is why the border colors, etc. used by say the xamTextEditor don't get used in your sample. Those brushes are referenced by our styles/templates using DynamicResource so that they can be replaced without having to retemplate/style the control.
So basically your not exactly doing what was described by the article because you're not setting the Theme or otherwise providing the resources from a theme within the tree or app.resources. You need to put those other resources into the tree. One way to do that would be to set the Theme property on the element since that puts a RD containing all the resources needed for that theme into the Resources of that element and therefore makes them available to any implicit walk by the framework. You can still set the Style property of that element if you want to provide a customized style for that element. Another option would be to put the RDs for that theme into the Window.Resources or App.Resources (if you want to affect the entire app by default). Again you can still set the Style of specific elements and you'll use the BasedOn if you want to pick up other things for that element's Style from the Theme style. If you wanted to affect say all XamCheckEditors in the application you could even just put that style into the RD where you put the theme resources. E.g.
<Application x:Class="Editors_Themes.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:igTheme="http://infragistics.com/Themes" xmlns:igWpf="http://schemas.infragistics.com/xaml/wpf" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <igTheme:ResourceSetLoader Locator="{x:Static igTheme:EditorsMetro.Location}" /> <igTheme:ResourceSetLoader Locator="{x:Static igTheme:PrimitivesMetro.Location}" /> </ResourceDictionary.MergedDictionaries> <Style TargetType="igWpf:XamCheckEditor" BasedOn="{x:Static igTheme:EditorsMetro.XamCheckEditor}"> <!-- Add setters to override some stuff --> </Style> </ResourceDictionary> </Application.Resources></Application>