Silverlight 技巧、窍门和最佳实践

核心提示： 在不让用户等待这一特性上，大多数浏览器都在同一线程中驱动 UI 并执行 JavaScript，Silverlight 技巧、窍门和最佳实践(7)，因此，如果 JavaScript 任务运行时间长（例如一些要花费 5 或 10 秒钟来执行的数字处理），而是用 Default.html.js

在不让用户等待这一特性上，大多数浏览器都在同一线程中驱动 UI 并执行 JavaScript。因此，如果 JavaScript 任务运行时间长（例如一些要花费 5 或 10 秒钟来执行的数字处理），UI 将在这段时间内无响应。前面的性能技巧文档建议将运行时间长的 JavaScript 任务分割成更短小的任务。在 Silverlight 2.0 中，可以将运行时间长的任务委派给后台线程。但这不是版本 1.0 的选项。

使用 CreateFromXaml 减小 XAML 的大小

示例应用程序的另一个特色是它如何使用 CreateFromXaml 来动态创建 XAML Image 对象，而不是用多个几乎相同的 Image 声明搅乱 XAML 文件。在图 4 中看到的 XAML 文件 (Scene.xaml) 几乎是空的。它声明了几个 Canvase 和 Rectangle、一个 Storyboard 和一个 ScaleTransform，但是没有声明一个单个的 Image 对象。而是用 Default.html.js 中的 for loop 创建了 105 个 Image 对象，动画中每个图像一个，并从下载器用图像位加以初始化（请参见图 5）。

Figure5RevolvingAuto 应用程序 —Default.html.js

function createSilverlight()
{
　Silverlight.createObjectEx({
　　source: 'Scene.xaml',
　　parentElement: document.getElementById('SilverlightPlugInHost'),
　　id: 'SilverlightPlugIn',
　　properties: {
　　　width: '900',
　　　height: '700',
　　　background:'black',
　　　isWindowless: false,
　　　inplaceInstallPrompt: true,
　　　version: '1.0'
　　},
　　events: {
　　　onError: null,
　　　onLoad: null
　　},　　　　
　　context: null
　});
}
var _zoom = 1;　　　　　　　　　// Zoom factor
var _index = 0;　　　　　　　　 // Image index
var _progressBar;　　　　　　　 // Progress bar
var _progressBarContainer;　　　// Progress bar container
var _progressBarCanvas;　　　　 // Progress bar canvas
var _progressBarWidth;　　　　　// Full width of progress bar
var _control　　　　　　　　　　// Silverlight control
var _transform;　　　　　　　　 // Zoom transform
var _timer;　　　　　　　　　　 // Timer storyboard
var _token1, _token2;　　　　　 // Event handler tokens
var _images = new Array(36);　　// References to XAML images
var _photos = 105;　　　　　　　// Number of photos
function onLoaded(sender)
{
　// Initialize XAML references and other variables
　transform = sender.findName('ZoomTransform');
　timer = sender.findName('TimerStoryboard');
　progressBar = sender.findName('ProgressBar');
　progressBarContainer = sender.findName('ProgressBarContainer');
　progressBarCanvas = sender.findName('ProgressBarCanvas');
　progressBarWidth = _progressBarContainer.width - 4;
　control = sender.getHost();
　var downloader = _control.createObject('downloader');
　token1 = downloader.addEventListener('downloadProgressChanged',
　　downloadProgressChanged);
　token2 = downloader.addEventListener('completed', downloadCompleted);
　downloader.open('GET', 'Assets/AutoPhotos.zip');
　downloader.send();
}
function downloadProgressChanged(sender, args)
{
　// Update the progress bar
_progressBar.width = _progressBarWidth * sender.downloadProgress;
}
function downloadCompleted(sender, args)
{
　// Hide the progress bar
　progressBarCanvas.visibility = 'Collapsed';
　// Deregister downloader event handlers
　sender.removeEventListener('downloadProgressChanged', _token1);
　sender.removeEventListener('completed', _token2);
　// Create XAML images and assign downloaded bits to them
　var canvas = sender.findName('AutoCanvas');
　for (i=0; i<_photos; i++)
　{
　　var xaml =
　　　'<Image Canvas.Left="225" Width="450" Visibility="Collapsed" />';
　　var image = _control.content.createFromXaml(xaml);
　　image.setSource(sender, (i + 1).toString() + '.JPG');
　　canvas.children.add(image);
　　images[i] = image;
　}
　// Register mousewheel event handler
　if (window.addEventListener)
　　window.addEventListener('DOMMouseScroll', onMouseWheelTurned, false);
　else
　　window.onmousewheel = document.onmousewheel = onMouseWheelTurned;
　　　　
　// Make the first image visible
　images[0].visibility = 'Visible';
　// Start rotating
　timer.begin();
}
function onTick(sender, args)
{
　// Hide the current image
　images[_index].visibility = 'Collapsed';
　// Update the image index
　if (++_index == _photos)
　　index = 0; // Wrap around
　// Show the new image
　　images[_index].visibility = 'Visible';　　
　// Restart the timer
　timer.begin();
}
function onMouseWheelTurned(event)
{
　var delta = 0;
　if (!event) // Internet Explorer
　　event = window.event;
　if (event.wheelDelta) // Internet Explorer
　{
　　delta = event.wheelDelta;
　　if (window.opera)
　　　delta = -delta;
　}
　else if (event.detail) // Mozilla
　　delta = -event.detail;
　if (delta != 0)
　{
　　if (delta > 0)
　　{
　　　// Zoom in
　　　zoom = Math.min(2, _zoom + 0.05);
　　}
　　else
　　{
　　　// Zoom out
　　　zoom = Math.max(1, _zoom - 0.05);
　　}
　　transform.scaleX = _transform.scaleY = _zoom;
　}
　if (event.preventDefault)
　　event.preventDefault();
　event.returnValue = false;
}