No Telerik theme that matches the native Silverlight theme?

[Stefan]

Hi. I'm just starting out with the Telerik controls for Silverlight.

One thing I've noticed is that the Telerik themes don't look the same as the native Silverlight theme. For example, a Telerik button glows orange on mouseover but a Silverlight button glows blue.

I've tried the Vista, Windows7, Office Blue and Transparent, but none of them match the Silverlight theme which makes it difficult to mix use of Telerik and standard controls in the same UI.

Is there an easy way to create consitency between the Telerik and Silveright controls?

Thanks in advance.

[Vanya Pavlova]

Hello Stefan,

 
The Telerik themes are designed to work mainly with our RadControls and some native WPF/Silverlight controls. Some of these native controls are TextBox, ListBox, ScrollBar, CheckBox, Button etc. Our theming mechanism cannot cover the full control list included in Silverlight. You may use the attached sample for further reference.
Thank you!

All the best,
Vanya Pavlova
the Telerik team

[Stefan]

Thanks for the information Vanya.

Do you have a full list of the native controls are supported by theming?

[Vanya Pavlova]

Hi Stefan,

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


Regards,
Vanya Pavlova
the Telerik team

[Houman]

That works great actually.

Only one thing, if I wanted to round the corners of my TextBox obviously I needed to modify the Template for it. But how do I apply the Theme to it? Can I simply set the custom template of the TextBox and still apply the theme?

UPDATE:

It is actually simpler than I thought:

In the custom template you can do this:

<Setter Property="telerik:StyleManager.Theme" Value="Windows7"/>

However it has a bug. It centers the content alignment. How can I report this bug?



Thanks 

[Vanya Pavlova]

Hello Houman,



May you please share with us the source code you are currently using? Furthermore you may also open a new support ticket and attach a runnable project which we can use for local testing. Any additional information about the version of RadControls/Silverlight would be highly appreciated as well. 

 


Best wishes,
Vanya Pavlova
the Telerik team

[Marc]

I've got the same problem. When I do this in my App.xaml (or programmatically)

<Style TargetType="TextBox">
    <Setter Property="telerik:StyleManager.Theme" Value="Metro"/>
</Style>

all text boxes get the Metro style but their text is aligned centered instead of left. How can I change this? Something like this doesn't work.

<Style TargetType="TextBox">
    <Setter Property="telerik:StyleManager.Theme" Value="Metro"/>
    <Setter Property="TextAlignment" Value="Left"/>
</Style>

And when I try to edit the template in Blend or VS2010 it crashes immediately.

Thanks in advance,
Stephan

[Vanya Pavlova]

Hi Stephan,



By design the content of a TextBox control in Telerik Metro theme is aligned to the left. The approach you have used to apply a style based on a theme different the default one is applicable in WPF.
In Silverlight you should use the following pattern:

<UserControl.Resources>
    <Style x:Key="ss" TargetType="TextBox" telerik:StyleManager.BasedOn="Metro">
        <Setter Property="Foreground" Value="Red"/>
        <Setter Property="HorizontalContentAlignment" Value="Right"/>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox telerik:StyleManager.Theme="Metro" Style="{StaticResource ss}"  Height="56" Margin="88,168,160,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top"/>
    </Grid>
</UserControl

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


All the best,
Vanya Pavlova
the Telerik team

[Marc]

Wow, that was fast. Thank you, it worked. With this code

<Style TargetType="TextBox" telerik:StyleManager.BasedOn="Metro" />

or this

private static void StyleNativeControl(Type targetType, Telerik.Windows.Controls.Theme theme)
{
    System.Windows.Style style = new System.Windows.Style();
    style.TargetType = targetType;
    style.SetValue(StyleManager.BasedOnProperty, theme);
    style.Setters.Add(new Setter(StyleManager.ThemeProperty, theme));
    Application.Current.Resources.Add(targetType, style);
}

I was able to achieve what I wanted. Thank you.

[Marc]

Hi Vanya,

I just run into StackOverflowExceptions caused by an infinite loop within the Telerik styles for native Silverlight controls like buttons or textboxes. However, the exceptions only occur when I programmatically add controls (which I have to do in my special case). If I do the same thing in XAML, everything works. I've got no glue what's the problem. But it would be nice if you could help us (prototype release in 2 weeks ;-))...

Please find attached a little test project I just created. What I do is basically the following:

- Set the Metro theme as application theme before initializing components in App.xaml.cs
- Style all native controls using the Telerik styles with the function shown above, e.g. StyleNativeControl(typeof(Button), metroTheme);
- MainPage.xaml creates a simple grid which contains a native button that is styled correctly with the Telerik style set above.
- But if you do the exact same thing via C# (comment out SimpleGrid() in Main.xaml.cs) you'll get the invinite loop.
- If you then comment out "StyleNativeControl(typeof(Button), metroTheme);" in Main.xaml.cs everything works again.
- The same behaviour applies to TextBox etc.

We hope to hear from you soon.

Thank you,
Stephan


OOOOOOPS... How can I attach my test project (zip)???

[Vlad]

Hello Stephan,

 Please open support ticket to attach the project. 

Kind regards,
Vlad
the Telerik team

[Marc]

Thank you, that's what I did.

[Dave Smits]

hi,

great this. but i got now one little problem using the metro style. the validation for the native controls remains red while the telerik controls an blue validation have. Someone a solution?
gr

[Vanya Pavlova]

Hi Dave Smits,

 

Will you please be more specific about the exact native controls you are using?
By design when a control goes into its invalid state a red border appeared and a tooltip in the upper right corner with the corresponding error message. As it was proposed above we provide styles for several native Microsoft controls listed above, however I am not quite sure what are you reffering to. 

Greetings,
Vanya Pavlova
the Telerik team

[Dave Smits]

In this scenario it is for a textbox. it seems the styling is applied but only the validation part stays red. the content in the textblock is centered in the middle.

what i did is i put this in the app.xaml:

  <Style TargetType="TextBox" telerik:StyleManager.BasedOn="Metro">         <Setter Property="MinHeight" Value="25"></Setter>         <Setter Property="BorderBrush" Value="#FFC0C0C0"></Setter>         <Setter Property="BorderThickness" Value="1"></Setter>         <Setter Property="Margin" Value="0,0,0,5"></Setter>         <!--<Setter Property="telerik:StyleManager.Theme" Value="Metro"/>-->     </Style>

and in the applicationstartup event handler i got this:

Telerik.Windows.Controls.StyleManager.ApplicationTheme = new Telerik.Windows.Controls.MetroTheme();             
Telerik.Windows.Controls.MetroColors.PaletteInstance.StrongColor = System.Windows.Media.Colors.Black;             
Telerik.Windows.Controls.MetroColors.PaletteInstance.ValidationColor = System.Windows.Media.Color.FromArgb(255, 90, 139, 227);             
Telerik.Windows.Controls.MetroColors.PaletteInstance.MarkerColor = System.Windows.Media.Colors.White;             
Telerik.Windows.Controls.MetroColors.PaletteInstance.BasicColor = System.Windows.Media.Color.FromArgb(255, 210, 210, 210);             
Telerik.Windows.Controls.MetroColors.PaletteInstance.AccentColor = System.Windows.Media.Color.FromArgb(255, 100, 149, 237);           

when i don't set the validation color (turn this one off: Telerik.Windows.Controls.MetroColors.PaletteInstance.ValidationColor = System.Windows.Media.Color.FromArgb(255, 90, 139, 227);) they are all red, but there is a slight difference in the red color between the native and silverlight controls

[Vanya Pavlova]

Hi Dave Smits,

 

I have just tested the scenario you described and everything works fine by my side. I am using binaries as part of our latest official release (Q2 2011). You are right the theme is applied correctly and when the TextBox goes into its invalid state a standard red border appeared with the defined error message. However I am not quite sure why the content is center aligned in your project, you may see the result at the attached picture. If there is something diiferent feel free to submit a new support ticket attach your application there where we can see what might be wrong. 

All the best,
Vanya Pavlova
the Telerik team

[Dave Smits]

Hi,

Take a look to to attached project. My expectation were that the validation errors for both controls will look the same. but the telerik control gets a blue validation error (like definied in the app.xaml.cs) while the native control stays red. When i turn off the custom color i definid for the validation i get a slight difference in the red color.

i got a small test project but wasn't able to upload it here?

gr dave

[Vanya Pavlova]

Hi Dave Smits,



Most probably you are reffering to the RadDateTimePicker control and even in our online demo you may see in its DataValidation demo that a standard red border appears.
Regarding the project attachments you may open a support ticket from Your Account -> Get Support and attach your application there.



Regards,
Vanya Pavlova
the Telerik team

[Dave Smits]

well the blue color is caused because i  do this:

Telerik.Windows.Controls.MetroColors.PaletteInstance.ValidationColor = System.Windows.Media.Color.FromArgb(255, 90, 139, 227); 

This has no effects on the validation colors.
(i can't make an support issue because at this moment my account is expired, new one is already ordered but have to what on an another department here at my company..)

[Vanya Pavlova]

Hi Dave,

 

We have spent some time to investigate this issue. Indeed you are right, the standard TextBox control in Metro theme does not use the common ValidationToolTip and the bindings to the main colors does not work. We will fix this in one of the next internal builds.


I have updated your Telerik points accordingly!

Kind regards,
Vanya Pavlova
the Telerik team

[Dave Smits]

great! thanks for solving the issue !

[ITLackey]

Has the stack overflow bug been fixed or is there a suggested work around?

[Vanya Pavlova]

Hi Itlackey,

 

Can you please be more specific about the case which causes the StackOverflow exception to occur in your application? For the time being we might be only guessing what might be wrong. 
Any additional information about the grid version you used can help us to provide you with a suitable workaround in case the issue still persists. 

Regards,
Vanya Pavlova
the Telerik team

[Wélisson]

I can create a custom style from TextBox in a Telerik Custom Theme Project and use as a telerik style?

E.g.: Create a TextBox.xaml in Telerik custom Theme Project and merge in a ResourceDictionary (?) and use with a telerik:StyleManager.Theme="{StaticResource anyResource}"

Is a possible ou I use another way?

Tks,

Wélisson

 

[Vanya Pavlova]

Hi Welisson,

 

Since the TextBox is one of the controls supported by our theming mechanism you may use it in your custom theme in the same way as it can be done for any RadControl/Silverlight. You may apply  the theme either on a control level or at an application level. Regarding setting theme at an application level for plain Microsoft controls I strongly recommend you to check the following forum thread for further reference. 

All the best,
Vanya Pavlova
the Telerik team

[Wélisson]

Tks Vanya, it's very nice.

Wélisson