Silverlight 2 Beta2 includes a bunch of work in the UI and
Control space:
More Built-in Controls
In Beta 1 only a few controls were included with the core
Silverlight setup. Most common controls (including Button, ListBox,
Slider, etc) were shipped within separate assemblies that you had to bundle
with your applications (which increased the app download size). Beta 2
now installs 30+ of the most common controls as part of the core Silverlight 2
download. This means that you can now build Silverlight 2 applications
that use core controls that are as small as 3kb in size - making Silverlight
application downloads small and startup time fast.
In addition to the core controls included with the base
Silverlight 2 setup, we are also this week shipping additional higher-level
controls that are implemented in separate assemblies that you can then
reference and include with your applications. This includes controls like
DataGrid (more details on its new Beta2 features below), Calendar (now with
multi-day selection and blackout date support in Beta2), and a TabPanel control
(new in Beta2).
We ultimately expect to ship over a 100 controls for
Silverlight.
Control Template Editing Support
One of the most powerful features of the WPF and Silverlight
programming model is the ability to completely customize the look and feel of
controls. This allows developers and designers to sculpt the UI of
controls in both subtle and dramatic ways, and enables a tremendous amount of
flexibility. I covered these concepts a little in my previous Silverlight
Control Templating blog post here.
This week's Expression Blend 2.5 June Preview now adds
designer support for editing control templates - which makes it easy for you to
quickly change the look of any control without having to drop-down to XAML
source to-do it.
To see control template editing in action, just drag/drop
two Slider controls onto the Expression Blend design surface:
Figure 1
We might decide that the slider head in the default Slider
control template is too large and wide for our application. To use
control template editing to change it, we can right-click on one of the sliders
in the designer and select the "Edit Control Parts" context menu
item. We can choose to create a new empty control template for our slider
(and start from scratch), or alternatively edit a copy of the built-in control
template (and start from that and tweak it):
Figure 2
After we choose to edit a copy of the existing control
template, Blend will prompt us to create and name a re-usable style resource
that we'll define our control template within. We can name it and then
choose to store the style at either the application level (within App.xaml) or
within our current page/user-control:
Figure 3
When we click "ok" we'll find
ourselves in template editing mode for our Slider control. We can change,
tweak, or add/remove any of the underlying elements within the Slider control's
template. Notice below how in template editing mode we can see and select
any of the underlying elements that make up the slider's control template
(these are circled in red below in the "Objects" window).
To make our slider head narrower, we can
select the "HorizontalThumb" element within the control template and
adjust its width (either graphically or via the property grid):
Figure 4
We can then use the breadcrumb navigation bar at the top of
the designer to navigate back to our page and see the control template changes
applied:
Figure 5
Notice that right now only one of our slider
controls is using the new Style resource with the control template we
defined.
To apply the same style resource to the other
slider control as well, we can select it, right-click, and then use the
"Apply Resource" context menu to apply our "ScottSlider"
style to it as well:
Figure 6
Once we do this both our sliders reference the
same style:
Figure 7
Changes we make to the "ScottSlider"
style going forward will automatically apply to both controls.
Note that all controls shipped with
Silverlight 2 support control templates and will support the above editing
experience in Expression Blend.
Visual State Manager (VSM) Support
Control templates in Silverlight and WPF support customizing both the "look" of a control, as well as the "feel" of a
control. By "feel" I mean changing its interactive
responsiveness. For example: how it reacts when pushed, when it gets
focus, loses focus, is in a pushed state, is in a disabled state, has something
inside it selected, etc. Often you want animations to execute when the
user interacts with a control like this.
One of the new things we are introducing with Silverlight
2 Beta2 is a "Visual State Manager" (VSM) feature that makes it much
easier to build interactive control templates. VSM introduces two basic
concepts that you can take advantage of within control templates: "Visual States" and "State Transitions". For example, a control like
Button defines multiple visual states for itself - "Normal",
"MouseOver", "Pressed", "Disabled",
"Focused", "Unfocused". When in template
editing mode in Blend, designers now have the ability to easily edit what the
button looks like in each particular state, as well as setup transition rules
to control how long it should take to animate when moving from one state to
another. At runtime Silverlight will then dynamically run the appropriate
animation Storyboards to smoothly move the control from one state to another.
What is nice about this model is that
designers do not need to write code, do not need to manually create animation
storyboards, and do not need to understand the object model of controls in
order to be productive. This makes the learning curve for creating
interactive control templates really easy, and means that existing graphic
designers can very easily work on Silverlight projects. Later this year
we will also be adding Visual State Manager (VSM) support to WPF as well, which
will let you use the same approach with Windows applications as well as share
control templates between WPF and Silverlight projects.
To see an example of this in action, let's add
a Button control onto our design surface:
Figure 8
We can then right click on the button and edit
its control template. Instead of starting with the existing default control
template (like we did with the slider example above), let's create an empty
control template and start from scratch:
Figure 9
Blend will prompt us for the name of the Style
resource we want to create. We'll name it "ScottButton" and
click ok. This will then put the designer in control editing mode for the
Button, and start with an empty control template:
Figure 10
One of the things to notice above is the new
"States" window inside Blend. This will show us all of the
available "Visual States" that the Button control exposes.
Above the "Base" state is currently selected - which allows us to
define the common visual tree of our Button control template.
We can then add some vector elements into our
base state that defines the look of a custom button like below. We could
use the built-in vector drawing tool support provided by Blend to author these
graphics, or alternatively use Expression Design or Adobe Illustrator to build
the vector art and then import it into Blend. Below we are adding 4
"Path" elements into our control template - one a rounded background
(named "background"), one a drop shadow (named "shadow"),
one a 40% opacity "shine" that adds a glow near the top, and one that
defines the default inner content (in this case a picture of a house):
Figure 11
Note: we could have
alternatively imported an image, but using vector elements will give us the
flexibility to scale/stretch/transform the button later and retain a crisp look
and feel at any resolution or scale (particularly useful with Silverlight
mobile scenarios - where screen resolutions might be different or
smaller). It will also allow us to easily animate/change any vector
element within the artwork.
Once we've finished designing our base state
above, we can press F5 to run our application in the browser:
Figure 12
As you can see above - our Button control now
has a nicer look. Despite its new look, the button still raises the same
focus, click and hover events just like before - so a developer using the
button does not need to change any code when working with a button that uses
our new control template.
One downside with our new button control
template, though, is that it isn't interactive. This means that I don't
get any visual feedback if the button gains/looses focus, or if a mouse hovers
over it. I also don't get a nice depress/bounce-back animation when I
click it.
To add interactivity to our button, we'll
return back to Blend and work with our Button's control template again.
Previously we added vector graphic elements to the "Base" state of
our Button control. This allowed us to define the default visual look of
all visual states of our Button. We can now go back and customize
individual Button visual states further.
For example, to implement a mouse-over
behavior for our Button, we can select the "MouseOver" state in the
"States" window, and then tweak the look of the button when it is in
that state. Below I've selected the "shine" vector element
inside our control template and adjusted its Opacity property in the property
grid to have it be more visible when in the MouseOver state. Notice how
Blend automatically highlighted the "Shine" element with a red dot
and then listed the Opacity property below it in our objects window. This
makes it easy to quickly track all changes that we've made between the
"Base" state and the "MouseOver" state in our control
template:
Figure 13
We can then select the "Pressed"
state in the "States" window, and customize what a button looks like
when it is pressed. We'll change two things from the "base"
state. The first change is to make the "shine" element visible
(like the MouseOver state). The second change will be to slightly offset the
contents of the button control - while keeping the shadow element
stationary. This will give the button a nice "depressed" look
and contrast nicely with its base visual:
Figure 14
We can implement the offset change to the background,
content and shine elements by selecting them in the designer, and then apply an
offset render transform to them in the property browser:
Figure 15
And now when we run our application again in
the browser, we'll find that our Button now has interactive visual feedback
when it is being used. Below is the "normal" look of our
Button:
Figure 16
Hovering the mouse over the Button will then
cause it to glow like below:
Figure 17
Clicking the button will then cause it to depress and hide
the shadow (it will then bounce back once the mouse button is released):
Figure 18
Note that we did not have to write any code or XAML to
change our Button's look and feel - the new Visual State Manager feature
automatically handled moving between visual states for us.
By default Silverlight dynamically constructs and runs a
transition Storyboard for you as you move from visual state to visual state
(providing a smooth animation between the two states). You do not need to
write any code in order to make this happen (note: you do still have the
ability to drop down and add a custom Storyboard transition if you want to, but
for most cases you can probably use the automatic Storyboard transition).
One feature you can take advantage of with Silverlight's
automatic transition feature is to customize the time duration it takes for a
visual state transition to occur. You can do this by clicking the arrow
to the right of a visual state and setup a rule that controls how long it
should take the transition animation to run when moving from one particular
state to another.
For example, we could indicate that we want it to take .2
seconds to transition from the "Normal" to "MouseOver"
visual state by adding the rule below:
Figure 19
We can then configure this rule to take .2 seconds to
transition between Normal->MouseOver like so:
Figure 20
We can then click on the "MouseOver" state and
setup a rule that causes the transition from MouseOver->Normal to take .4
seconds:
Figure 21
Now when we re-run our application we'll have slower
animation transitions for MouseOver scenarios, which adds a slightly smoother
and more polished feel to our application. We did not have to write a
single line of code to enable this. All controls shipped with Silverlight
2 will have built-in support for Control Template and Visual State Manager
customization like above.
To learn more about the new Visual State Manager and Control
Template Editing features, please check out the tutorials here and here, and the videos on it here, here,
and here.
TextBox
Beta2 includes some significant improvements to the built-in
TextBox editing control. Text scrolling with text-wrap, multi-line text
selection, document navigation keys, and copy/paste from the clipboard are now supported.
Beta2 also now includes IME Level 3 input support (including candidate window selection) for non-western character sets:
Figure 22
Input Support
Beta2 adds additional keyboard support in FullScreen mode
(arrow, tab, enter, home, end, pageup/pagedown, space). Note: full key
input support isn't allowed to avoid password spoofing scenarios.
Beta2 also adds new APIs to support inking and stylus input support.
UI Automation and Accessibility
Beta2 adds UI Automation Framework support into
Silverlight. UI Automation (or UIA) enables screen readers and other
assistive tools to identify and interact with the components that make up your
Silverlight 2 application.
Beta2 uses the UIA framework and adds UIA based behaviors to
an initial set of Silverlight controls. By the final release of
Silverlight 2 all controls will have UIA based behaviors built-in. We
will also add support for high-contrast scenarios. These features will
enable you to build accessible, section 508 compliant, applications. This
UIA support will also enable automated UI testing of applications.
Animation and Graphic System
Beta2 adds support for animating custom dependency
properties. Object animation support (animating structs) is also now supported. Beta2 also supports the ability to create Storyboards in code that can animate
parts of the render tree without having to be added to it (allowing you to
embed animations entirely in code). Per frame animation callback support will be added in the final release.
Beta2 includes a new Visual Tree Helper static class that
provides advanced visual tree inspection APIs. It provides features such
as the ability to enumerate children of an element and getting the
ancestor/parent of a given reference element. These APIs work against any
UIElement you pass to it.
DeepZoom
Beta2 now supports an XML based manifest file for DeepZoom
collections. Beta2 also adds extensible MultiScaleTileSource support for DeepZoom (which allows developers to hook up existing image pyramids that don’t
conform with the Deep Zoom format to the high performance rendering of Deep
Zoom).
WPF Compatibility
Silverlight Beta2 includes a lot of fixes/changes to improve
API compatibility between Silverlight and WPF (note: the final Silverlight
release will contain some additional compatibility work as well). We are
also adding some new APIs we are introducing in Silverlight 2 to WPF in .NET
3.5 SP1 this summer.
This work, combined with the VSM support we are adding to
WPF later this year, will enable good code re-use across browser and desktop
applications.
