Theming, now and in the future

[Thomas Andersson]

Hello

I am working with VS2010/WPF4/Telerik 2010Q1.

When looking at visual appearance on an application after theming with Teleriks themes, they are very good looking. However, it feels as it behind the winforms theming as in overall visual experience.

I think I have tracked this down to the look of the 'regular' WPF-controls I am using; some are themed from Telerik, some are not.

I could of course try using other controls that Telerik ARE theming, but it feels awkward sometimes.

For an example, I did an experiment with using RadDocking to set up layout of an application instead of using the regular DockPanel and GroupBox:es which I have plenty of. It looks very nice, but it feels a bit clunky, since the only features in the RadDocking I am using is the layout abilities - turning off everything basically.

I read this in another thread:

Actually we have some of the MS WPF controls styled according our themes - RadioButton, CheckButton, Button, RepeadButton, ScrollViewer, Textbox , PasswordBox, Listbox.

So - to my questions:

1. Are you planning to support theming of more standard WPF-controls?
2. Are you planning to include more controls in the Telerik WPF controls (in this particular case I am thinking of a GroupBox or something with similar layout:ing functionality)?
3. Am I completely out of track with what I am trying to accomplish? I guess another route would be to try to adopt Telerik theming and style my non-Telerik controls myself with a style adopting Telerik-theme look-and-feel. This would be a last resort however.

Thanks in advance.

/Thomas

[Thomas Andersson]

I am still very grateful for any help/answers regarding this issue since it is causing confusion in how we approach theming our application.

[Hristo]

Hi Thomas Andersson,

Please excuse us for the late reply.

Now straight onto your questions:
1. For the time being we do not have plans to provide styles for more WPF standard controls
2. We are constantly enlarging our WPF and Silverlight suites by adding new controls and new features based on our clients demand and our internal discussions.
3. Can you share with us which are the controls and the features you are missing and stopping you from adopting only RadCOntrols for WPF in your application? This would be a very valuable feedback for us how we should enhance our offering.

Greetings,
Hristo
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.

[Thomas Andersson]

Hello Hristo and thank you for your reply. 

My scenario is as following: 

We are building a LOB application using WPF and Telerik's suite of WPF controls. 

For layout in the application I have been using Telerik's TabControl's and WPF's GroupBox. The use of GroupBox is due to layout functionality of "grouping" controls together, as well as providing a descriptive header to the group. So far so good. 

For data presentation, Telerik's RadGridView, RadComboBox etc are used. 

When theming the application, the Telerik controls all looks great (I am very fond of the Windows7 theme). Regular WPF Buttons are themed aswell from Telerik which I very much like also. But, the GroupBoxes are visually as dull as they can be (since they receive no theming). 

Possible solutions:

1. Theme/style GroupBox and other controls myself. This is doable, but not preferred. 

2. Use Telerik's DockingPanel to achieve theming, and layout functionality similar to building with GroupBoxes. This is also doable, but since I want none of DockingPanels fancy functionality, I just want the visual prettiness, I would turn all features off. This feels like I would create massive overhead in XAML and code. 

3. Create a custom style/template for my GroupBoxes which somehow uses colors/gradients from Telerik's themes. This, I am not sure if it is doable. If it is, I would be grateful for a pointer in the right direction on how to approach this. 

It became a long answer to your short question...

Thanks for any tips. 

[Kalin Milanov]

Hello Thomas Andersson,

Below is a simple style of a GroupBox control. Since it is only a rather simple container with a header and one rounded border there really is not much styling required to make it look like Windows7. In fact the only change different from the original Windows7  style it the border gradient applied. In any case I hope you will find this helpful.

<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
        <Style x:Key="GroupBoxStyle" TargetType="{x:Type GroupBox}">
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA9BFD6" Offset="0"/>
                        <GradientStop Color="#FFCDDAEA" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupBox}">
                        <Grid SnapsToDevicePixels="true">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="6"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="6"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="6"/>
                            </Grid.RowDefinitions>
                            <Border Grid.Column="0" Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"/>
                            <Border x:Name="Header" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Padding="3,1,3,0">
                                <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header" RecognizesAccessKey="True"/>
                            </Border>
                            <ContentPresenter Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"/>
                            <Border Grid.ColumnSpan="4" Grid.Row="1" Grid.RowSpan="3" BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
                                <Border.OpacityMask>
                                    <MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
                                        <Binding Path="ActualWidth" ElementName="Header"/>
                                        <Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
                                        <Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
                                    </MultiBinding>
                                </Border.OpacityMask>
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
                                    <Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                                </Border>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

If there is anything else you want from the GroupBox control - let me know.

All the best,
Kalin Milanov
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.

[Thomas Andersson]

Thank you very much for taking the time to creating the GroupBox template.

However, creating a custom template for GroupBox I can do myself, and yes indeed, it's a very simple control and not much is needed to be done. And emulating Telerik's theme is not super hard, and something I could probably do.

But, I want the control to be theme aware. So that if I change theme (or if I were to enable end users to change theme), the control would be themed with properties from Telerik's theme.

So, is there a way to "hijack" the theming from Telerik on to my custom styled GroupBox? If it can be done by calling resources keys or similar that would be great.

Thanks again for the help.

[Kalin Milanov]

Hello Thomas Andersson,

Currently we do not have the GroupBox styles to match our themes. As a result changing themes will require having a separate style for each theme. That being said we will discuss creating those style though I cannot estimate whether and when will those be available.

Regards,
Kalin Milanov
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.