SplashScreenSource的妙用


默认初始屏幕体验


在托管 API 下为 Silverlight 定义的默认体验是:超出某一时间阈值(约为 0.5 秒)的任何加载都将在内容区域中显示基于 XAML 的动画。显示该默认动画和初始化序列的 XAML 被硬编码到 Silverlight 插件中。

为了替换默认初始屏幕,您为在 HTML 中定义 object 元素的 Silverlight 插件的 splashScreenSource 参数提供一个值。或者,用于 Silverlight 的 ASP.NET 控件将定义一些 API,这些 API 将所需的初始屏幕相关参数设置到其在 HTML 中的输出 object 元素中。



以上是其的官方解释,简单的说呢就是可以利用初始屏幕来制作自定义的loading效果

官方的中文文档写的相当详细了,这里我就不在做重复的熬述。
http://msdn.microsoft.com/zh-cn/library/cc838130%28VS.95%29.aspx


做法
1.先自己做一个想要的初始屏幕的xaml(在blend中创建一个silverlight 1的项目,用blend画一个loading界面)
<Canvas
        
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name
="parentCanvas"
        xmlns:d
="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        mc:Ignorable
="d">
  
<Grid x:Name="LayoutRoot">
    
<Grid  HorizontalAlignment="Center" VerticalAlignment="Center" Width="280" Height="37.807">
    
<Canvas Width="280" Height="37.807">
      
<TextBlock FontSize="22" Foreground="#FF949494" TextWrapping="Wrap">
        
<Run Text="SilverAlbum"/>
      
</TextBlock>
      
<TextBlock x:Name="StatusText" 
                 FontSize
="10" 
                 Foreground
="#FF949494" 
                 TextWrapping
="Wrap" 
                 Canvas.Left
="150" Text="" 
                 Canvas.Top
="13.16"/>
      
<Canvas Canvas.Top="25.807" Width="280" Height="12">
        
<Rectangle Stroke="#FF949494" StrokeThickness="2" Width="280" Height="12"/>
        
<Rectangle x:Name="ProgressBar" 
                   Width
="272" 
                   Height
="4" 
                   Fill
="#FF949494" Canvas.Left="4.26" Canvas.Top="4">
          
<Rectangle.RenderTransform>
            
<TransformGroup>
              
<ScaleTransform x:Name="ProgressBarTransform" ScaleY="1" ScaleX="0"/>
              
<SkewTransform/>
              
<RotateTransform/>
              
<TranslateTransform Y="0" X="0"/>
            
</TransformGroup>
          
</Rectangle.RenderTransform>
        
</Rectangle>
      
</Canvas>
    
</Canvas>
    
</Grid>
  
</Grid>
</Canvas>

2.在html页面中silverlightHost的地方修改以下代码



3.编写js文件(做过silverlight1.0开发的朋友应该不会陌生,就是通过js来控制silverlight中的元素)
function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName(
"LayoutRoot").Width = document.body.clientWidth;
    sender.findName(
"LayoutRoot").Height =document.body.clientHeight;
    sender.findName(
"StatusText").Text = Math.round((eventArgs.progress * 1000)) / 10 + " percent loaded";
    sender.findName(
"ProgressBarTransform").ScaleX = eventArgs.progress;
}

这样就完成了一个自定义的loading效果。  :)    很简单吧

看到这里再请看看不用SplashScreenSource的做法
对比下  ;)  哪种更见当方便?

效果预览:http://grmcac.com/silverlight/lab/silveralbum/
posted @ 2009-06-18 12:13  王喆(nasa)  阅读(1355)  评论(0编辑  收藏  举报