Q2 2010 ASP.NET AJAX Visual Improvements

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.

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:

RadFilter

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

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

RadMenu

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

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

RadPanelBar

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

RadToolBar

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

RadToolTip

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

RadWindow

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

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:

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!