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
;
}
PieSegment
{
RadiusAspectRatio
{
Value:
0.1
;
EndValue:
1
;
MaxValue:
1.02
;
Frames:
30
;
Interval:
30
;
EasingType: OutElastic;
RandomDelay:
200
;
RemoveAfterApply: true;
}
}
Theme theme = Theme.ReadCSSText (cssFormattedTextString);
ThemeRepository.Add (theme,
false
);
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
;
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.