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

[Taher]

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

[Vanya Pavlova]

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

[Taher]

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

[Tina Stancheva]

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

[Tim]

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.

[Tina Stancheva]

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

[Tim]

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="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"
             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.

[Tina Stancheva]

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

[Tim]

Hello Tina,

I gave these approaches a try and yes, it worked! :)
Thanks really a lot!!!
All the best,
Tim.

[Roman]

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>

[Dani]

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

[Keith Engelhardt]

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.

[Tina Stancheva]

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

[Keith Engelhardt]

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.

[Tina Stancheva]

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