Visual problems Q3 2015

[Geoffrey]

Hello,

I have some graphical problems / questions with RadRibbonWindows / RadRibbonView in my application :
I use implicit theming.

• In attached file "Ribbon01.jpg", in some themes like Office2013, there is no margin at left and right of ApplicationButtonContent ? The following RadRibbonTabs have margin in the header.
• In attached file "Ribbon01.jpg", the ComboBox(s) have not the good style.
• In attached file "Ribbon02.jpg", the contextual group do not cover the size of the RadRibbonTab header.
• In attached file "Ribbon03.jpg", the title bar of theme "Windows Touch 8" is not correct.
• Is there a static resource in Telerik RibbonView DLL that provide a background brush for the window content.

Best regards,
Geoffrey

[Evgenia]

Hello Geoffrey,

From your pictures I see our RibbonView control with some strange mix of themes applied to its sub-controls (for example you have applied Office2013 theme to the RibbonView in your first image but the RibbonComboBox-es are with OfficeBlack theme applied). This happens when the controls can not find their theme styles and they fallback to OfficeBlack look. Are you switching themes runtime? If this is the case then please don't forget to remerge the new theme style files to your global application merged dictionaries (App.xaml resource dictionary). There is a help topic that explains this in more details -- Switching Themes at Runtime.
Also make sure that the style files get merged in a strict order where Telerik.Windows.Controls.xaml is always first:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.Input.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.Navigation.xaml"/>
            <ResourceDictionary Source="/Telerik.Windows.Themes.VisualStudio2013;component/Themes/Telerik.Windows.Controls.RibbonView.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

I prepared a sample project where I don't change the themes but apply VisualStudio2013 and everything looks as expected on my side. The sample is a stripped down version of our Silverlight FirstLook online demo. 

Let me know how this information works for you.

Regards,
Evgenia
Telerik

[Geoffrey]

Thanks for your reply, I use switch theme at runtime, I use the following method :

protected override void OnThemeChanged(CourbonTheme theme)
        {
            Application.Current.Resources.MergedDictionaries.Clear();

            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Telerik.Windows.Themes." + theme + ";component/Themes/System.Windows.xaml", UriKind.RelativeOrAbsolute) });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Telerik.Windows.Themes." + theme + ";component/Themes/Telerik.Windows.Controls.xaml", UriKind.RelativeOrAbsolute) });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Telerik.Windows.Themes." + theme + ";component/Themes/Telerik.Windows.Controls.Input.xaml", UriKind.RelativeOrAbsolute) });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Telerik.Windows.Themes." + theme + ";component/Themes/Telerik.Windows.Controls.Navigation.xaml", UriKind.RelativeOrAbsolute) });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Telerik.Windows.Themes." + theme + ";component/Themes/Telerik.Windows.Controls.Docking.xaml", UriKind.RelativeOrAbsolute) });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Telerik.Windows.Themes." + theme + ";component/Themes/telerik.windows.controls.fixeddocumentviewers.xaml", UriKind.RelativeOrAbsolute) });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Telerik.Windows.Themes." + theme + ";component/Themes/telerik.windows.controls.gridview.xaml", UriKind.RelativeOrAbsolute) });
            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Telerik.Windows.Themes." + theme + ";component/Themes/telerik.windows.controls.RibbonView.xaml", UriKind.RelativeOrAbsolute) });
        }

[Geoffrey]

Thanks for your reply, I use switch theme at runtime, I use the following method :

01.protected override void OnThemeChanged(CourbonTheme theme)
02.        {
03.            Application.Current.Resources.MergedDictionaries.Clear();
04.
05.            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = newUri("/Telerik.Windows.Themes." + theme + ";component/Themes/System.Windows.xaml", UriKind.RelativeOrAbsolute) });
06.            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = newUri("/Telerik.Windows.Themes." + theme + ";component/Themes/Telerik.Windows.Controls.xaml", UriKind.RelativeOrAbsolute) });
07.            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = newUri("/Telerik.Windows.Themes." + theme + ";component/Themes/Telerik.Windows.Controls.Input.xaml", UriKind.RelativeOrAbsolute) });
08.            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = newUri("/Telerik.Windows.Themes." + theme + ";component/Themes/Telerik.Windows.Controls.Navigation.xaml", UriKind.RelativeOrAbsolute) });
09.            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = newUri("/Telerik.Windows.Themes." + theme + ";component/Themes/Telerik.Windows.Controls.Docking.xaml", UriKind.RelativeOrAbsolute) });
10.            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = newUri("/Telerik.Windows.Themes." + theme +";component/Themes/telerik.windows.controls.fixeddocumentviewers.xaml", UriKind.RelativeOrAbsolute) });
11.            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = newUri("/Telerik.Windows.Themes." + theme + ";component/Themes/telerik.windows.controls.gridview.xaml", UriKind.RelativeOrAbsolute) });
12.            Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = newUri("/Telerik.Windows.Themes." + theme + ";component/Themes/telerik.windows.controls.RibbonView.xaml", UriKind.RelativeOrAbsolute) });
13.        }

Thanks for your help

[Evgenia]

Hi Geoffrey,

Everything seems fine to me with the code snippet you sent. Is it possible that you prepare a sample runnable project where the issues reproduce so that we can inspect locally what is going on? 
If it is more suitable for you you might use my attachment from the previous reply and try to reproduce the runtime theme switch issues there.

Looking forward to hearing from you.

Regards,
Evgenia
Telerik

[Geoffrey]

Hello,

You will find the sample project.in the following link.

Here

The themes are merged in App.xaml.cs in the method "protected override void OnThemeChanged(CourbonTheme theme)"

Thansk for your help.
Geoffrey

[Evgenia]

Hello Geoffrey,

I tried to run your attached project but to no avail. There seems to be some problem with the Courbon.Core assembly (I sent a snapshot of the Exception i get) and the version of Telerik.Reporting referenced in Courbon.Trace project.
I tried to inspect your source code to see where the problem might be and I should say that everything seems correct to me with themes change. However I saw that you are referencing Xaml binaries and I would like to mention that our implicit styles theming mechanism works with NoXAML binaries only (they can be found under your Telerik controls local installation path -- Binaries.NoXAML folder). You might find more detailed information on the implicit styles theming mechanism and the NoXaml binaries from our help article. Could you please give it a try and let me know whether this fixes the problem?

If you still encounter the same visual discrepancies after you have changed the reference to NoXaml binaries in your solution I'd like to ask that you send us a stripped down runnable version of it where there is nothing else but RibbonView , RibbonWindow and the runtime themes switch logic. This will be very helpful for us to investigate the issue easily and get back to you with more adequate feedback.

Regards,
Evgenia
Telerik

[Geoffrey]

Hello Evgenia,
Thanks for your answer.

Changind the binaries to NoXaml solve a lot of problems in RibbonView (no mixing of Office Back theme and another theme).

It remains some problems :

1. On the backstage view, the contextuals tabs are visibles (001.png).
2. All the themes works except Windows 8 Touch (002.png).
3. All RadNumericUpDown of my application have disappeared.

Thanks for your help 

[Geoffrey]

The point three is finally fixed. 
I changed the binaries 4.5 to 4.0 and it works. I saw that in "Binaries.NoXaml" folder there are two folders WPF40 and WPF45 but not in 'Themes.Implicit', why ?

I'm waiting for your answers on points 1 and 2.

[Evgenia]

Hi Geoffrey,

Indeed it is important that you reference the correct version of WPF binaries (WPF40 or WPF45) so that they match the WPF Framework version installed. As for the Themes.Implicit folder -- in fact the xaml style files that we ship have no difference when it comes to the WPF version they use. We separate them to Silverlight and WPF only and ship them separately with Silverlight or WPF binaries archive.
Onto your questions:
1. We left Contextual Tabs visible when the Backstage is open on purpose. You might however hide them if you wire to the ApplicationMenuOpenStateChanged  as it will fire whenever you open or close the BackstageMenu. To make the RibbonContextualGroup visible you have to set its IsActive property to true. Here's a small example:

private void RadRibbonView_ApplicationMenuOpenStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
     {
         if ((sender as RadRibbonView).IsBackstageOpen)
         {
             this.Dispatcher.BeginInvoke(new Action(() =>
                 {
                     this.ContextualGroup1.IsActive = false;
                     this.ContextualGroup2.IsActive = false;
                 }));
         }
         else
         {
             this.Dispatcher.BeginInvoke(new Action(() =>
                {
                    this.ContextualGroup2.IsActive = true;
                    this.ContextualGroup1.IsActive = true;
                }));
         }
     }

2. Unfortunately we reuse almost the same style for RadRibbonWindow for Windows8 and Windows8Touch themes. We have plans to make RadRibbonWindow to have the same visual appearance (the Height of the TitleBar and the buttons) as RadWindow in Windows8Touch theme and we'll fix this for one of our upcomming latest internal builds (released every Monday). You might see the Windows8Touch RibbonWindow from our Theming online demo.
Till we fix this you might customize the RibbonWindow Control Template -- there is a strict RowDefinition Height that we have set to 30px. You need to change it as well as the hardcoded 30px size of the Border with x:Name border. 
Let me know if you need any assistance with the customization.

I hope this information helps.

Regards,
Evgenia
Telerik

[Geoffrey]

Thanks for your reply, it works perfectly.

Do you plan to fix that problem in Q1 2016 ?

Best regards,
Geoffrey

[Evgenia]

Hi Geoffrey,

Yes, we have plans to customize RibbonWindow in Windows8Touch theme so that it is consistent with RadWindow in the same theme. We'll fix this for Q1 2016. 

Regards,
Evgenia
Telerik