Silverlight 2 Release Candidate Now Available
page 4 of 6
by Scott Guthrie
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 23167/ 56

New Control Skins

The final release of Silverlight 2 will have a much more polished set of default control template skins than those that were in Beta1 and Beta2.  Our goal with the default control templates is to have a look that is professional and attractive, can be used in the majority of applications as-is (without requiring you to author custom style templates), and which is also easily tweakable using Expression Blend.

Today's RC build has skins that are close to the final look we plan to ship (there are a few final tweaks we are doing post RC on the focus color of controls, as well as to tighten up and tweak a few issues in some of the control templates).  Below is the default look for the DataGrid, RadioButton, CheckBoxes, and the DatePicker controls with today's RC build:

Figure 9

Note that the DatePicker control above allows users to type in a date (with a masked edit to ensure it is a valid date), or they can click the calendar icon to the right of the textbox and select the date using a popup Calendar control:

Figure 10

One of the most powerful features of Silverlight and WPF, of course, is the ability for designers and developers to completely customize the look and feel of any control.  This goes beyond simple styling of colors and fonts - you can literally completely change the visual UI of a control, as well as customize its behavior (for example: add animation) without writing any code.

Within Expression Blend, simply right-click on any Silverlight control and choose the "Edit Control Parts" sub-menu to open and edit its control template:

Figure 11

When in control template editing mode, you can manipulate any sub-element of a control (for example: a checkbox's inner content), as well as customize each "state" its in (notice the states pane circled in red below).  This allows designers to customize what the control looks like in individual states (for example: checked, unchecked, mouseover, etc).  Silverlight will then automatically handle animating the control from state to state depending on the user action:

Figure 12

You can learn more about how Silverlight's Visual State Model works from my previous blog post here

Previous releases of Silverlight often rendered graphics on sub-pixel locations - which could cause lines and shapes to sometimes appear "fuzzy".  The RC of Silverlight has a new features called "layout rounding" that causes the layout system to round the final measure of a control to an integer ("pixel snapping"), which results in crisper lines and fewer rendering artifacts.  This feature is now on by default, and helps make applications look nicer.

View Entire Article

User Comments

Title: Mr.   
Name: Ram R
Date: 2010-07-31 5:17:10 AM
very nice explanation
thanks for this kind of help for developer who aspiring to learn about new technology.

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-05-25 11:35:15 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search