Telerik blogs
We keep a close track of the latest trends and we know how popular HTML5 and CSS are these days. That is why while implementing our new theme engine, which we presented in our previous blog, we added a small, but powerful styling feature  and in this blog we want to tell you more about it.
CSS-like syntax for WinForms by Telerik 

Until now there were two ways to create new themes for RadControls. The first one is to use the Visual Style Builder tool (http://www.telerik.com/products/winforms/tools.aspx) and to create or modify an existing theme. The other way is a bit tricky as you should edit an XML file. We know that sometimes these XML files can be huge. That’s why, we added a third option in our latest release. Now you can create your own theme utilizing a simple CSS-like syntax.

We are eager to show you the power of this feature.  Let’s start with something simple, the following code changes the background for the pie segment named Apple to red in our new chart control: 

theme
{
    name: ControlDefault;
    elementType: Telerik.WinControls.UI.RadChartElement;
    controlType: Telerik.WinControls.UI.RadChartView;
}
 
PieSegment.Apple
{
    BackColor: red;
    BorderColor: white;
}

Of course, this is not a true CSS. Our TPF elements are quite different from div and span tags. They have different properties and different visualization.  Every stylable property can be changed by using the new syntax. Moreover, the new syntax allows creating exciting animations. For example:
PieSegment
{   
    RadiusAspectRatio
    {
        Value: 0.1;
        EndValue: 1;
        MaxValue: 1.02;
        Frames: 30;
        Interval: 30;
        EasingType: OutElastic;
        RandomDelay: 200;
        RemoveAfterApply: true;
    }
}

We use the code above to apply the nice exploding animation of the Pie Chart example in our Demo application. Check our new examples to see more impressive animations.

The created theme can be applied with a single line of code; one should just call one of the ReadCSS or ReadCSSText methods and add the newly created theme to the repository:
Theme theme = Theme.ReadCSSText (cssFormattedTextString);
ThemeRepository.Add (theme, false);

Of course, if you do not want to play with the new CSS-like syntax, you can do the same in the old-fashioned manner:
Theme theme = new Theme ("ControlDefault");
             
StyleGroup styleGroup = new StyleGroup();
             
styleGroup.Registrations.Add(new StyleRegistration(
    "ElementTypeControlType",
    "Telerik.WinControls.UI.RadChartElement",
    "Telerik.WinControls.UI.RadChartView",
    "", ""));
 
PropertySettingGroup settingGroup = new PropertySettingGroup();
settingGroup.Selector = new ElementSelector(ElementSelectorTypes.VisualStateSelector, "PieSegment");
styleGroup.PropertySettingGroups.Add(settingGroup);
 
PropertySetting setting = new PropertySetting("RadiusAspectRatio", 0.1);
settingGroup.PropertySettings.Add(setting);
 
setting.EndValue = 1;
setting.AnimatedSetting = new AnimatedPropertySetting();
setting.AnimatedSetting.EndValue = 1;
setting.AnimatedSetting.MaxValue = 1.02;
setting.AnimatedSetting.NumFrames = 30;
setting.AnimatedSetting.Interval  = 30;
setting.AnimatedSetting.ApplyEasingType = RadEasingType.OutElastic;
setting.AnimatedSetting.RandomDelay = 200;
setting.AnimatedSetting.RemoveAfterApply = true;

Have fun exploring the new theming features!

Download RadControls for WinForms by Telerik


About the Author

Nikolay Diyanov

Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

Find him on Twitter @n_diyanov or on LinkedIn.

Related Posts

Comments

Comments are disabled in preview mode.