每一款商业的Silverlight项目,为了体现项目个性化,都会有不同的界面设计,项目UI设计的第一步就是创建个性的自定义启动画面,本文将介绍如何创建Silverlight自定义启动画面,也就是经常说的Splash Screen.
Silverlight初始化建立启动画面如下图:
经过修改,将改如下图:
根据上图我们可以看出,该启动画面分为三个部分,图片部分,进度条部分,百分比部分,对于图片部分,以后我们将修改为动画图片,现在着重介绍进度条和百分比部分。
1. 首先,使用文本工具创建一个空文件,命名为“SplashScreen.xaml”,该文档是为了承载自定义启动画面的控件代码所用,由于我们创建自定义启动画面,需要覆盖替换原始启动画面,为了不让该文件封装到XAP包中,我们使用其他文本工具先创建一个独立的空文件。文件创建后,可以使用VS2008或者Blend添加到项目中。
2. 现在可以使用VS2008或者Blend打开SplashScreen.xaml文件,填写以下代码:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->1<StackPanelxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
2xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
3VerticalAlignment="Center"Margin="0,100,0,0">
4<!--头部图片-->
5<Imagex:Name="myImage"Source="/silverlightchina.png"
6Height="56"
7Width="220"
8HorizontalAlignment="Center"
9VerticalAlignment="Center"
10Margin="10"/>
11
12<StackPanelHorizontalAlignment="Center">
13<!--进度条-->
14<GridHorizontalAlignment="Center">
15<RectangleStroke="#FFDEE6F0"HorizontalAlignment="Left"Width="300"Height="10"RadiusX="2"RadiusY="2"StrokeThickness="1"/>
16<RectangleFill="#FF7E99C8"HorizontalAlignment="Left"VerticalAlignment="Center"StrokeThickness="0"RadiusX="0"RadiusY="0"Width="296"Height="6"x:Name="progressBar"RenderTransformOrigin="0,0.5"Margin="4">
17<Rectangle.RenderTransform>
18<ScaleTransformx:Name="progressBarScale"/>
19</Rectangle.RenderTransform>
20</Rectangle>
21</Grid>
22
23<!--百分比-->
24<GridHorizontalAlignment="Center">
25<TextBlockx:Name="progressText"Margin="18,0,17,19"Height="26"Text="0%"FontSize="16"Opacity="0.8"VerticalAlignment="Bottom"TextAlignment="Right"/>
26<TextBlockx:Name="progressText2"Margin="18,0,7,8"Height="70"Text="0%"FontSize="50"Opacity="0.04"FontWeight="Bold"VerticalAlignment="Bottom"TextAlignment="Right"/>
27</Grid>
28</StackPanel>
29</StackPanel>
代码中的进度条部分,我们定义了两个矩形,一个是外部的边框矩形,一个是内部的进度矩形,通过属性设置其显示效果。
百分比部分,我们定义了两个TextBlock,显示百分比数值。
3. 在新建的Silverlight项目中,VS2008会自动创建测试页面CustomizeSplashScreenTestPage.html和CustomizeSplashScreenTestPage.aspx,该测试页面是通过Object对XAP进行下载和调用,为了让Silverlight项目识别自定义启动画面,我们需要在OBJECT中添加以下参数,在代码下载中,我仅修改了CustomizeSplashScreenTestPage.html:
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->1<paramname="splashscreensource"value="SplashScreen.xaml"/>
2<paramname="onSourceDownloadProgressChanged"value="onSourceDownloadProgressChanged"/>
参数1,splashscreensource是指定自定义启动画面文件名;
参数2,onSourceDownloadProgressChanged是一个Javascript函数,在下载XAP文件的时候,Silverlight客户端会运行该函数,如果需要使用自定义启动画面,我们需要创建该函数。
<!--<br/ /><br/ />Code highlighting produced by Actipro CodeHighlighter (freeware)<br/ />http://www.CodeHighlighter.com/<br/ /><br/ />-->1<scripttype="text/javascript">
2functiononSourceDownloadProgressChanged(sender,eventArgs){
3
4sender.findName("progressText").Text=Math.round(eventArgs.progress*100)+"%";
5sender.findName("progressText2").Text=Math.round(eventArgs.progress*100)+"%";
6sender.findName("progressBarScale").ScaleX=eventArgs.progress;
7}
8</script>
在onSourceDownloadProgressChanged函数中,我们使用sender.findName获取SplashScreen.xaml文件中的控件属性,并赋值。 其中eventArgs.progress会返回一个从0到1的数字,该数字表示当前载入进程值。
从onSourceDownloadProgressChanged函数运行,可以确认进度条和百分比的显示是同步的。
到这里为止,我们已经创建了Silverlight自定义启动窗口。
测试自定义启动画面
本地运行Silverlight项目,XAP载入很快,很难正常查看自定义启动画面,我们可以使用以下方法,来延缓载入速度,在本地可以测试查看自定义启动画面。
1. 首先在客户端,添加一个大文件,例如视频,音乐,或者压缩文件之类的,这里我添加了一个压缩文件大概100M。
2. 选中该文件,点击右键编辑属性,修改Build Action为Content,这样,Silverlight编译的时候,会把该文件封装到XAP文件中,测试项目的时候,自定义启动页面也就能正常查看了。
本文主要介绍了Silverilght非托管代码的自定义启动画面创建,如果想创建Silverlight托管代码的自定义启动画面,可以参考[Silverlight]通过SilverlightLoader使用托管代码创建自定义载入界面(Splash Screen)。
对于非托管XAML+js的解决方案,也可以参考MSDN:http://msdn.microsoft.com/zh-cn/library/cc903962(VS.95).aspx
例程代码下载
本文为原创文章,转载请注明出处。
本文首发银光中国网 (http://www.silverlightchina.net/)
分享到:
相关推荐
简单的Silverlight 自定义控件源码。 通过它,可以知道基本的silverlight自定义控件是如何编写的。
学习用Silverlight创建自定义控件经典教程。
自己开发sliverlight日历插件,可自主修改其各部分样式
提供三种窗体自定义样式,这只是个引子,您可以根据自己的想法自定义窗体
自定义弹出模式对话框 自定义弹出模式对话框 自定义弹出模式对话框 silverlight自定义弹出模式对话框
http://blog.csdn.net/gzy11/archive/2011/06/01/6460254.aspx Silverlight 自定义控件 模板化控件 (二)事件 源码
在Silverlight自定义验证效果(带动画) http://blog.csdn.net/lijun7788/article/details/8495813 代码
Silverlight 自定义控件 模板化控件 (一)属性 http://blog.csdn.net/gzy11/archive/2011/01/13/6136940.aspx 此篇文章的示列代码。
Silverlight 自定义鼠标,自定义动态鼠标
silverlight 自定义进度条 非常漂亮
silverlight自定义控件之多媒体视频播放器.docx
博客文章源码http://blog.csdn.net/lijun7788/article/details/8057988
右击一次就出来一次菜单,与SilverLight Toolkit中的不一样
轻松创建Silverlight 4开发环境(在Visual Studio 2010)
该demo是一个纯用Grid写DataGrid并且展示如何使用的一个简单的demo
WPF/Silverlight自定义高性能位图效果的例子。 用的是一个外部二进制文件,直接是有显卡来渲染位图效果,所以性能非常高,效果是图片的波浪水纹化。 一般wpf自带的位图效果 数量有限,而且性能很差,不适合大量使用...
DeepZoomContainer,silverlight自定义地图控件
silverlight没有自带加密库,需要手动编码,这是一个手动编码实现字符串数据加密的demo这个demo同样适用于其他语言
用MVVM模式做的silverlight自定义日历,可以绑定其他数据,做成进度管理日历或者考勤表
Silverlight 制作可拖动的自定义控件 Silverlight 制作可拖动的自定义控件Silverlight 制作可拖动的自定义控件 Silverlight 制作可拖动的自定义控件