Setting the background of the main window with a theme

[Patrick]

Hello,
I'm trying to use the Expression Dark in a WPF application and can not find a way to have the window background automatically to the right color.
Following what I've found in the forums, documentations and examples, I've come with the following code, but it does not work: the window background remains white. I know that I can code manually the background of the window to Black, but I really want the theme to be changeable, so I want the color to come from the theme.

MainWindow.xaml.cs:

using System;
using System.Windows;
using Telerik.Windows.Controls;

namespace WpfApplication2
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      StyleManager.ApplicationTheme = new Expression_DarkTheme();
      InitializeComponent();
    }
  }
}

MainWindow.xaml:

<Window
  x:Class="WpfApplication2.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:tk="http://schemas.telerik.com/2008/xaml/presentation"
  xmlns:tkqs="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
  Title="MainWindow" Height="350" Width="525">
  <Grid tkqs:ThemeAwareBackgroundBehavior.IsEnabled="True"
        tk:StyleManager.Theme="Expression_Dark">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TextBlock HorizontalAlignment="Left"
               Margin="5"
               Text="TextBlock"
               tk:StyleManager.Theme="Expression_Dark" />
    <TextBox HorizontalAlignment="Left"
             Margin="5"
             Text="TextBox"
             tk:StyleManager.Theme="Expression_Dark"
             Grid.Row="1" />
    <Button Content="Button"
            HorizontalAlignment="Left"
            Margin="5"
            tk:StyleManager.Theme="Expression_Dark"
            Grid.Row="2" />
  </Grid>
</Window>

What must I change to have the background changed automatically?

Patrick

[Vanya Pavlova]

Hello Patrick,

 
The ThemeAwareBackground shout be set to a Border element not to a Grid in order to make it work.
Can you please try this one and let me know how it goes?

Regards,
Vanya Pavlova
the Telerik team

[Patrick]

Hello Vanya,

replacing MainWindow.xaml with:

<Window
  x:Class="WpfApplication2.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:tk="http://schemas.telerik.com/2008/xaml/presentation"
  xmlns:tkqs="clr-namespace:Telerik.Windows.Controls.QuickStart;assembly=Telerik.Windows.Controls"
  Title="MainWindow" Height="350" Width="525">
  <Border tkqs:ThemeAwareBackgroundBehavior.IsEnabled="True"
          tk:StyleManager.Theme="Expression_Dark">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
      <TextBlock HorizontalAlignment="Left"
                 Margin="5"
                 Text="TextBlock"
                 tk:StyleManager.Theme="Expression_Dark"/>
      <TextBox HorizontalAlignment="Left"
               Margin="5"
               Text="TextBox"
               tk:StyleManager.Theme="Expression_Dark"
               Grid.Row="1"/>
      <Button Content="Button"
              HorizontalAlignment="Left"
              Margin="5"
              tk:StyleManager.Theme="Expression_Dark"
              Grid.Row="2"/>
    </Grid>
  </Border>
</Window>

changes nothing: the background is still white.....
Patrick

[Patrick]

Hello Vanya,
I just installed the latest version of RadControls for WPF and ThemeAwareBackgroundBehavior is no more available!
What is the solution now to have the background change with the theme?
Patrick

[Vanya Pavlova]

Hello Patrick,



I am glad to hear that you have already tried out our brand new Q3 2012 release of RadControls/WPF.
I hope that you will enjoy the new features and the various bug fixes included in this version.
Yesterday we had an internal dicussion about this behavior. Previously it has been incorporated within Telerik.Windows.Controls assembly, however it is designed only for our QuickStartFramework.
We have recently removed it from this assembly and by that reason you cannot get the same behavior presented in our demos. This behavior is still available in demo project for both platforms Silverlight/WPF.
For the time being I may suggest you to write your own or to get and modify the ThemeAwareBackgroundBehavior based on your needs.



Kind regards,
Vanya Pavlova
the Telerik team

[Patrick]

Hello Vanya,
it means that if we want to use the Expression Dark or the Transparent theme, we need to add code ourself to have the right colors in the background!
A solution to this problem would be that the theme management software define by code a brush as a static resource of the application, for example named TelerikThemeBackgroundBrush, so we can bind to it to have the right background color:

<Grid Background="{StaticResource TelerikThemeBackgroundBrush}">
  ...
</Grid>

Patrick

[Patrick]

Hello Vanya,
I've made some experiments with implicit styles and using RadWindow as the main window of the application. I now have a test case that works correctly with both of theme, but I find 3 problems (bugs?) with this:

1. There is no implicit style for the MS Label control
   All other MS controls that have no equivalent Telerik controls have an implicit style, except this one. It would be nice if you can add this one to the styles.
   
   
2. Problem with the focus of the main window
   After changing the theme of the main window (which is a RadWindow), if I move the mouse cursor on the edge of the window or on the buttons of the top left, there is no change in the cursor or button visual. I have to click on the window to make this working correctly again.
   When clicking on the top buttons, they are doing their work, even if they don't show the fact that we are hovering them.
   For the side, the cursur is not changing and we can't resize the window... until we click on it.
   This is confusing for the user and should be corrected.
   
   
3. Restore size
   When using RadWindow as the main application window and without specifying a size or position, the RadWindow behaves not the same as a Windows window:
   - the original size and position and not Windows automatic ones;
   - after minimizing and then restoring the window, we only see a small part of the window caption.

Patrick

[Yana]

Hello Patrick,

Straight to your questions:

1. There is really no implicit style for MS Label control, but you can easily create such Style in the System.Windows.xaml file of each theme.  In this way the Label style will be consistent with RadControls style.

In the attached project I've demonstrated how to achieve this in ExpressionDark theme - I just copied the default Style from here in Themes/ExpressionDark/System.Windows.xaml and modified Background, Foreground, BorderBrush, etc. properties to be the same as in RadControls. You should add such Style for each theme that you're using in the project.  In this way switching themes at runtime will change the style of MS Label as well.

2 -3.  I wasn't able to reproduce these issues, please check the attached project, what is different in your case?

Kind regards,
Yana
the Telerik team

[Patrick]

Hello Yana,

1. That's the problem: I need to copy the themes and modify them.
But when a new version of the RadControls is out, I need to do the same thing again and that's a loss of time. In addition, what colors should I select for the label?
It would be much more simpler if Telerik adds the last missing control.

2. You can't reproduce it because you change theme using buttons and not menus.

3. You can't reproduce it because you've specified the size of the RadWindow.

For 2 and 3, replace your MainWindow.xaml content with the following and you will see the problem:

<telerik:RadWindow
  x:Class="WindowRunTimeThemes.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
  xmlns:navigation="clr-namespace:Telerik.Windows.Controls.Navigation;assembly=Telerik.Windows.Controls.Navigation"
  navigation:RadWindowInteropHelper.ShowInTaskbar="True"
  Header="MainWindow">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="50" />
      <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <telerik:RadMenu>
      <telerik:RadMenuItem Header="Style">
        <telerik:RadMenuItem Header="ExpressionDark" Click="ExpressionDark_Click" />
        <telerik:RadMenuItem Header="OfficeBlue" Click="OfficeBlue_Click" />
      </telerik:RadMenuItem>
    </telerik:RadMenu>

    <StackPanel Orientation="Horizontal" Grid.Row="1">
      <telerik:RadButton Content="ExpressionDark"  Width="110"  Margin="10" Click="ExpressionDark_Click" />
      <telerik:RadButton Content="OfficeBlue" Width="110" Margin="10" Click="OfficeBlue_Click" />
    </StackPanel>

    <StackPanel Grid.Row="3">
      <Label Content="Test Style for a Label" Margin="10" />
      <telerik:RadListBox x:Name="ListBox1" />
    </StackPanel>

  </Grid>
</telerik:RadWindow>

Patrick

[Patrick]

Yana,
when the theme is changed, the following messages are displayed in the Visual Studio output window:

System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=ReflectionSettings.HiddenPercentage; DataItem=null; target element is 'GradientStop' (HashCode=62618006); target property is 'Offset' (type 'Double')
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:(no path); DataItem=null; target element is 'VisualBrush' (HashCode=38893755); target property is 'Visual' (type 'Visual')

Patrick

[Yana]

Hi Patrick,

2. You can fix this by using a Dispatcher when changing the theme:

private void ExpressionDark_Click(object sender, RoutedEventArgs e)
{
    Dispatcher.BeginInvoke(new Action(
    () =>
    {
        Application.Current.Resources.MergedDictionaries.Clear();
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("Themes/ExpressionDark/System.Windows.xaml", UriKind.RelativeOrAbsolute)
        });
        ...
    }));

3. This seems a known issue in RadWindow, it is logged, but I am afraid that the fix is not planned for the next release. You can vote for it and track the PITS item here.

As to the errors in the Output Window - it is normal to see these errors as the Binding system waits for the element to load and then searches the visual tree for the specified element. That is why you see the error but it works after the element is loaded.

Greetings,
Yana
the Telerik team

[Patrick]

Yana,
2. Yes it works, but you should modify the example blog post to use the Dispatcher.
3. Ok, I voted. But can't you do a warning on the documenation of RadWindow, indicating that there is a problem when the Height and Width of the RadWindow is not set, and with a link to the PITS system.

Also, do you known that the PITS system is not working under Firefox...

Patrick

[Yana]

Hello Patrick,

2. The Dispatcher is needed only in specific cases.

3. Usually we do not add links to PITS in our documentation.

I've just tested PITS in Firefox and it worked without a problem at our side. What errors have you received?

Greetings,
Yana
the Telerik team

[Patrick]

Yana,
for the PITS system:
- sometimes clicking on the application does nothing.
- sometimes the click is not on the right place: for example, I had to click 20 pixels above the control to have it work.
Patrick

[Yana]

Hello Patrick,

We will research these issues, thanks for sending your feedback.

All the best,
Yana
the Telerik team

[Martin]

Using RadControls 2013 Q3, is there still no way to have the Window background match the theme background automatically?

If not, what's the current hack?

[Masha]

Hello Martin,

There is no way to have the Window background to match the theme background automatically.

Could you please explain in more details the exact scenario you are trying to achieve and we will be glad to help you?

Regards,
Masha
Telerik

[Martin]

I'm using implicit theming with the XAML for the active theme being loaded from the theme dll into App.Resources.

I create a Window. It's not themed, i.e. its background remains white and takes no notice whatsoever of the current theme.

[Masha]

Hi Martin,

When using Implicit Styles any custom UserControl  that is created and set as RadWindow needs its Style to be set. The issue is that when using the No.XAML assemblies the Style of those custom RadWindow controls is set to null meaning they have no Styles and seem to no show when they are actually shown but have no visible elements. All you need to do is set the Style of that RadWindow to the RadWindowStyle StaticResource which comes from the merged dictionaries.

Please review the attached project.

Regards,
Masha
Telerik

[Martin]

As it states in my post I'm not using a RadWindow, I'm using a normal System.Windows.Window.

Incidentally the reason I'm not using a RadWindow is because they are currently broken, if you use a RadWindow as your application's main window then in Windows 8 the taskbar window thumbnail popup doesn't work.

http://www.telerik.com/support/pits.aspx#/details/Issue=14858

P.S. Your issue tracker is horrific. CTRL+left click a link in Firefox and instead of opening in a new tab it opens in the same window. Right click a link (intending to select 'open in new tab') and you just get a context menu with the single entry 'Silverlight'. Honestly who in their right mind would use Silverlight for something like an issue tracking system when it doesn't even support the most basic web navigation UI.

[Masha]

Hi Martin,

I am sorry for the confusion.

We provide styles for only limited set of regular MS controls and I am afraid that System.Windows.Window is not included in this list ( you can check it here ).  As to the mentioned issue - I have raised its priority, so it will be fixed in the upcoming releases.

Thank you for sending the detailed feedback about PITS, it will be definitely considered.

Regards,
Masha
Telerik

[Mark]

Martin/Patrik

I have been able to get the Window background and foreground to change with the theme by using this approach:

1.  In App.xaml, make sure to setup one of the Telerik themes as a default.  Similar to this:

<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/Telerik/Themes/Windows7/System.Windows.xaml"/>
<ResourceDictionary Source="Skins/Telerik/Themes/Windows7/Telerik.Windows.Controls.Docking.xaml"/>
<ResourceDictionary Source="Skins/Telerik/Themes/Windows7/Telerik.Windows.Controls.GridView.xaml"/>
<ResourceDictionary Source="Skins/Telerik/Themes/Windows7/Telerik.Windows.Controls.Input.xaml"/>
<ResourceDictionary Source="Skins/Telerik/Themes/Windows7/Telerik.Windows.Controls.Navigation.xaml"/>
<ResourceDictionary Source="Skins/Telerik/Themes/Windows7/Telerik.Windows.Controls.xaml"/>
</ResourceDictionary.MergedDictionaries>

2.  These resources provide a few keys you can use in your windows.  I setup the window Background and Foreground properties in XAML like this for all my Windows and UserControls:

Background="{DynamicResource WindowBackground}"
Foreground="{DynamicResource ControlForeground_Normal}">

Now when I switch themes, the window(s) change as well.  It would be nice if there was a "WindowForeground" key, but there isn't.  I had to search for a key that would work.  BTW, this solution will not work for the Windows8 and Office2013 themes.  Those themes are setup completely different than all the rest!  I don't even offer these themes as a result.  ... way to go Telerik.

Thanks
Mark

[Guy]

Hi

This does indeed work well for the Windows 7 theme. Is there any way similar to this to get the Windows 8 and Office 2013 themes to correctly update the background colours at runtime?

Thanks,

Guy

[Masha]

Hello,

You can not use the same approach for Windows8 and Office2013 as they do not have defined WindowBackground and ControlForeground_Normal brushes. What you can do is to create a separate resource dictionary for each theme(Windows8 and Office2013) and defined brushes named WindowBackground and ControlForeground_Normal with appropriate values. After that, you should merge needed resource dictionaries every time when the theme is changed. In order to avoid merging different resource dictionaries I suggest you using RadWindow control instead of System.Windows.Window.

I hope this helps.


Regards,
Masha
Telerik