Start with over sixty customizable controls in the box—from datagrid to charts—and many more from partners. Easily skin controls using just mark-up to match your brand.
Having a full featured set of controls to work with makes applications much easier to build and more responsive to use than AJAX controls. With Silverlight, there are many new controls now available, adding richness to the development environment. Here are examples of the new Calendar, Chart and Datagrid controls :
The following controls are now available in Silverlight:
Input controls
Button, CheckBox, RadioButton, RepeatButton, HyperLinkButton , ScrollBar (Vert/Horiz), Slider, Togglebutton, Tooltip, Calendar, Password, GridSplitter, Date Picker, DatePickerTextBox, DomainUpDown, NumericUpDown, TimeUpDown, Rating, ButtonSpinner, Spinner, Auto Complete Boxm, Spinner, Time Picker, Time Up Down
Layout
Border, Stack, Grid, Grid Splitter, ScrollViewer, DockPanel, StackPanel, ViewBox, Expander, Page, Frame, Wrap Panel
Text
Textblock, Textbox, Tooltip, Label , AutoComplete
Data
Listbox; Multi-selection ListBox, DataGrid, ItemsControl, Content Control, Dropdown list, Treeview, Treeview Item, HierarchicalDataTemplate, FieldLabel, DataForm, ErrorViewer, NEW ! Data Pager, NEW ! Data Field
Navigation
Scrollviewer, Tab Control, Tab Item
Presentation
Image, MediaElement, Ink canvas, MultiScaleImage, Accordian, ChildWindow
Dialog
File Open, File Save, FontPicker
Chart
Area, Bubble, Scatter, Pie, Bar, Column, Line, Legend, Title
As we continue to build new controls, we are now making them available with source code and examples on a new toolkit website. Rather than having to wait for the next release of Silverlight; we’ve made available over 30 controls as we build them. This includes a full set of charting controls and an enhanced datagrid control. We also provide full source code to all of our controls. Over the next few months, we will have more controls available including controls for viewing Microsoft Office documents, Virtual Earth, SharePoint, and Real Time Collaboration Services.
To go further, each Silverlight control provides a unique skin template to allow its look to be completely customized. In the example shown below, rather than show a vertical listbox you may want to show a workflow of items. This is achieved by editing the template of the listbox to change the layout and look of each item. Silverlight’s unique control templates allow you to take an existing control and change the skin just by editing its template in XAML.
It’s easy to create graphics and then use them to customize controls, such as the look of a scrollbar. Silverlight provides templates for each control that allow designers to reach inside the control and change the layout or look of each part of the control without rewriting any code. For example, a scrollbar is made up of a layout container and a set of parts such as the up and down button and draggable thumb. Parts can be rearranged and their appearance changed to fully customize the control. The example below shows re-skinning the thumb and repeat buttons; it also shows how the layout of controls within the scrollbar can be changed:
Re-skinning a scrollbar
In Silverlight, the skin of a control is defined by its ControlTemplate. Because you create a ControlTemplate in XAML, you can change a control's appearance without writing any code. The example below shows the XAML mark-up used to create a button :
<Rectangle Margin="1,1.75,1,1" Opacity="0.05" RadiusX="3" RadiusY="3" Stroke="{TemplateBinding Background}" StrokeThickness="1"/>
<Rectangle Margin="1,1.5,1,1" Opacity="0.05" RadiusX="3" RadiusY="3" Stroke="{TemplateBinding Background}" StrokeThickness="1"/>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<ContentPresenter Margin="4,5,4,4"/>
<Rectangle x:Name="DisabledVisual" IsHitTestVisible="false" Opacity="0" RadiusX="4" RadiusY="4" Fill="{StaticResource DisabledBrush}"/>
You can expose control properties to designers. You can use TemplateBinding to connect properties on shapes or other elements in your control to the properties on the control itself. This provides a built in mechanism to easily encapsulate together properties – in the button example (above) you can connect the background color of shapes inside your button to the background property on the control itself.
Silverlight also supports the Visual State Manager. States can be triggered inside of control templates so that you can specify how your control responds when pressed or moused over. The example below shows how a gradient with a button is animated in its mouse over state :
In addition, you can use a style to set properties once and apply the style to multiple controls, which gives the controls a uniform appearance. When you apply a style to a control, you can still set properties locally on the control. The property value that is set locally takes precedence over the property value set on the style. For example, suppose you want most of the buttons in your application to be red and the font to be 16 pt, but there is one button that needs to be green, but still have 16 pt font. You can create a style that sets the Background property to red and the FontSize property to 16 pt and apply the style to each button.
Silverlight 3 adds several new features to skinning capabilities. It is now possible to have styles which are ‘based on’ each other. For instance, you can append or over-ride values by basing one style on another. This allows a single base style for instance to set all underlying colors and font sizes, and then make changes to this style by applying another for eg new items in the UI. In addition, you can set a style multiple times – this allows style values to be reset or over-ridden. A scenario here is that you want to them your application using a set of different styles for different color schemes; by making all of your graphics and controls skin colors be based on style values, they will then automatically update when you change the style.
Finally, you can create a dictionary of your controls. This feature allows use of Silverlight resources defined externally allowing sharing resources between applications and isolating them for localization and easier revisions. By locating the application resources in an external file, we provide the ability for reuse of resources between applications, centralized update by various developer/designers and ability to localize the file out of the application.
In the example below, EasyJet was able to combine custom controls for their map with re-skinned controls such as a slider, button, calendar and listbox. Notice how the controls reflect the brand and utilize its key orange color:
EasyJet, a large UK airline, has used Silverlight to build a smooth interface to help users to explore destinations in detail. It integrates with Microsoft Virtual Earth, so developers can layer the location-relevant data on top of the Virtual Earth map images. Customers who have set dates and destinations in mind can book quickly and easily by using a simple menu. A customer who is less sure of their destination can specify the dates that they’d like to travel and their preferred departure location. The map will then identify all the locations they can travel to within those dates and display fares in real time. Paul Curtis, Head of Application Architecture for easyJet, noted “Users can quickly compare where they can go on a given date and how much it will cost, without having to submit multiple searches. Using Silverlight all the information is offered in a single seamless interface, whereas standard websites can only do this by constantly re-loading web pages.”
Control skinning is also important when working with data. Silverlight allows controls to be directly connected to data sources, and the control itself can have an item template, which knows how to show each item of data. For example, a list control that has a template to create a calendar and text field for each item. If the user then selects or edits these items, the changes are made directly against the underlying data.
Listbox showing a Data Template with a set of controls per row
Silverlight 3 has also done more work allowing you to build higher level ‘pages’ and to then navigate back to them directly. An example of this is a more complex Silverlight application, containing a large number of pages of controls that the user needs to fill in. If they close the browser it can be difficult to return to the last state in which they were working. We now support creating applications that are built from Pages linked together via URI values. The user is able to navigate through the application’s pages via controls in the application’s UI, or via the browser’s forward/back buttons, address bar or history journal. The Navigation Framework allows the developer to build pages, define how they are linked together and how data is passed between them. In addition, the URI can also contain state which can drive the UI within the page – for instance set fields to particular values. This allows a user to bookmark a particular page and state and return to it later.
Finally, we now allow your controls to utilize system colors. A vital accessibility scenario here is to use these settings so that the display updates when the user switches their preferences to high contrast (for easier readability). The user will know if the system is running in high contrast, but to accomplish this, they will need information about system colors to present a contrast that matches the settings. A set of named colors are provided by the operating system. These controls and other graphics utilize these named values which will change when the user edits their system settings.
If all of this is not enough, you can also find a huge variety of controls from our partners. These include industry leaders such as Infragistics, Component One and Telerik.
No comments:
Post a Comment