WPF Theme

[CB]

Hi, 

I've found an example on how to change the theme at runtime with silverlight but I need to do it with WPF, is it possible ?

Also, I've applied a theme to the VS2010 controls like this:

        <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=TextBox}}" />
        <Style TargetType="{x:Type ScrollViewer}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=ScrollViewer}}" />
        <Style TargetType="{x:Type RadioButton}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=RadioButton}}" />
        <Style TargetType="{x:Type ListBox}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=ListBox}}" />
        <Style TargetType="{x:Type CheckBox}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=CheckBox}}" />
        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=Button}}" />
        <Style TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=PasswordBox}}" />
        <Style TargetType="{x:Type RepeatButton}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:VistaTheme, ElementType=RepeatButton}}" />

But I need their theme to follow the application's theme (and follow it too if it changes).

I hope you can help me.

Thanks.

[Vanya Pavlova]

Hi Jean-François,

 

You have created implict styles based on our Vista theme, once you set it as an application theme, the seetings within these styles would be respected relative to this theme:


MainWindow.xaml:

<Window.Resources>
    <Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {telerik:ThemeResourceKey ThemeType=telerik:Expression_DarkTheme, ElementType=TextBox}}">
        <Setter Property="Foreground" Value="Red"/>
    </Style>
</Window.Resources>
<Grid>
    <StackPanel Orientation="Horizontal">
        <TextBox Text="WPF" Width="100"/>
    </StackPanel>
</Grid>

MainWindow.xaml.cs:

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

Using the snippets above you will have a Red coloured Foregorund in Expression_Dark theme for all TextBox controls within the application. Also you may find attached the WPF version of the approach from the previously referenced blog post. This example is based on the Window's Content which is recreated at runtime. 
Feel free to customize it in the way you need. 


If you need any further assistance do not hesitate to contact us!

All the best,
Vanya Pavlova
the Telerik team

[CB]

Hi,

I can't seem to find the attached WPF example or maybe I'm missing something since changing StyleManager.ApplicationTheme at runtime while a window is displayed does not seem to change anything in the window.

Also, if I get it to work and I switch it to, lets say the Windows 7 Theme (while running the software), the text box would still be stuck with the Dark Theme (since it's hard coded in the style). Is there anyway around this ?

[Vanya Pavlova]

Hi Jean-François,

 

I have reattached the example of the previously referenced blog post. Add the style from my previous reply relative to the Windows7Theme, set this theme as an application theme and you will see that the changes within this style will be applied correspondingly.

Kind regards,
Vanya Pavlova
the Telerik team

[CB]

Ah, Now I understand !

Ok, so now I see how to "refresh" the theme but I there any way to do the same thing with the standard visual studio controls (TextBox, ScrollViewer, RadioButton, ListBox, CheckBox, Button, PasswordBox and RepeatButton) ?

Can we somehow bind their styles with StyleManager.ApplicationTheme instead or hard-coding with in their styles ?

[Vanya Pavlova]

Hi Jean-François,

 

The Telerik themes can be applied to the following native Silverlight controls:

1.System.Windows.Button
2.System.Windows.CheckBox
3.System.Windows.ListBox
4.System.Windows.RadioButton
5.System.Windows.ScrollViewer
6.System.Windows.PasswordBox
7.System.Windows.RepeatButton
8.System.Windows.TextBox



Once you change the application theme these controls will pick up their styles automatically relative to the current Telerik theme.


 

Greetings,
Vanya Pavlova
the Telerik team

[CB]

Well for WPF I've managed to get them to follow the StyleManager.ApplicationTheme by using these styles:

        <Style TargetType="{x:Type TextBox}">
            <Setter Property="telerik:StyleManager.Theme" Value="{x:Static telerik:StyleManager.ApplicationTheme}"/>
        </Style>
        
        <Style TargetType="{x:Type ScrollViewer}">
            <Setter Property="telerik:StyleManager.Theme" Value="{x:Static telerik:StyleManager.ApplicationTheme}"/>
        </Style>
 
        <Style TargetType="{x:Type RadioButton}">
            <Setter Property="telerik:StyleManager.Theme" Value="{x:Static telerik:StyleManager.ApplicationTheme}"/>
        </Style>
 
        <Style TargetType="{x:Type ListBox}">
            <Setter Property="telerik:StyleManager.Theme" Value="{x:Static telerik:StyleManager.ApplicationTheme}"/>
        </Style>
 
        <Style TargetType="{x:Type CheckBox}">
            <Setter Property="telerik:StyleManager.Theme" Value="{x:Static telerik:StyleManager.ApplicationTheme}"/>
        </Style>
 
        <Style TargetType="{x:Type Button}">
            <Setter Property="telerik:StyleManager.Theme" Value="{x:Static telerik:StyleManager.ApplicationTheme}"/>
        </Style>
 
        <Style TargetType="{x:Type PasswordBox}">
            <Setter Property="telerik:StyleManager.Theme" Value="{x:Static telerik:StyleManager.ApplicationTheme}"/>
        </Style>
 
        <Style TargetType="{x:Type RepeatButton}">
            <Setter Property="telerik:StyleManager.Theme" Value="{x:Static telerik:StyleManager.ApplicationTheme}"/>
        </Style>

[David]

Hi,

I'm looking for a definitive list of which standard WPF controls are supported with Telerik themes. While I've found several posts on the matter (including this one) on these forums, I've found various different lists depending on the time of the post and version of the controls. This is the most current list I can find, however I am unsure whether this list has changed for the 2011 Q2 release.

Can we have a definitive list that we can reference, for example within the official documentation? I'm unsure whether one already exists, however I haven't been able to find it.

Kind regards,
Dave.

[Vanya Pavlova]

Hello David,

 

Thank you for your feedback! We are constantly working on improving our online documentation and we may add such an article in our docs. For the time being the full control list of native WPF controls supported by our theming mechanism is listed above. We ship our themes as separate projects and you may find the list within System.Windows.xaml ResourceDictionary as part of each project. 


If you need any further assistance do not hesitate to contact us!

Regards,
Vanya Pavlova
the Telerik team

[David]

Hi,

For anyone interested, here's the style code I'm using (based on J-F's):

<Style
    x:Key="TelerikStyle"
    TargetType="{x:Type FrameworkElement}">
    <Setter Property="telerik:StyleManager.Theme" Value="{x:Static telerik:StyleManager.ApplicationTheme}" />
</Style>
<Style
    BasedOn="{StaticResource TelerikStyle}"
    TargetType="{x:Type Button}" />
<Style
    BasedOn="{StaticResource TelerikStyle}"
    TargetType="{x:Type CheckBox}" />
<Style
    BasedOn="{StaticResource TelerikStyle}"
    TargetType="{x:Type ListBox}" />
<Style
    BasedOn="{StaticResource TelerikStyle}"
    TargetType="{x:Type PasswordBox}" />
<Style
    BasedOn="{StaticResource TelerikStyle}"
    TargetType="{x:Type RadioButton}" />
<Style
    BasedOn="{StaticResource TelerikStyle}"
    TargetType="{x:Type RepeatButton}" />
<Style
    BasedOn="{StaticResource TelerikStyle}"
    TargetType="{x:Type ScrollViewer}" />
<Style
    BasedOn="{StaticResource TelerikStyle}"
    TargetType="{x:Type TextBox}" />
<Style
    BasedOn="{StaticResource TelerikStyle}"
    TargetType="{x:Type ToolTip}" />

The key difference is that I've create a style called "TelerikStyle" that can be reused. If I want to override the default style for a particular TargetType on a specific window/control, I can simply reinherit the TelerikStyle using BasedOn and add my own customizations.

Kind regards,
Dave.

[Amin]

hi.

I am using the "ApplicationThemeManager.cs" from the "RadControls for WPF Q2 2012 Demos".
I called the "EnsureResourcesForTheme" method with these resourses as argument and the theme name.
private string[] resourcePaths = new string[]
                    {
                        "Telerik.Windows.Data",
                        "Telerik.Windows.Controls",
                        "Telerik.Windows.Controls.Input",
                        "Telerik.Windows.Controls.Navigation",
                        "Telerik.Windows.Controls.RibbonView",
                        "Telerik.Windows.Controls.GridView",
                    };
every things is working well and all controls changes to new theme (AT RUNTIME) but for the RadWindow and RadRibbonWindow nothing happens (AT RUNTIME).

please do not suggest me to use "StyleManager.ApplicationTheme" or "StyleManager.SetTheme".
just tell me how your sample code is working????

[Masha]

Hello Amin,

Regarding the RadRibbonWindow control you need to consider if it uses the Telerik themes or the WindowsChrome theme. By default, the RibbonWindow takes the WIndowsOS theme settings for its WindowChrome and we have no access over that style. But you can apply a Telerik theme on the control, if you follow the steps described in the Themes section of this article. Once you do that, you should be able to apply a Telerik theme on it. Please let us know if your application uses this approach and if you still can't change the theme of the window using the ApplicationThemeManager methods.

For changing the RadWindow theme I suggest you to create customRadWindowStyle based on the default one. After that you should apply it to the RadWindow definition like the code snipped below:

RadWindow radWindow = new RadWindow();
radWindow.Style = this.Resources[ "customRadWindowStyle" ] as Style;

I hope this will be helpful.

Kind regards,
Maria
the Telerik team

[Amin]

Hello Maria,

Thanks for your reply but I'm not satisfied with the answer since in the RadControls for WPF Q2 2012 Demos source radWindow.Style is not used.
So I think there is another way.
There are lots of RadWindow in our project and we don't want to add a code line for each of them to change the style.
In addition some RadWindows have already shown when theme is changing. 

Let me explain more.
I need a method to change theme of every thing on RUNTIME even if the RadWindows have already shown.
like ExamplesCS_WPF\Window.WPF\Theming\Example.xaml


Good Luck
Amin

[Masha]

Hello Amin,

You could try to clear merged resources on theme selection and to merge the new ones with custom method like :

private void Windows7_Click(object sender, RoutedEventArgs e)
    {
        Application.Current.Resources.MergedDictionaries.Clear();
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/Telerik.Windows.Themes.Windows7;component/Themes/System.Windows.xaml", UriKind.RelativeOrAbsolute)
        });
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/Telerik.Windows.Themes.Windows7;component/Themes/Telerik.Windows.Controls.xaml", UriKind.RelativeOrAbsolute)
        });
        Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()
        {
            Source = new Uri("/Telerik.Windows.Themes.Windows7;component/Themes/Telerik.Windows.Controls.Navigation.xaml", UriKind.RelativeOrAbsolute)
        });

This way you will change the theme even if the RadWindows have already been shown.

I hope this will be helpful.

Kind regards,
Maria
the Telerik team

[Amin]

Hi.

It seems that you never read previous posts.

BAD SUPPORT.

[Yana]

Hello Amin,

Actually this is the same approach we're using in ApplicationThemeManager class in our online examples - in the EnsureResourcesForTheme method the current resources are cleared and the ones for the new theme are loaded. 

You can find attached a sample project that demonstrates how to switch themes at runtime using the ApplicationThemeManager - note that RadWindow theme is also changed even when it is shown.

If you still experience the issue, please send us more information which will help us reproduce it at our side.

Greetings,
Yana
the Telerik team

[Amin]

Hello Yana,

Thanks for the sample project. Your project works well but lets make a small change to experience the issue.

1) Implement a class inherited from RadWindow

public class MyWindow : RadWindow
{
// It can be empty or contains some code
}

2) Create an instance from MyWindow and show it like the sample project

private void RadButton_Click_1(object sender, RoutedEventArgs e)
{
//(new RadWindow() { Width=400, Height=300, Header="Test Window"}).Show();
(new MyWindow() { Width = 400, Height = 300, Header = "Test Window" }).Show();
}

Greetings,
Amin

[Yana]

Hello Amin,

This is expected behavior - when RadWindow is used as a UserControl as explained here, it does not receive the implicit style automatically, as it is a different type  ( MyWindow in the provided snippet). So in this case the RadWindowStyle should be set manually.  We would suggest the following approach - to set it as DynamicResource in the definition of the Window:

<telerik:RadWindow x:Class="TestThemeManager.Window1"
        ...
        x:Name="myCustomWindow"
        Style="{DynamicResource RadWindowStyle}"
      >
    <Grid>

    </Grid>
</telerik:RadWindow>

which will allow the implicit style to be applied as expected.
I have attached the updated project for a reference.

Regards,
Yana
the Telerik team

[Amin]

Hello Yana,

Thanks a million, finally it works for RadWindow but what should i do for RadRibbonWindow?
Note that i have made below changes:

RadRibbonWindow.IsWindowsThemeEnabled = false;
and
<telerikRibbon:RadRibbonWindow x:Class="TestThemeManager.Window1"
and
Style="{DynamicResource RadRibbonWindowStyle}"

All the best,
Amin