WPF Theme

19 posts, 0 answers
  1. J-F
    J-F avatar
    13 posts
    Member since:
    Dec 2010

    Posted 10 May 2011 Link to this post

    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.
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 11 May 2011 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. J-F
    J-F avatar
    13 posts
    Member since:
    Dec 2010

    Posted 11 May 2011 Link to this post

    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 ?
  5. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 11 May 2011 Link to this post

    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
  6. J-F
    J-F avatar
    13 posts
    Member since:
    Dec 2010

    Posted 12 May 2011 Link to this post

    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 ?
  7. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 12 May 2011 Link to this post

    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
  8. J-F
    J-F avatar
    13 posts
    Member since:
    Dec 2010

    Posted 12 May 2011 Link to this post

    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>
  9. David
    David avatar
    57 posts
    Member since:
    Apr 2011

    Posted 02 Aug 2011 Link to this post

    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.
  10. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 02 Aug 2011 Link to this post

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

  11. David
    David avatar
    57 posts
    Member since:
    Apr 2011

    Posted 15 Dec 2011 Link to this post

    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.
  12. Amin
    Amin avatar
    9 posts
    Member since:
    Mar 2013

    Posted 04 Mar 2013 Link to this post

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



  13. Masha
    Admin
    Masha avatar
    355 posts

    Posted 07 Mar 2013 Link to this post

    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.

  14. Amin
    Amin avatar
    9 posts
    Member since:
    Mar 2013

    Posted 09 Mar 2013 Link to this post

    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
  15. Masha
    Admin
    Masha avatar
    355 posts

    Posted 14 Mar 2013 Link to this post

    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.

  16. Amin
    Amin avatar
    9 posts
    Member since:
    Mar 2013

    Posted 03 Apr 2013 Link to this post

    Hi.

    It seems that you never read previous posts.

    BAD SUPPORT.
  17. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 08 Apr 2013 Link to this post

    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.

  18. Amin
    Amin avatar
    9 posts
    Member since:
    Mar 2013

    Posted 08 Apr 2013 Link to this post

    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
  19. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 11 Apr 2013 Link to this post

    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.

  20. Amin
    Amin avatar
    9 posts
    Member since:
    Mar 2013

    Posted 16 Apr 2013 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready