Silverlight initialization Animation

Silverlight

In the Silverlight managed API, the client must instantiate the application.ProgramPreviously, the Assembly referenced in the list will be downloaded and loaded to the applicationAppdomain. In addition, your application may be designed to pre-load certain resources and ensure that these resources are available before the application is available for interaction, even if this means that the application is not displayed before the download is complete. The initial screen is an initial content area that can be displayed to the user while other content is still being loaded.

 

This topic contains the following sections.

• Initial screen usage
• Javascript API of Silverlight
• Default initial screen experience
• Basic initial screen in an application project
• Initial screen Usage Details
• Use onsourcedownloadcomplete
• Related Topics

Initial screen usage

A feature set that can be used to construct a Silverlight initial screen is designed to handle, but not limited to, the following situations:

• Show download progress

• Displays animations even if you do not need to use them to display the download progress.

• Provide the brand, which can include text, vector graphics, and even video

• Display product information, such as Disclaimer

These usage cases will be further discussed in the phase joints of this topic. In general, the available feature set is the same as the feature set of the javascript API that can be used for Silverlight, and there are some specific APIs that specifically support the initial screen function.

If your main source content is using JavaScript APIs, you cannot use this initial screen model efficiently. This is because the initial screen model relies on hosting from loadingAppdomainIs used to stop the display of splashscreensource and start to display the source signal. You can use the following sequence to simulate the same obvious Conversion Behavior:

1. Load the initial source XAML page as "Initial screen.

2. UseDownloaderStart downloading the main source XAML page and any initial resources, such as images or videos required by the page.

3. Once eachDownloaderAfter completed is triggered for all content, change the actual source value at the HTML Dom level. This will uninstall the "Initial screen" and load your main content. This conversion is instantaneous at this time, because each element is pre-loaded into the browser cache.

Javascript API of Silverlight

If you have previously developed Silverlight 1.0, you may be familiar with the javascript API of Silverlight. If you have not developed Silverlight 1.0 before, seeJavascript API of Silverlight. The javascript API of Silverlight is very similar to HTML Dom programming and is actually executed in the script engine of the host, just like the DOM script, however, the Silverlight API is extended to the object tree created when the XAML page is loaded as the content of the Silverlight plug-in. This allows you to process events targeting specific objects, set attribute values, and replace the part of the object tree at runtime.

Default initial screen experience

The default experience defined for Silverlight under a managed API is that any load that exceeds a certain time threshold (about 0.5 seconds) will display a XAML-based animation in the content area. Displays that the default animation and the initialization sequence's XAML are hardcoded into the Silverlight plug-in.

To replace the default initial screen, you defineObjectElement ofSplashscreensourceThe parameter provides a value.

Basic initial screen in an application project

In Silverlight, the initial screen is basically supported in the Silverlight plug-inCodeLevel Definition. This will be made public to the browser host in the com or npapi Control Model (depending on a specific browser), and generally by instantiating the Silverlight plug-in'sObjectElements are exposed to HTML Dom and HTML.

The followingParamsThe options are specifically used for initial screen support:

Parameters	Description
Splashscreensource	Set the URI Of The XAML page that provides visual effects for the initial screen. This page is loaded as the initial Silverlight content under the javascript API.
Onsourcedownloadprogresschanged	Set the name of the event handler called incrementally during source download.
Onsourcedownloadcomplete	Set the name of the event handler called immediately after the source download is complete.

If you specify a handler for onsourcedownloadprogresschanged or onsourcedownloadcomplete, the referenced function must be available for the browser Script Engine at runtime. Generally, this is implemented by defining the function in a separate Javascript file. Then, you defineObjectThe HTML page of the element's Silverlight plug-in contains scripts. The document for prototype Event Handlers is provided in the following reference topics: onsourcedownloadprogresschanged and onsourcedownloadcomplete.

The XAML page for splashscreensource can be obtained from a Web server. This XAML page is provided to the Silverlight client browser host, just like providing images or hosting xap packages. You should configure your web server so that the. XAML extension and the corresponding MIME type used for XAML can be used as the provided content.

The initial screens have security considerations because they involve cross-API mode conversion and Silverlight Initialization on the HTML page. To make these conversions safer, you must provide all three elements of the initial screen process from the same domain (host HTML page, initial screen XAML, xap package that is being downloaded when the initial screen is displayed ). You can choose to provide these elements through https, but if you do, all the elements must be provided as HTTPS.

The initial screen source must be a XAML file. When xap is specified as the initial screen source, an error is generated.

InHow to: Define a simple Silverlight initial ScreenThis topic describes how to define and package a simple Silverlight initial screen.

Initial screen Usage Details

Download progress

A common scenario for initial screens is to display a visual progress indicator. For many users, the most basic and familiar progress indicator is the progress bar. A typical progress bar design shows a horizontal rectangular area that is initially displayed as white or empty. When the download or operation is in progress, this blank area is gradually filled with columns of deeper colors, and the progress is complete as long as the columns of deeper colors are completely filled with the rectangle. Sometimes, this visual effect is achieved by displaying the text area of the percentage of digits.

In the Silverlight initial screen model, you can determine the download progress by reading the event data from the onsourcedownloadprogresschanged handler.SSAttribute Value.

Although the progress bar may look similar to an animation visually, you do not need to use the Silverlight animation API to generate the progress bar. You only need to useSSTo update a property.

For example, the following XAML defines a simple version of this type of progress bar:

Copy

 
<Canvas background = "black" width = "302" Height = "52"> <rectangle canvas. left = "1" canvas. top = "1" width = "300" Height = "30" fill = "white"/> <rectangle X: Name = "progressbarfill" canvas. left = "1" canvas. top = "1" Height = "30" fill = "blue"/> </canvas>
 

To generate a visual progress, you can setProgressbarfillTo reset the value of the fill column during each iteration.SSIs a value between 0 and 1, so you use it as a factor that is relative to the possible total width of the progress bar area.

Copy

 
Function onprogresschanged (sender, eventargs) {var slplugin = sender. gethost (); slplugin. content. findname ("progressbarfill"). width = eventargs. Progress * 300 ;}
 

Animation is not required because the Silverlight rendering system detects the attribute values changed when running in the object tree and redraws the visual effect accordingly.

Animation

Another common case for initial screen display is loop animation. Loop animation is used to instruct the user that the application and browser are still running and can display updates. It also indicates that no accidents (browser crashes, connection errors, etc.) have occurred ).

For these animation types, the overall animation duration is uncertain because it is designed to run the animation during the period when the user waits for the download to complete. Therefore, the optimal type of animation to be used is to have a natural loop behavior andForeverRuntime animation. After the entire XAML page is uninstalled, the animation will "Stop" and the Silverlight plug-in will load the content from the downloaded package.

Generally, you can write an animation completely in XAML. To run an animation, you can useStoryboardOfEventtriggerInclusive to run the animation when the animation is loaded for the first time. Alternatively, you can process on the root element under the javascript API.LoadedObject Lifetime Events suchResourcesSet retrieval relatedStoryboardAndStoryboardCallStoryboard.BeginTo start the animation.

For more information about how to write animations and how animations work in a normal way, seeAnimation Overview. Please note that,Animation OverviewThe topic is mainly written for API hosting users. There may be no code examples or specific information suitable for javascript API scenarios. Please read this overview to deepen your conceptual understanding. Some of the XAML examples provided in the overview may be useful. You only need to perform a small amount of work (such as deletingX: ClassThese examples can be used. Then, you canJavascript API reference of SilverlightTo learn more about the following topics:

• Coloranimation

• Doubleanimation

• Pointanimation

• Storyboard

• Resources

• Eventtrigger

You can also use a key frame animation to fine-tune an animation by using nonlinear interpolation for position and speed. They can be used for very simple physical simulations on the initial screen, such as a force return ball. For more information, seeKey Frame Animation. The same conditions apply to managed programming and possible applications that emphasize the XAML example. For more information, seeJavascript API reference of SilverlightIn the following topics:

• Coloranimationusingkeyframes

• Doubleanimationusingkeyframes

• Pointanimationusingkeyframes

• Keyspline

Brand

In many application models, the traditional initial screen only displays a single large bitmap, and may display a progress indicator as a small part of the user interface. The general purpose of such initial screens is to highlight the product brand information. Nothing prevents you from using this method for the Silverlight initial screen. At the simplest level, your initial screen XAML can only be composed of a singleImageElement structure. However, this may not be an ideal method; if the bitmap is large, the image source will be downloaded asynchronously, so your initial screen may be slightly delayed before display.

A better way to take full advantage of the powerful functions of Silverlight is to write your initial screen as a vector image. You can usePath tag syntaxThe path described in the topic imports the existing vector information in some cases. Alternatively, you can use a design tool that generates Silverlight-compatible XAML tags, such as Microsoft Expression design. In addition, you can integrate any animation generated at design time by this type of tool, or perform animation processing on them by setting certain attributes of a fixed vector image set as the target, add the animation to the image later.

Product Information

Your initial screen may display areas that primarily contain text. To simplify localization, you may want to keep the text out of the vector aspect of the content. Javascript APIs do not have as sophisticated localization frameworks as hosting APIs, but even so, they can still be used to isolate localization requirements from certain controls throughout the markup.

When you display text for an initial screen, it is restricted to text elements that can be used for JavaScript APIs. There are two possible technologies for read-only text:TextblockOrGlyphs.

TextblockIt may be a more lightweight technology, especially when you are only targeting Latin letter areas. You willTextblockContent is specified as a string. InTextblockYou can set some basic text formats, such as resizing, applying colors or brushes, and usingLinebreakSet the block-level format. If you want to useTextblockYou must download the default font other than the default font described in. For more information, seeSetfontsource.

GlyphsIs a more general technology, because you can provide a subset of fonts andUnicodestringTo facilitate the use of Far East fonts and strings. The only complex factor is that you need tools that generate a subset of fonts and compatible Unicode indexes/strings. InGlyphsThe technology that uses XPS output from Microsoft Word is described in.

Use onsourcedownloadcomplete

When onsourcedownloadcomplete is triggered, that is, when the initial screen XAML is uninstalled, the package is ready to be loaded. Therefore, it is meaningless to perform any operations that affect the Silverlight object tree. You can use onsourcedownloadcomplete as a prompt to update the user interface in the surrounding HTML, or you can change any HTML overlaps that you present in the Silverlight content area (if you use this technology ).

If the cross-domain source is referenced from the host HTML, The onsourcedownloadcomplete or onsourcedownloadprogresschanged handler is never called. Therefore, you can only display uncertain initial screens. In this case, the host HTML may want to assign a handler to onload, because this is the best available object lifetime event that is used to reset the status after the source xap is loaded.

See

Reference Silverlight plugin Object Reference Concept Application and Programming Model Javascript API of Silverlight Javascript API reference of Silverlight