As our second official release for the year is out, I would like to share with you the regular portion of visual updates for the ASP.NET AJAX suite. In Q2 2010 we continued to improve cross-control consistency.

Polishing the overall look & feel and introducing subtle, but value-adding visual features were of major importance among all UX related tasks.

 RadControls for ASP.NET AJAX

Rounded corners, shadows, consistent buttons, icons ... let's see what you are getting with Q2 2010:

RadFileExplorer

The FileExplorer control has undergone thorough appearance review. Here is a list of the visual improvements:

  • Wrapper – border color is changed to fit the skin-specific border colors.
  • TreeView – Folder image, icon positions, paddings and overall TreeView appearance.
  • Icons – Skin Specific Sprites with a new icon for "open" and updated ToolBar icons.
  • Grid – rows height and padding adjustments in order to fit more items in less space

Below you can see a comparison between the old and new FileExplorer placed in RadWindow using “Telerik” skin:

RadFileExplorer

RadFilter

Line connectors were added between expression lines for a better perception. By default the ShowLineImages property is set to “True”:

RadFilter

Expression preview element was also added with ExpressionPreviewPosition = “None / Top / Bottom”:

RadFilter ExpressionPreviewPosition

RadMenu

Drop-down rounded corners and shadows added in Q1 2010 were further refined for Q2. Apply them by using EnableRoundedCorners and EnableShadows properties:

RadMenu

RadListBox

RadListBox has its buttons updated in conformity with RadGrid and RadSlider buttons /updated in Q1 2010/. We have now RadGrid, RadDataPager, RadSlider & RadListBox with buttons of same style arrow icons & states. We consider this change as a breaking, and in case you don’t like the new look of the ListBox or you need the old visuals for any other reason – check this KB article: Restore pre-Q2 2010 RadListBox Button Sprites

RadListBox

RadPanelBar

RadPanelBar’s expand image is now separate element and can be used to expand RadPanelItem when NavigateUrl is set.

RadPanelBar

RadToolBar

Drop-down rounded corners and shadows were added. You can enable them by setting the already mentioned for RadMenu properties - EnableRoundedCorners and EnableShadows:

RadToolBar

RadToolTip

RadToolTip finally gets the shadow effect. You can have it by setting EnableShadow=”True”.

tooltip

RadWindow

RadWindow also comes with EnableShadow=”True”. Here are screenshots of the Forest skin with and without shadow:

RadWindow

The Telerik skin for RadWindow went through a major revamp to fit better with other controls styled with the same skin. You can see below the new appearance with shadows enabled:

RadWindow with Telerik Skin

It is important to mention that all shadow effects are realized using PNGs with alpha (transparency). And under IE6, unfortunately, shadows are not available since it does not support PNGs+alpha.

Now that you are familiar with the major visual touch-ups for Q2 2010 release, it is time to go and play with our online demos or see the full list of features and improvements in the release notes.

And as I mentioned online demos… In addition to the visual improvements, I am excited to share that with this release we are starting to pay more attention to custom skinning of our controls. Since this is a huge topic, that deserves more than end-of-post sentence – do check back our blogs to see what’s on!


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.