How can i apply Telerik theme and my style in the same time

15 posts, 0 answers
  1. Taher
    Taher avatar
    21 posts
    Member since:
    Jun 2010

    Posted 01 May 2011 Link to this post

    Hi Telerik team:

     I Want to apply my style on telerik control to specify something like width, height, margins and so on, but in the same time i want to apply telerik  themes for colors. How can i do that???
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 02 May 2011 Link to this post

    Hello Taher,

     

    Indeed the styles you may use when you set a theme are theme specific. This means that you have to apply your style relative to the particular theme. You may share with us a little bit more info about the issues you have met, thus we would be able to provide you with an appropriate solution. 


    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. DevCraft banner
  4. Taher
    Taher avatar
    21 posts
    Member since:
    Jun 2010

    Posted 02 May 2011 Link to this post

    Hi i want to do something like that

           <Style TargetType="RadButton">
                <Setter Property="Hight" Value="50"/>
                <Setter Property="Width" Value="30"/>
                <Setter Property="StyleManger.Theme" Value="Windows7"/>
            </Style>
    
    or ------------------------------------------
    
    
     <Style TargetType="RadButton">
                <Setter Property="Hight" Value="50"/>
                <Setter Property="Width" Value="30"/>
            </Style>
    <RadButton StyleManger.Theme="Windows7" />
    
    In few words, I want to use your themes for the controls but also use the style 
    to centralize the width and hight and other things
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 05 May 2011 Link to this post

    Hello taher,

    You can implement the desired scenario by setting the StyleManager.BasedOn attached property to your style like so:
    <Style TargetType="RadButton" telerik:StyleManager.BasedOn="Windows7">
        <Setter Property="Hight" Value="50"/>
        <Setter Property="Width" Value="30"/>
    </Style>
    Give this a try and let us know if it works for you.

    Greetings,
    Tina Stancheva
    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. Tim
    Tim avatar
    114 posts
    Member since:
    Aug 2011

    Posted 07 Mar 2012 Link to this post

    Hello!

    When I am using the approch used by Tina, I get the following message:
    "Target type Telerik.Windows.Controls.RadTreeViewItem is not convertible to base type System.String"

    When I remove the BasedOn stuff, everything is ok - well, except the fact that the telerik theme is not used...:) What am I doing wrong? Any help? That would be really great!

    All the best,
    Tim.
  7. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 12 Mar 2012 Link to this post

    Hello Tim,

    Can you please elaborate on the scenario in which the exception is raised? I created a sample definition of the RadTreeView to test if a style using the BasedOn property can be properly applied to the RadTreeViewItems and it works as expected on our side.

    If you can modify it to reproduce the issue and better demonstrate your scenario, we will be able to further investigate the case. Thank you in advance for your cooperation.

    Greetings,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  8. Tim
    Tim avatar
    114 posts
    Member since:
    Aug 2011

    Posted 12 Mar 2012 Link to this post

    Hello Tina,

    thanks a lot for your help. As I am using HierarchicalDataTemplate, DataTemplate, ItemContainerStyle and ContainerBindings and and and I was a little bit confused! :) I still got this error as you can see in the screenshot attached but it seems that it is working anyway... So now I mostly got the style working. But one more question: How can I set the treeView style to Metro without loosing the other styling? Example:

    If you copy the following code into your MainPage.xaml
    <UserControl x:Class="RadControlsSilverlightApp2.MainPage"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                 d:DesignHeight="480"
                 d:DesignWidth="640"
                 mc:Ignorable="d">
        <UserControl.Resources>
            <Style TargetType="telerik:RadTreeViewItem" telerik:StyleManager.BasedOn="Metro">
                <Setter Property="BorderThickness" Value="2" />
                <Setter Property="BorderBrush" Value="Blue" />
            </Style>
        </UserControl.Resources>
        <Grid Height="50" telerik:StyleManager.Theme="Metro">
            <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" telerik:StyleManager.Theme="Metro">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <telerik:RadTreeView telerik:StyleManager.Theme="Metro">
                    <telerik:RadTreeViewItem Header="Item 1">
                        <telerik:RadTreeViewItem Header="Item 1.1" />
                        <telerik:RadTreeViewItem Header="Item 1.2" />
                        <telerik:RadTreeViewItem Header="Item 1.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 2">
                        <telerik:RadTreeViewItem Header="Item 2.1" />
                        <telerik:RadTreeViewItem Header="Item 2.2" />
                        <telerik:RadTreeViewItem Header="Item 2.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 3">
                        <telerik:RadTreeViewItem Header="Item 3.1" />
                        <telerik:RadTreeViewItem Header="Item 3.2" />
                        <telerik:RadTreeViewItem Header="Item 3.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 3">
                        <telerik:RadTreeViewItem Header="Item 3.1" />
                        <telerik:RadTreeViewItem Header="Item 3.2" />
                        <telerik:RadTreeViewItem Header="Item 3.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 3">
                        <telerik:RadTreeViewItem Header="Item 3.1" />
                        <telerik:RadTreeViewItem Header="Item 3.2" />
                        <telerik:RadTreeViewItem Header="Item 3.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 3">
                        <telerik:RadTreeViewItem Header="Item 3.1" />
                        <telerik:RadTreeViewItem Header="Item 3.2" />
                        <telerik:RadTreeViewItem Header="Item 3.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 3">
                        <telerik:RadTreeViewItem Header="Item 3.1" />
                        <telerik:RadTreeViewItem Header="Item 3.2" />
                        <telerik:RadTreeViewItem Header="Item 3.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 3">
                        <telerik:RadTreeViewItem Header="Item 3.1" />
                        <telerik:RadTreeViewItem Header="Item 3.2" />
                        <telerik:RadTreeViewItem Header="Item 3.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 3">
                        <telerik:RadTreeViewItem Header="Item 3.1" />
                        <telerik:RadTreeViewItem Header="Item 3.2" />
                        <telerik:RadTreeViewItem Header="Item 3.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 3">
                        <telerik:RadTreeViewItem Header="Item 3.1" />
                        <telerik:RadTreeViewItem Header="Item 3.2" />
                        <telerik:RadTreeViewItem Header="Item 3.3" />
                    </telerik:RadTreeViewItem>
                    <telerik:RadTreeViewItem Header="Item 3">
                        <telerik:RadTreeViewItem Header="Item 3.1" />
                        <telerik:RadTreeViewItem Header="Item 3.2" />
                        <telerik:RadTreeViewItem Header="Item 3.3" />
                    </telerik:RadTreeViewItem>
                </telerik:RadTreeView>
            </Grid>
        </Grid>
    </UserControl>
     
    you'll see that the custom styling is not used but at least the treeView now has Metro style. If I change one line
    <telerik:RadTreeView telerik:StyleManager.BasedOn="Metro">
    I'll see the custom style but the treeView now lost its Metro style.
    Any hint?

    Thanks again and a lot,
    Tim.

  9. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 15 Mar 2012 Link to this post

    Hello Tim,

    I am not sure why you get the error as I cannot reproduce it locally.

    However the other issue is caused by the fact that you've explicitly set the Metro theme on the RadTreeView control and its settings are overriding the custom implicit style as they are applied later. In order to get over that you can either set the Metro theme as an application theme:
    public MainPage()
    {
        StyleManager.ApplicationTheme = new MetroTheme();
        InitializeComponent();
    }

    or define an implicit style for the RadTreeView control as well:
    <UserControl.Resources>
     <Style TargetType="telerik:RadTreeViewItem" telerik:StyleManager.BasedOn="Metro" >
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="BorderBrush" Value="Blue" />
        </Style>
        <Style TargetType="telerik:RadTreeView" telerik:StyleManager.BasedOn="Metro" />
    </UserControl.Resources>
    <Grid telerik:StyleManager.Theme="Windows7" Height="50">
        <Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
        <telerik:RadTreeView>
            ...
        </telerik:RadTreeView>
        </Grid>
    </Grid>

    Give these approaches a try and let me know if they work for you.

    Kind regards,
    Tina Stancheva
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  10. Tim
    Tim avatar
    114 posts
    Member since:
    Aug 2011

    Posted 15 Mar 2012 Link to this post

    Hello Tina,

    I gave these approaches a try and yes, it worked! :)
    Thanks really a lot!!!
    All the best,
    Tim.
  11. Roman
    Roman avatar
    1 posts
    Member since:
    May 2012

    Posted 02 May 2012 Link to this post

    This approach does not work with RadDocking:
    <UserControl.Resources>
        <Style TargetType="telerik:RadDocumentPane" telerik:StyleManager.BasedOn="Metro">
            <Setter Property="Padding" Value="16" />
        </Style>
        <Style TargetType="telerik:RadPaneGroup" telerik:StyleManager.BasedOn="Metro" />
        <Style TargetType="telerik:RadSplitContainer" telerik:StyleManager.BasedOn="Metro" />
        <Style TargetType="telerik:RadDocking" telerik:StyleManager.BasedOn="Metro" />
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
         
        <telerik:RadDocking>
            <telerik:RadDocking.DocumentHost>
                <telerik:RadSplitContainer>
                    <telerik:RadPaneGroup Margin="0">
                         
                        <telerik:RadDocumentPane  Header="First" Title="Document 1">                           
                        </telerik:RadDocumentPane>
                         
                        <telerik:RadDocumentPane  Header="Second" Title="Document 2">
                        </telerik:RadDocumentPane>
                         
                    </telerik:RadPaneGroup>
                </telerik:RadSplitContainer>
            </telerik:RadDocking.DocumentHost>
     
        </telerik:RadDocking>
    </Grid>
  12. Dani
    Admin
    Dani avatar
    848 posts

    Posted 07 May 2012 Link to this post

    Hi Roman,

    With the SP1 release last month we introduced improved support for implicit styles as an alternative of the StyleManager. Using implicit styles you can base a custom style upon a theme, as in your case.

    You can find more details on the implicit styles here.

    Attached is a sample to demonstrate how to include implicit styles from a theme and how to base a custom style upon that theme.

    Hope you will find it helpful.

    Kind regards,
    Dani
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  13. Keith Engelhardt
    Keith Engelhardt avatar
    3 posts
    Member since:
    Oct 2012

    Posted 19 Nov 2012 Link to this post

    Is there a way to move this styling approach to a more global level like the Application level.

    For example, I can globally set implicit styles for the standard .NET Silverlight controls and they will inherit down to all the controls based on the settings set globally and then add tweaks to individual controls. 

    <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
                 x:Class="TestingTelerikControls.App" >
        <Application.Resources>
    <!--Set the font family and font size globally --> 
            <Style x:Key="BaseControlStyle" TargetType="Control"> 
                <Setter Property="FontFamily" Value="Segoe UI"/>
                <Setter Property="FontSize" Value="12" />
            </Style>
    <!-- Inherit styles from control base down to the button base -->
            <Style x:Key="BaseButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource BaseControlStyle}">
            </Style>
    <!-- Inherit styles from button base down to buttons and set font weight to bold -->
            <Style TargetType="Button" BasedOn="{StaticResource BaseButtonStyle}">
                <Setter Property="FontWeight" Value="Bold"/>
            </Style>

    <!-- Inherit styles from button base down to checkbox and change font style to italic -->
            <Style TargetType="CheckBox" BasedOn="{StaticResource BaseButtonStyle}">
                <Setter Property="FontStyle" Value="Italic"/>
            </Style>

    <!-- Inherit styles from button base down to radio button -->
            <Style TargetType="RadioButton" BasedOn="{StaticResource BaseButtonStyle}">
            </Style>
        </Application.Resources>
    </Application>

    I would like to do the same thing with the Telerik controls; set the theme and any tweaks similar to

    <Style TargetType="RadButton" BasedOn="{StaticResource BaseButtonStyle}">
        <Setter Property="Hight" Value="50"/>
        <Setter Property="Width" Value="30"/>
    </Style>

    but at the application level or as high up the hierarchy as I can get and have it inherit down to the controls.

    Is there a way to do this?

    Thanks in advance,

    Keith E.
  14. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 21 Nov 2012 Link to this post

    Hello Keith,

    You can implement the same approach with the RadControls following the approach described in this tutorial. Please give it a try and let us know if you need more info.

    Kind regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  15. Keith Engelhardt
    Keith Engelhardt avatar
    3 posts
    Member since:
    Oct 2012

    Posted 26 Nov 2012 Link to this post

    Thanks for the response.

    We are using RadControls for Silverlight version "2012.1 215" (released Feb, 15, 2012) ;which does not include the xaml them files and the theme structure referenced in the article and we are using Silverlight 4.

    I figured out that we can download the Q1 2012 SP1 release "2012.1 326" (March 26, 2012) and it does contain the xaml files. However, it appears to be targeting Silverlight 5; which is not an option for our project.

    Is there a way to this type of implicit application styling (refered to in the tutorial) with Silverlight 4? If so, how?

    Thanks in advance,

    Keith E.
  16. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 29 Nov 2012 Link to this post

    Hello Keith,

    You should be able to use the same approach in Silverlght 4 with the assemblies from version 2012.1 215. Please take a look at the attached sample and let me know if I'm missing something.

    Regards,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner