每一款商业的Silverlight项目,为了体现项目个性化,都会有不同的界面设计,项目UI设计的第一步就是创建个性的自定义启动画面,本文将介绍如何创建Silverlight自定义启动画面,也就是经常说的Splash Screen.

Silverlight初始化建立启动画面如下图:

经过修改,将改如下图:

根据上图我们可以看出,该启动画面分为三个部分,图片部分,进度条部分,百分比部分,对于图片部分,以后我们将修改为动画图片,现在着重介绍进度条和百分比部分。

1. 首先,使用文本工具创建一个空文件,命名为“SplashScreen.xaml”,该文档是为了承载自定义启动画面的控件代码所用,由于我们创建自定义启动画面,需要覆盖替换原始启动画面,为了不让该文件封装到XAP包中,我们使用其他文本工具先创建一个独立的空文件。文件创建后,可以使用VS2008或者Blend添加到项目中。

2. 现在可以使用VS2008或者Blend打开SplashScreen.xaml文件,填写以下代码:

 1 <StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 2             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 3             VerticalAlignment="Center" Margin="0,100,0,0">
 4   <!--头部图片-->
 5 <Image x:Name="myImage" Source="/silverlightchina.png"
 6                       Height="56"
 7                   Width="220"
 8                   HorizontalAlignment="Center"
 9                   VerticalAlignment="Center"
10                   Margin="10" />
11 
12 <StackPanel HorizontalAlignment="Center">
13 <!--进度条-->
14     <Grid HorizontalAlignment="Center">
15     <Rectangle Stroke="#FFDEE6F0" HorizontalAlignment="Left" Width="300" Height="10" RadiusX="2" RadiusY="2" StrokeThickness="1"/>
16     <Rectangle Fill="#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         <ScaleTransform x:Name="progressBarScale" />
19       </Rectangle.RenderTransform>
20     </Rectangle>
21     </Grid>
22 
23 <!--百分比-->
24     <Grid HorizontalAlignment="Center">
25     <TextBlock x:Name="progressText" Margin="18,0,17,19" Height="26" Text="0%" FontSize="16" Opacity="0.8" VerticalAlignment="Bottom" TextAlignment="Right"/>
26     <TextBlock x: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:

1 <param name="splashscreensource" value="SplashScreen.xaml"/>    
2 <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

参数1,splashscreensource是指定自定义启动画面文件名;

参数2,onSourceDownloadProgressChanged是一个Javascript函数,在下载XAP文件的时候,Silverlight客户端会运行该函数,如果需要使用自定义启动画面,我们需要创建该函数。

1 <script type="text/javascript">
2             function onSourceDownloadProgressChanged(sender, eventArgs) {
3                 
4                 sender.findName("progressText").Text = Math.round(eventArgs.progress * 100) + "%";
5                 sender.findName("progressText2").Text = Math.round(eventArgs.progress * 100) + "%";
6                 sender.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/)

转载于:https://www.cnblogs.com/springside6/archive/2010/01/16/2525259.html

创建Silverlight自定义启动画面相关推荐

  1. Eclipse自定义启动画面和状态栏图标以及各种小图标的含义

    一. 启动画面自定义 第一种情况:纯Eclipse 找到Eclipse安装路径下\eclipse\plugins\org.eclipse.platform_3.7.2.v201202080800,具体 ...

  2. Android 12 新APP启动画面(SplashScreen API)简介源码分析

    以往的启动画面 默认情况下刚启动APP时会显示一会白色背景 如果把这个启动背景设置为null,则一闪而过的白色会变成黑色 如果把启动Activity设置为背景透明[< item name=&qu ...

  3. 自定义eclipse启动画面

    自定义eclipse启动画面 准备好要替换的照片 找到eclipse的启动路径,例如:D:\eclipse\plugins\org.eclipse.platform_4.5.1.v20150904-0 ...

  4. Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式

    我们在使用Visual Studio IDE创建Silverlight工程时,默认情况下都会自动生成一个用于调试和预览Silverlight的Web工程,该工程包含了html和aspx页面,以及Sil ...

  5. Android创建启动画面

    每一个Android应用启动之后都会出现一个Splash启动界面,显示产品的LOGO.公司的LOGO或者开发人员信息.假设应用程序启动时间比較长,那么启动界面就是一个非常好的东西,能够让用户耐心等待这 ...

  6. 给 VS2008 / VS2010 MFC 项目添加启动画面

    在VC6.0时代,我们通过在MFC工程中插入Splash组件来简单方便的实现这个功能,但在VS2008以后就没有了这个功能,所以如果想给自己的程序添加一个显示Logo的启动画面,就需要自己添加代码来实 ...

  7. Unity功能记录(十四) ------ 启动画面

    今天换启动画面时美术给了好多图,但是很神奇要不是拉伸要不就是有边框,比如以下: 整了好久,都不知道为什么,透明图更离谱,还拉伸了,查看官方文档才发现要怎么修改 Unity Splash Screen设 ...

  8. 从SplashScreen深度探讨App启动画面的前世今生

    /   今日科技快讯   / 近日,特斯拉公布了2021年第四季度以及全年汽车销售和交付数据.数据表示,特斯拉2021年第四季度交付了30.86万辆电动汽车,打破了之前的单季度纪录.就全年而言,特斯拉 ...

  9. Android定制:修改开机启动画面

    转自:https://blog.csdn.net/godiors_163/article/details/72529210 引言 Android系统在按下开机键之后就会进入启动流程,这个过程本身需要一 ...

最新文章

  1. 实例教程一:电话拨号器
  2. em算法的java实现_EM算法 - Java教程 - 找一找教程网
  3. 【温故知新】HTML学习笔记(上)
  4. influxdb 最近小时统计_用pandas快速统计学生年龄班级等分组信息
  5. jsDate对象和倒计时图片案例
  6. linux下julia的开发环境,Ubuntu搭建Julia远程开发环境
  7. 人脸识别技术原理与工程实践
  8. 注意力机制BAM和CBAM详细解析(附代码)
  9. 交叉编译iproute2
  10. 智能消防栓监控系统解决方案
  11. UE4 蓝图通信:接口调用
  12. 在Linux系统中搭建web服务器
  13. [C++]_ELVE_Windows下QT5.12连接MySql8.0解决方案
  14. mysql 富文本 字段,富文本引起MYSQL出错
  15. P1359 租用游艇 (线性dp
  16. CS客户端渗透测试(二)信息收集与流量分析
  17. Android 抛弃原生MediaPlayer 使用音频框架 StarrySky
  18. android 远程代码,如何通过代码远程解锁Android手机
  19. 不得不了解的 iOS 15.4 beta 新特性
  20. 【静态时序分析】如何寻找时序分析的起点与终点

热门文章

  1. Idea groovy表生成实体类带注释
  2. 【运维学习笔记】运维入门
  3. 新材料,比钢硬一倍,但重量只有钢1/6
  4. NXP智能驾驶软件系统
  5. Megengine量化
  6. CVPR2020:三维点云无监督表示学习的全局局部双向推理
  7. FPGA最全科普总结
  8. Java map 知识
  9. python 常见的元字符(\d,\w ,^ ,$ 等) 的使用
  10. java.lang.IllegalArgumentException: column ‘_id‘ does not exist