Home / Community & Support / Developer Productivity Tools Forums / WPF > General Discussions > WPF Theme

• J-F

  Posted on May 10, 2011 (permalink)

  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.

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on May 11, 2011 (permalink)

  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

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply



• J-F

  Posted on May 11, 2011 (permalink)

  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 ?

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on May 11, 2011 (permalink)

  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

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Attached files

  • ThemesAtRunTimeWPFVersion.zip

  Reply

• J-F

  Posted on May 12, 2011 (permalink)

  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 ?

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on May 12, 2011 (permalink)

  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

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• J-F

  Posted on May 12, 2011 (permalink)

  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>

  Reply

• David

  Posted on Aug 2, 2011 (permalink)

  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.

  Reply

• Vanya Pavlova Vanya Pavlova

  Posted on Aug 2, 2011 (permalink)

  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

  Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  Reply

• David

  Posted on Dec 15, 2011 (permalink)

  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.

  Reply

• Amin

  Posted on Mar 4, 2013 (permalink)

  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????
  
  
  
  

  Reply

• Masha Masha

  Posted on Mar 7, 2013 (permalink)

  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

  Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  Reply

• Amin

  Posted on Mar 9, 2013 (permalink)

  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

  Reply

• Masha Masha

  Posted on Mar 14, 2013 (permalink)

  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

  Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  Reply

• Amin

  Posted on Apr 3, 2013 (permalink)

  Hi.
  
  It seems that you never read previous posts.
  
  BAD SUPPORT.

  Reply

• Yana Yana

  Posted on Apr 8, 2013 (permalink)

  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

  Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  Attached files

  • TestThemeManager.zip

  Reply

• Amin

  Posted on Apr 8, 2013 (permalink)

  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

  Reply

• Yana Yana

  Posted on Apr 11, 2013 (permalink)

  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

  Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  Attached files

  • TestThemeManager.zip

  Reply

• Amin

  Posted on Apr 16, 2013 (permalink)

  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

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / WPF > General Discussions > WPF Theme