We keep a close track of the latest trends and we know how popular HTML5 and CSS are these days. That is why while implementeing 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]()
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:
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:
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:
Have fun exploring the new theming features!![]()
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!