Use Blend to develop Silverlight VSM

Support for Visual State Manager (VSM-Visual State Manager)

The control templates in Silverlight and WPF support the "look" and "feel" customization of the control. "Feel" means changing the interaction responsiveness. For example, when you press, get the focus, lose the focus, press, and disabled, there is something in the selected ..., how it reacts. Often, when users interact with controls like this, you need to execute animation effects.

One of the new things we introduced in Silverlight 2 Beta2 is "Visual State Manager" (VSM), which greatly facilitates you to build interactive control templates. VSM introduces two basic concepts you can use in the control template: "Visual States" and "State Transitions )". For example, a widget like a button defines multiple visual states for itself: "Normal (Normal)", "MouseOver (under the mouse)", "Pressed (Pressed )", "Disabled (unavailable)", "Focused (getting focus)", "Unfocused (not Focused )". In the template editing mode in Blend, the designer can now easily edit the appearance of a button in each specific status, and set the migration rules to control the time when the animation effect should run when migrating from one status to another. At runtime, Silverlight dynamically runs the appropriate animated storyboard to smoothly transition the control from one state to another.

This model is awesome because designers do not need to write code, create animated storyboards manually, or understand the control's object model. This makes it easy to learn the curves for creating interactive control templates, which means that existing artists can easily participate in the Silverlight project. Later this year, we will also add "Visual State Manager" (VSM) Support to WPF, so that you can use the same method in Windows applications, and share the control template between the WPF and Silverlight projects.

Let's look at the actual example. Let's add a Button control to the design surface:

Then, we can right-click the control and edit its control template. We will not start from the existing default control template (just like the Slider example above). Let's create a blank control template and start from scratch:

Blend will prompt us to name the Style resource to be created. We will name it "ScottButton" and click "OK. This will place the designer in the control editing mode of the button. There is only one blank control template at the beginning:

One thing to note is that there is a new "States (Status)" window in Blend, which will display all the "Visual States (Visual status)" provided by the Button control) ". Currently, the selected status is "Base", which allows us to define the commonly used Visual tree of our button control templates.

Then, we can add vector elements to our base State to define the appearance of custom buttons like the following. We can Design these images using the built-in vector rendering tools provided by Blend, or use Expression Design or Adobe Illustrator to build vector images and then import them into the Blend. Below, we have added four "Path" elements in our control template. One is the background with a rounded corner (its name is "background"), and the other is shadow) (its name is "shadow"), and there is also a "shine" with 40% shading (some halo light is added on the top ), another rule defines the default internal content (in this case, it is a house pattern ):

Note: You can also import an image. However, if you use a vector element, the button will be expanded or converted in the future, the flexibility to maintain a clear view at any resolution or scale (especially when the screen resolution is large or small in the case of Silverlight mobile devices ), it also allows us to easily make Animation effects or changes to any vector element in the art design.

After the above base state is designed, we can press F5 to run the application in the browser:

As you can see above, our button control now has a nice look. Although it has a new appearance, the button still triggers the same focus, click, and floating event as before, so, developers who use buttons do not need to modify any code when they use the buttons of our new control template.

However, one drawback of our new button control template is that it is not interactive. This means that I don't get any visual feedback if the button gets/loses focus, or if the mouse is hovering over it. When I click, I cannot get a very good animation effect.

To add interactivity to our buttons, we will return to the Blend and operate the control template of our buttons again. Previously, we added vector graphics elements to the "Base" state of our buttons, which allows us to define the default visual appearance of all visual states. Now we will go back and further customize the visual status of individual buttons.

For example, to implement the mouse-over behavior of a button, you can select the "MouseOver" status in the "States" window and then fine-tune the appearance of the button when it is in this status. Below, I select the "shine" vector element in the control template and adjust its Opacity attribute in the attribute mesh to make it more visible in the MouseOver state. Note how Blend automatically uses the red dot to highlight the "shine" element in the Object window, and then lists the Opacity attribute under this element. This allows you to conveniently and quickly track all changes we make between the "Base" and "MouseOver" statuses in the control template:

Then, we can select the "Pressed" status in the "States" window and customize the appearance of the button when it is in the "Pressed" status. We will change two things in the "Base" state. The first change is to make the "shine" element visible (just like the MouseOver state ), the second change is to slightly offset the content of the button control while keeping the shadow element unchanged. This will give the button a nice "depressed (Press)" appearance, which forms a good contrast with its base vision:

We can change the offset in this way: select background, content, and shine elements in the designer, and then apply an offset render transform to them in the property Browser ):

Now, if we run our application again in the browser, we will find that our buttons have interactive visual feedback when used. The following shows the "Normal (Normal)" appearance of our buttons:

Hovering the mouse over a button will produce a luminous effect like the following:

Clicking the button will cause it to press down and hide the shadow (it will return when the mouse button is released ):

Note that we do not need to write any code or XAML to change the perception of our buttons. The new visual state manager function will automatically process the transition between visual states.

By default, when you move from one visual state to another, silverlight will dynamically build and run the transition Storyboard for you (providing a smooth transition animation between two States). You don't need to write any code to make it happen (note: if you want to, you can still lower the hierarchy (drop down) and add a customized Storyboard transition, but in most cases, you can probably use an automatic Storyboard transition ).

One feature you can use in the automatic transition function of Silverlight is to customize the time taken for visual state transition. You can do this by clicking the arrow on the right of the visual state, set a rule to control the time when the transition animation effect should run when a specific State is moved to another State.

For example, we can add the following rules to indicate that it takes 0.2 seconds to transition from "Normal" to "MouseOver" visual state:

Then, we can configure this rule as follows, which takes 0.2 seconds during the transition between Normal-> MouseOver:

Then, we can click "MouseOver" to set a rule, resulting in a 0.4 second transition from MouseOver-> Normal:

Now, when we re-run the application, we will have a slow animation transition for the MouseOver scenario, it adds a slightly smoother and more refined feeling to our applications. This effect can be achieved without writing a line of code. All controls released with Silverlight 2 have built-in support for custom controls such as the control template above the object and visual State Manager.

To learn more about the new visual status manager and control template editing function, take a look at the tutorials here and here, as well as the related videos here and here.