Runtime Theme Switching

[Eric]

I am attemtping to have my application switch from a default theme of Visual Studio 2013 Dark to the Windows 8 Touch during runtime. The Visual Studio theme applies correctly but when I attempt to switch the theme dynamically to the Touch theme I get the following error: Cannot find resource named 'ButtonIconForeground_MouseOver'. Resource names are case sensitive. I understand what the error is but I don't understand why it is happening. I am using the following Telerik DLLs:

Telerik.Windows.Controls
Telerik.Windows.Controls.Data
Telerik.Windows.Controls.Docking
Telerik.Windows.Controls.Navigation
Telerik.Windows.Controls.Input
Telerik.Windows.Data

This is my code to apply the default Visual Studio 2013 Dark theme:

<Application x:Class="Mantis.Client.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:resources="clr-namespace:Mantis.Client.Resources"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
    <Application.Resources>
        <ResourceDictionary>
            <!--These theme resources are here as defaults-->
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Themes/VisualStudio/System.Windows.xaml" />
                <ResourceDictionary Source="/Themes/VisualStudio/Telerik.Windows.Controls.xaml" />
                <ResourceDictionary Source="/Themes/VisualStudio/Telerik.Windows.Controls.Data.xaml" />
                <ResourceDictionary Source="/Themes/VisualStudio/Telerik.Windows.Controls.Docking.xaml" />
                <ResourceDictionary Source="/Themes/VisualStudio/Telerik.Windows.Controls.Input.xaml" />
                <ResourceDictionary Source="/Themes/VisualStudio/Telerik.Windows.Controls.Navigation.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <HierarchicalDataTemplate x:Key="MenuItemTemplate"
                                      ItemsSource="{Binding Items}">
                <TextBlock Text="{Binding Text}" />
            </HierarchicalDataTemplate>

            <Style x:Key="MenuStyle"
                   TargetType="telerik:RadMenuItem"
                   BasedOn="{StaticResource RadMenuItemStyle}">
                <Setter Property="IsCheckable"
                        Value="{Binding IsCheckable}" />
                <Setter Property="IsChecked"
                        Value="{Binding IsChecked, Mode=TwoWay}" />
                <Setter Property="IsSeparator"
                        Value="{Binding IsSeparator}" />
                <Setter Property="IsEnabled"
                        Value="{Binding IsEnabled}" />
                <Setter Property="StaysOpenOnClick"
                        Value="{Binding StaysOpenOnClick}" />
                <Setter Property="Icon"
                        Value="{Binding Image}" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

public partial class App : Application
    {
        private MantisBootstrapper _bootstrapper;

        protected override void OnStartup(StartupEventArgs e)
        {
            Telerik.Windows.Controls.VisualStudio2013Palette.LoadPreset(Telerik.Windows.Controls.VisualStudio2013Palette.ColorVariation.Dark);

            base.OnStartup(e);

            this._bootstrapper = new MantisBootstrapper();
            this._bootstrapper.Run();
        }

        protected override void OnExit(ExitEventArgs e)
        {
            this._bootstrapper.Shutdown();

            base.OnExit(e);
        }
    }

Here is where I apply the Windows 8 Touch theme:

private void RadMenuItem_Click(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            App.Current.Resources.MergedDictionaries.Clear();

            App.Current.Resources.MergedDictionaries.Add(new Telerik.Windows.Controls.Windows8TouchResourceDictionary());

            App.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Themes/Touch/System.Windows.xaml", UriKind.Relative) });
            App.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Themes/Touch/Telerik.Windows.Controls.xaml", UriKind.Relative) });
            App.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Themes/Touch/Telerik.Windows.Controls.Data.xaml", UriKind.Relative) });
            App.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Themes/Touch/Telerik.Windows.Controls.Docking.xaml", UriKind.Relative) });
            App.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Themes/Touch/Telerik.Windows.Controls.Input.xaml", UriKind.Relative) });
            App.Current.Resources.MergedDictionaries.Add(new ResourceDictionary { Source = new Uri("/Themes/Touch/Telerik.Windows.Controls.Navigation.xaml", UriKind.Relative) });
        }

[Masha]

Hello Eric,

Thank you for the feedback.

Can you check whether merged resource dictionaries have build action set to Page?  We are familiar with such kind of problem when the build action is set to Resource. Another solution is to reference your themes from the theme assemblies directly as demonstrated in the "Setting a Theme (Using Implicit Styles)" help article.

I hope this helps.

Regards,
Masha
Telerik

 

 

[Eric]

Thank you for your help. I was able to get the exception to stop by setting the Resource Dictionaries to Page instead of Resource for the build action. I did have to add a reference to the Telerik.Windows.Controls.Input assembly to get it to compile because I had a Prism module that needed the resources for that assembly. I am trying to avoid using the assemblies because I know our designer is going to want to change some of the looks for the controls and I figured it would be easiest to have all the resources easily available.

Now that I have the exception taken care of I am now having an issue with some of the styles being applied to my controls. It appears that not all of them are changing properly when I switch the themes. I have attached images of the issue I am having now.

[Masha]

Hi Eric,

I'm glad you've managed to fix the exception.

Regarding the other question, I guess the issue occurs because there are styles defined in App.xaml. I suggest that you add custom styles in a separate ResourceDictionary and to merge it along with other dictionaries whenever the theme is changed. This way all BasedOn styles will be reapplied with the changed theme and you will avoid this kind of issues in the future.

I hope this helps.

Regards,
Masha
Telerik

 

 

[Eric]

Great catch, that was my issue. Thanks for the help!