How to change the Background for StackPanel with theme?

[Ke]

I want to use change theme function, but I found that the background color of stackpanel will not change with theme setting. The default background color of stackpanel only act when first app start, then we change the theme, it does not change its color.
The code is :

<Window x:Class="MainWin.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"
        Title="MainWindow" Height="350" Width="525">
 
    <telerik:RadDocking x:Name="radDocking" HasDocumentHost="False" AllowUnsafeMode="True">
 
        <telerik:RadSplitContainer InitialPosition="DockedTop" Height="50" Orientation="Vertical">
            <telerik:RadPaneGroup>
                <telerik:RadPane PaneHeaderVisibility="Collapsed">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" x:Name="Part1">
                            <telerik:RadButton Content="Office_Blue" Width="100" Height="30" Click="RadButton_Click"/>
                            <telerik:RadButton Content="Expression_Dark" Width="100" Height="30" Click="RadButton_Click"/>
                        </StackPanel>
                        <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  Grid.Row="1" Grid.Column="0"   x:Name="Part2" >
                            <Label Content="Test1" HorizontalContentAlignment="Center" VerticalContentAlignment="Center"/>
                        </StackPanel>
                        <StackPanel Grid.Row="1" Grid.Column="1">
                            <telerik:Label Content="Label 2"  HorizontalAlignment="Center" x:Name="Part3"/>
                        </StackPanel>
                    </Grid>
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;
 
namespace MainWin
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            StyleManager.ApplicationTheme = new Expression_DarkTheme();
            //StyleManager.ApplicationTheme = new Office_BlueTheme();
            InitializeComponent();
        }
 
        private void RadButton_Click(object sender, RoutedEventArgs e)
        {
            RadButton btn = sender as RadButton;
            if (btn.Content.ToString() == "Office_Blue")
            {
                SetGlobalTheme(new Office_BlueTheme());
            }
            else
            {
                SetGlobalTheme(new Expression_DarkTheme());
            }
        }
 
 
        public static void SetGlobalTheme(Theme theme)
        {
            StyleManager.ApplicationTheme = theme;
 
            foreach (Window w in Application.Current.Windows)
            {
                SetThemeToVisualObject(w);
            }
        }
   
        public static void SetThemeToVisualObject(DependencyObject myVisual)
        {
 
            foreach (object o in LogicalTreeHelper.GetChildren(myVisual))
            {
                if (o is FrameworkElement)
                {
                    if (o.GetType().AssemblyQualifiedName.StartsWith("Telerik.Windows.Controls"))
                        StyleManager.SetTheme((FrameworkElement)o, StyleManager.ApplicationTheme);
 
                    SetThemeToVisualObject((FrameworkElement)o);
                }
            }
        }
    }
}

In the MainWindow() constructor, if we use 

StyleManager.ApplicationTheme = new Expression_DarkTheme();

then we start the app, we will find the StackPanel is dark,
However, if we use

StyleManager.ApplicationTheme = new Office_BlueTheme();

the StackPanel is white.

Click button in UI will not affect the background of Stackpanel.

How to solve this?

[Pana]

Hi,

Walking the visual tree setting a theme has never worked well. In your implementation you would skip some microsoft controls like ScrollViewer, TextBox, Button, CheckBox, RadioButton etc. I would recommend you to add a DependencyProperty Theme on the Windows in your application and bind the controls in the Window to the window's property. Using bindings with RelativeSource FindAncestor with Type Window would come in handy.

If you are using a MVVM you could add a Theme property SelectedTheme in the ViewModel and bind the telerik:StyleManager.Theme properties to the view model.

Other option would be to set StyleManager.ApplicatioTheme and remove and recreate the controls as we do in our QSF examples.

Also in your post you mention the Background of the StackPanel however we do not provide themes for Panels. I assume you mean the parts of the RadDocking.

Regards,
Pana
the Telerik team