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

Windows 8 Touch Theme

8 Answers 229 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Saykor
Top achievements
Rank 2
Saykor asked on 01 Jul 2014, 10:54 AM
Dear Telerik support,
Please see this video: https://www.youtube.com/watch?v=Q4vtPcpiGcY

The code that I use to change the colors is:

                        StyleManager.ApplicationTheme = new Windows8TouchTheme();
                        var convertFromString = ColorConverter.ConvertFromString("#FFAF231E");
                        if (convertFromString != null)
                        {
                            var color = (Color)convertFromString;
                            Windows8TouchPalette.Palette.AccentColor = color;
                            //Windows8TouchPalette.Palette.EffectHighColor = Colors.Yellow;
                            //Windows8TouchPalette.Palette.EffectLowColor = Colors.Green;
                            Windows8TouchPalette.Palette.HighColor = Colors.White;
                            Windows8TouchPalette.Palette.InvertedColor = color;
                            Windows8TouchPalette.Palette.InvertedForegroundColor = Colors.White;
                            Windows8TouchPalette.Palette.LowColor = color;
                            //Windows8TouchPalette.Palette.MainColor = color;
                            //Windows8TouchPalette.Palette.MainForegroundColor = color;
                            Windows8TouchPalette.Palette.MediumColor = Colors.Red;
                            Windows8TouchPalette.Palette.ValidationColor = color;
                        }

Version of the controls: 2013.2.611.45

I have few questions:

1. Can you please tell me when i select a row how to change the Foreground on the text to white from the template? I not see it is possible but can miss something. In your documentation ( http://www.telerik.com/help/wpf/common-styles-appearance-colorizing-metro-theme.html ) not have a information where exactly all different properties apply the colors. What mean EffectLowColor? From the name means nothing as most of the all. The only way to know their meaning is to experiment to add different colors to see where what will be changed. The example in the documentation link is not helpful to understand this. And seems different controls understand by different way the template.

2. What Palette property change the RadRibbonView.QuickAccessToolBar from black to something else? I test all properties and no one from them have any effect on this black line.

3. Next situation is with your control RadRibbonView. When I click ApplicationButton and open Backstage you see there is white Foreground on white background on RadRibbonBackstageItem.
If I remove from the code above Windows8TouchPalette.Palette.InvertedForegroundColor = Colors.White; then we have gray Foreground on white background but this change the grid column header Foreground to gray. This mean both GridColumnHeader and RadRibbonBackstageItem Foreground depend on InvertedForegroundColor.

Something is not right here. When I move with the mouse over the GridColumnHeader the Foreground is change from white to black ( as expected ), but when i move over the RadRibbonBackstageItem the color is not changed from white to black as i will expect. When RadRibbonBackstageItem depend on InvertedForegroundColor i will expect same behavior as GridColumnHeader when move with my mouse over it but it not happens.

In same time the background on RadRibbonBackstageItem not depend on LowColor as GridColumnHeader Background.

This is what I mean the different controls understand the template by a different why. The idea on the template is when I change the color on one place this to apply on every other places not to add manually a Background or Foreground on few controls.

4. Can you please help me how to apply this template to MS Controls? Because it is not very good half from the program to have a different style.

Thank you in advance.

Best regards,
Saykor


8 Answers, 1 is accepted

Sort by
0
Saykor
Top achievements
Rank 2
answered on 01 Jul 2014, 06:45 PM
Hi again,
Here is another video: https://www.youtube.com/watch?v=PRFZL_mkzhA
Same theme with RadDateTimePicker and RadComboBox

You see how the border is missing when I hover the RadDateTimePicker and the selector is missing all the time. So user not know that need to click on the right side on the box to popup the date/time selectors.

Regards,
Saykor
0
Saykor
Top achievements
Rank 2
answered on 02 Jul 2014, 12:49 PM
Hi
When I just start the program....
http://i.imgur.com/GRkXlMF.png
You will see that Week is selected as expected but here: http://i.imgur.com/o46AElR.png is not selected.

The first picture use Windows8Theme, second use Windows8TouchTheme.
Seems default selection on Windows8TouchTheme not work.

Regards
0
Sia
Telerik team
answered on 02 Jul 2014, 04:19 PM
Hello Dimitar,

We understand the problems you hit during the process of customization the default palette. We will try to provide you with all needed information. I have already logged an item in our internal system about the need of updating the help article describing the Windows8Touch default colors similar to the approach that we used in the help article describing the VisualStudio2013 default palettes.

Here they are:

 Colors
 AccentColor  #FF26A0DA
 MainColor  #FFFFFFFF
 InvertedColor  #FF000000
 EffectLowColor
 #FFE1E1E1
 EffectHighColor  #FFFFFFFF
 ValidationColor  #FFE23907
 MainForegroundColor  #FF000000
 InvertedForegroundColor  #FFFFFFFF
 LowColor  #FFE9E9E9
 MediumColor  #FFCCCCCC
 HighColor  #FF767676

 FontSize
 FontSizeS  10
 FontSize  12
 FontSizeL  15
 FontSizeXL  20
 FontSizeXXL  24
 
 FontFamily
 FontFamilyLight  Segoe UI Light
 FontFamily  Segoe UI
 FontFamilyStrong  Segoe UI Semibold

To your questions:

1. Can you please tell me when i select a row how to change the Foreground on the text to white from the template?

Unfortunately this cannot be done through the Pallette, because all cells have MainForegroundColor as Foreground. What I can suggest is to edit the GridViewCellTemplate.

2. What Palette property change the RadRibbonView.QuickAccessToolBar from black to something else? I test all properties and no one from them have any effect on this black line.

If you are pointing to the Tooltip there as shown in the attached screenshot (RibbonViewTooltip.jpg), then you need to overwrite the Windows8TouchPalette.Palette.InvertedColor= Colors.Red;
InvertedColor as shown above is the black color used for Background and BorderBrush and MainForegroundColor is the default black foreground among the controls.

3. When I click ApplicationButton and open Backstage you see there is white Foreground on white background on RadRibbonBackstageItem.

That is because you set the HighColor to be white, if you change it  to be black, you will achieve the same effect as the one in GridView. I see that you set it to be white because of the GridView, the problem here is that we have not exposed separate foreground property for all fonts that has HighColor as Foreground. Again I am going to discuss this with my colleagues. Whan I can suggest currently is to choose color that looks ok on both backgrounds - red and white.

4. Can you please help me how to apply this template to MS Controls? Because it is not very good half from the program to have a different style.


Here you can find more information how to style the MS controls that our theming supports.

You see how the border is missing when I hover the RadDateTimePicker and the selector is missing all the time. So user not know that need to click on the right side on the box to popup the date/time selectors.

The RadComboBox MouseOver Border and DateTimePicker icon are not visible again because you set HighColor to be white. Simply update this color to something else and the desired elements will be shown.

For easier customization I suggest  that you check Color Theme Generator which will help you to create a palette for Windows8Touch theme that looks well and match for all controls. More about how to use theme generator you can find in this blog post article.

Regards,
Sia
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Saykor
Top achievements
Rank 2
answered on 03 Jul 2014, 10:17 AM
Thank you Sia for your fast answer.

Lets go point by point.

2. Please see the video again: https://www.youtube.com/watch?v=Q4vtPcpiGcY
On first line in the center where is "Abacus". This line is the place where i define QuickAccessToolBar buttons. And the ApplicationName is how on same line. This black line not change his color with Windows8TouchPalette.Palette.InvertedColor. I test everything from the Windows8TouchPalette and nothing have effect.

3. For now i set the background manually on RadRibbonBackstage. Will wait for your decision when discuss this with your team.

4. Please see this video: https://www.youtube.com/watch?v=SiJKZF3gjF4
First time when I run the project is not used any themes for MS controls. When I select a organisation all on the screen is ok.
Then I apply Windows8TouchTheme for MS ScrollViewer and when click on organisation all is a mess.
Can you please fix it.

The theme generator is very good but the end result is not same. Can you please see this video: https://www.youtube.com/watch?v=t2C-aMzIJ_E&feature=youtu.be

When read this points watch the video. I follow it.
1. When it start if you see the Color Theme Generator title i suppose is same as Abacus - it is RadRibbonView. The colors not apply in WPF program.
2. The grid headers font color is not apply too. In the generator is white in the wpf program is red.
3. Tab Items on the RadRibbonView is too different colors.
4. ShedulerView seems to be ok.
5. When I select a organisation the RadTabControl is too not same as the generator
6. This dropdown Rank that I select is MS control. I apply the style to all MS controls. As you see it not change anything.
7. The buttons on bottom is too not like as I generate them.
8. I show you the RadComboBox in the generator and MS ComboBox that is not apply the style. Have in your mind that Address Type: Postal/Delivery is RadComboBox and it is not same as the generated too.
9. Back to buttons :) Save and Close is RadButton all other is MS Buttons. The difference is obviously with the generator. The RadButton not apply anything.
10. Seems AutocompleteBox is ok.

This is the style that Generator give me:
            Windows8TouchPalette.Palette.AccentColor = (Color)ColorConverter.ConvertFromString("#FFFC0707");
            Windows8TouchPalette.Palette.MainColor = (Color)ColorConverter.ConvertFromString("#FFFFFFFF");
            Windows8TouchPalette.Palette.MediumColor = (Color)ColorConverter.ConvertFromString("#FFFF0000");
            Windows8TouchPalette.Palette.HighColor = (Color)ColorConverter.ConvertFromString("#FFFFFFFF");
            Windows8TouchPalette.Palette.LowColor = (Color)ColorConverter.ConvertFromString("#FFAF231E");
            Windows8TouchPalette.Palette.InvertedColor = (Color)ColorConverter.ConvertFromString("#FFFF0000");
            Windows8TouchPalette.Palette.InvertedForegroundColor = (Color)ColorConverter.ConvertFromString("#FFFFFFFF");
            Windows8TouchPalette.Palette.MainForegroundColor = (Color)ColorConverter.ConvertFromString("#FF000000");
            Windows8TouchPalette.Palette.HighColor = (Color)ColorConverter.ConvertFromString("#FFFF0000");
            Windows8TouchPalette.Palette.LowColor = (Color)ColorConverter.ConvertFromString("#FFAF231E");

I use them after login to change the theme colors because it depend from the login company.
When I move this code in the 
public App()
        {
            StyleManager.ApplicationTheme = new Windows8TouchTheme();

<<<The above Windows8TouchPalette code>>>

InitializeComponent();

         }

This is the change: http://i.imgur.com/LeaPzgK.png
But only this. Other controls work as on the video. Seems the QuickAccessToolBar not change the color dynamically.

It is possible this theme to not be completed on my version of the controls: 2013.2.611.45 because too much things not work as expected.

Best regards,
Saykor






0
Saykor
Top achievements
Rank 2
answered on 03 Jul 2014, 06:27 PM
I find a bug in the code generated from your color generator.
If you see in the Windows8TouchPalette set that he give me the last is HighColor and LowColor... and we have them 2 time in the set.
So when I change the last 2 to EffectHighColor and EffectLowColor I see significant difference now.
Now from the above list points 2, 3, 5, 7, 9 is fixed and work as expected.

For point 8: RadComboBox apply the color on hover effect only. The background is still white and the arrow is white too. The problem here is that the background is not apply as in the generator. Seems it not depend on EffectHighColor and EffectLowColor. Same with RadDateTimePicker.

Points 1 and 3 depend from when exactly Windows8TouchPalette will be apply. In App() or after some login logic in the viewModel. I need to be after the login in the program but on this place the colors not change anymore.

So please fix the Telerik Color Generator and see if we can fix the theme because I need to apply it for 3 different color sets depend from the login selection.

Thank you in advance.

Best regards,
Saykor
0
Sia
Telerik team
answered on 04 Jul 2014, 03:03 PM
Hello Dimitar,

I am happy to hear that you managed to solve some of your problems by yourself. Please find your points updated for the valuable feedback about the Colors generator application. You are absolutely right and this is something that I did not noticed before.

Regarding the black header of RibbonView, you are right. I tested that with your version of telerik controls and there it looks like you said. Actually it was changed after that because the design was not accepted well by our customers. It is grey in the latest version. Please have in mind that you can use also the exposed TitleBarBackground property of RibbonView and set the color that you need.

Actually the exposed palette colors sometimes are not enough for full cusomizations and that is why we suggest two things to our customer. First one is to always preserve the contrast between the default color values. In that way you won't get bright foreground on bright background for example. Another important thing is that sometimes you will need to use the exposed properties of the controls and overwrite them additionaly or overwrite the control's template as the natural approach in WPF or Silverlight is.

I noticed that you host a Silverlight application in WPF one and probably this is related to some of your problems. I will send you a follow up as soon as I can give you more valuable information. In the meantime it would be great if you can send me an application showing more about your scenario. If this is not possible, please let me know.

Looking forward to your answer.

Regards,
Sia
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Saykor
Top achievements
Rank 2
answered on 05 Jul 2014, 02:39 PM
"I noticed that you host a Silverlight application in WPF"
I not understand what mean? Why you think that I host Silverlight application in WPF? First time i hear that this is possible.

So you say the difference in the template is because I use old version of your controls?
0
Accepted
Sia
Telerik team
answered on 09 Jul 2014, 08:49 AM
Hello Dimitar,

Please disregard my guess, it seems that it was not right :)

I looked again your videos and noticed that you use Telerik RadComboBox and MS ComboBox, however have in mind that our theming does not support the second one. Here you can find list of all MS controls that Telerik support. What I can suggest is to replace it with RadComboBox if possible.

The difference in RadRibbonView is caused by your version of telerik controls, yes.

Regards,
Sia
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
General Discussions
Asked by
Saykor
Top achievements
Rank 2
Answers by
Saykor
Top achievements
Rank 2
Sia
Telerik team
Share this question
or