Themes not applied to RadWindow Child Controls

[Gopinath]

Hello Team,

I need to apply the Theme to my application at the runtime, while user changed the Theme name in the Drop Down control.
I just followed couple of articles here and I implemented the same. But the problem is Themes cannot applied to the controls those are added inside the RadWindow control.

My Code is:

XAML:

<StackPanel x:Name="ContentStackPanel">

                

    <telerik:RadComboBox Name="themesBox" Width="250" SelectedIndex="0">

        <telerik:Office_BlackTheme  />

        <telerik:Office_BlueTheme />

        <telerik:Office_SilverTheme />

        <telerik:VistaTheme />

    </telerik:RadComboBox>

                  

    <telerik:RadDatePicker Name="radDatePicker1" Height="22" Width="411" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=themesBox}" />



    <telerik:RadButton Content="Show Child" Height="30" Name="radButton1" Width="357" Click="radButton1_Click" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=themesBox}" />

    <telerik:RadWindow x:Name="radwin1" Header="RadWindow" HorizontalAlignment="Stretch" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=themesBox}" Height="300" Left="50" Top="50" VerticalAlignment="Stretch" Width="400">



        <telerik:RadDatePicker Name="radDatePicker2" Height="33" Width="312" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=themesBox}" />



    </telerik:RadWindow>

                  

 </StackPanel>

Code Behind:

private void radButton1_Click(object sender, RoutedEventArgs e)
{
    radwin1.CanClose = true;
    radwin1.Show();
}

The themes are applied to the controls are in root grid. If the controls are in RadWindow its not working.

[Vanya Pavlova]

Hi Gopinath,

I have not managed to reproduce the issue and everything worked as expected-I am sending you an example
using your code,you can find also a screenshot of the project's test page.
Please let me know if you need any further assistance.

Best wishes,
Vanya Pavlova
the Telerik team

[Gopinath]

Hi Vanya Pavlova,

Thanks a lot for your reply, I think the problem is in my project and I resolved it based on you sample.

Now I am facing one more problem.

In my mainpage.xaml I have a Themes DropDown and a Rad Docing & Document Pane. At the runtime I am loading a silverlight user control inside document pane.

Now when user changed the theme in dropdown I need to apply the same to all the controls inside the document pane (newly loaded silverlight user control).

Problem:

When I change the theme the controls inside the  document pane is not get refelected. Please help me to resolve it.

MainPage.xaml

<UserControl x:Class="ChildWindowProblem.MainPage"
    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:telerik2="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
     xmlns:ThemesManager="clr-namespace:ChildWindowProblem"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="750" d:DesignHeight="550" x:Name="root">

<Grid x:Name="layoutRoot" Background="White">

        <telerik:RadComboBox Name="themesBox" Width="250" SelectedIndex="0" Height="28" Margin="195,0" VerticalAlignment="Top">
                <telerik:Office_BlackTheme   />
                <telerik:Office_BlueTheme />
                <telerik:Office_SilverTheme />
                <telerik:SummerTheme/>
                <telerik:TransparentTheme/>
                <telerik:VistaTheme />
             </telerik:RadComboBox>
            <telerik:RadDatePicker Name="radDatePicker1" Height="22" Width="411" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=themesBox}" Margin="120,92,109,0" VerticalAlignment="Top" d:LayoutOverrides="Height" />
            <telerik:RadButton Content="Show Child" Height="30" x:Name="radButton1" Width="357" Click="radButton1_Click" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=themesBox}" Margin="139,45,144,0" VerticalAlignment="Top" d:LayoutOverrides="Height" />
            <telerik2:RadWindow x:Name="radwin1" Header="RadWindow" HorizontalAlignment="Right" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=themesBox}" Height="300"  VerticalAlignment="Bottom" Width="400" Margin="0,0,-267,-368" d:LayoutOverrides="Width, Height">


                <telerik:RadDatePicker x:Name="radDatePicker2" Height="33" Width="312" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=themesBox}" />


            </telerik2:RadWindow>
           <telerik:RadDocking x:Name="Docking" Margin="0,127,0,0" telerik:StyleManager.Theme="{Binding SelectedValue, ElementName=themesBox}"  >
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup x:Name="DocumentGroup">

                        <telerik:RadDocumentPane Header="Fact Card Report" Title="Fact Card Report" x:Name="rdp_FactCardReport"
                                telerik:RadDocking.SerializationTag="DocumentPane" IsSelected="True">

                        </telerik:RadDocumentPane>

                        <telerik:RadDocumentPane Header="Document 1" Title="Document 1"
                                telerik:RadDocking.SerializationTag="DocumentPane">
                        </telerik:RadDocumentPane>
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>

            </telerik:RadDocking.DocumentHost>
            <telerik:RadSplitContainer InitialPosition="DockedLeft" Width="300">
                <telerik:RadPaneGroup>
                    <telerik:RadPane Header="Search"
                            telerik:RadDocking.SerializationTag="Search">
                    </telerik:RadPane>
                </telerik:RadPaneGroup>
            </telerik:RadSplitContainer>
        </telerik:RadDocking>
        </Grid>

</UserControl>

MainPage.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Telerik.Windows.Controls;

namespace ChildWindowProblem
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            rdp_FactCardReport.Content = new FactCardReport();
        }

        private void radButton1_Click(object sender, RoutedEventArgs e)
        {
            radwin1.CanClose = true;
            radwin1.Show();

        }
    }
}

FactCardReport.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    x:Class="ChildWindowProblem.FactCardReport"
    d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot" Background="White">

        <telerik:RadMenu Margin="97,129,124,0" VerticalAlignment="Top">
            <telerik:RadMenuItem Header="Item 1">
                <telerik:RadMenuItem Header="Sub Item 1"/>
                <telerik:RadMenuItem Header="Sub Item 2"/>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Header="Item 2">
                <telerik:RadMenuItem Header="Sub Item 3"/>
                <telerik:RadMenuItem Header="Sub Item 4"/>
                <telerik:RadMenuItem Header="Sub Item 5"/>
            </telerik:RadMenuItem>
        </telerik:RadMenu>
        <telerik:RadButton Content="Button" Margin="239,63,110,0" VerticalAlignment="Top" />

    </Grid>

</UserControl>

FactCardReport.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ChildWindowProblem
{
    public partial class FactCardReport : UserControl
    {
        public FactCardReport()
        {
            // Required to initialize variables
            InitializeComponent();
        }
    }
}

I am looking forward to hear from you to fix this application, its very urgent.

[Vanya Pavlova]

Hello Gopinath,

Yes that's normal behaviour because in this line of code:

<telerik:RadButton Content="Button" Margin="239,63,110,0" VerticalAlignment="Top" telerik:StyleManager.Theme="{Binding Theme, ElementName=MainPage}"/>

The button's theme could not resolve which is the  MainPage here-this technique is often used in controltemplates,but unfortunately in this case is not appliable.
If you try to add the FactCardReport UserControl only in xaml within the document pane,everything will be fine.
If you need any further assistance please let me know.

Regards,
Vanya Pavlova
the Telerik team

[Gopinath]

Hi Vanya Pavlova,
 
I apologize, by mistakenly I have added the stylemanager attribute in FactCardReport user control. Even though I removed it, still the theme is not applied (also i corrected the same in my previous post).

I hope you can understand my problem, could you please give me your own sample. We are in bottle neck situation at Development End.

Thanks,
Gopinath D
Bank of America - India

[Pana]

Hello Gopinath,

The UIElements in the UserControl that you instantiate in the main page have no access to the themes combobox. In theory you can change themes in ComboBox, as well as ListBox, TreeView or anything that supports selection so having a selector for the theme is commonly used but it is naive to bind directly to the combo especially a large scale application. You will meet difficulties like the UserControl problem.

I would recommend you to follow the MVVM pattern and create a view model that will have property like CurrentTheme that will propagate through the DataContext in each UIElement. I have also attached such project. It has a basic view model that provides a collection with the available themes, proper user friendly names or them and a CurrentTheme that could be used to bind the theme of your controls to. The DataContext is set on the MainPage and pretty much propagates through the docking elements and windows so it can be accessed from within the UserControls and RadWindows. If you want to set a custom view model on a control or a window you may define a CurrentTheme on it too and keep it updated with the MainPage's main view model.

In you application you define a RadWindow within the xaml of the MainPage but we would recommend you to create custom RadWindows like you create CustomControls. You can see in the attached project how a FactCardReport is created as well as a RadWindowRepport control. They are pretty much the same only that the window based should be instantiated and .Show() should be called while the user control is simply set as a content for a ContentControl.

Best wishes,
Panayot
the Telerik team