做了一段时间的Silverlight开发,已经厌倦了Silverlight默认的千篇一律的初始屏幕,突然想打造一个自己的Silverlight初始屏幕。网上虽然有一些资料,但是大多跟MSDN上的内容差不多;MSDN对Silverlight初始屏幕也有比较全面的讲解,不过有点太理论化,没有具体的实例;MSDN上唯一的一个实例就是如何:定义简单的 Silverlight 初始屏幕,这个实例又过于简单,达不到想要的效果;因此还是得自己摸索,上网查资料,通过一段时间的努力,终于搞定了,下面把我制作厨师屏幕的步骤介绍一下:
一、创建Silverlight Web应用程序
这里我使用的是VS2010,新建一个Silverlight 应用程序,在弹出的对话框中选择在新网站中承载Silverlight,如图:
二、添加初始屏幕页面
初始屏幕页面不包含在Silverlight项目中,而是需要包含在承载它的Web项目中,否则,在下载数据包本身的过程中,将无法使用该页。
添加初始屏幕页面,需要进行如下操作:
-
在解决方案资源浏览器中右键单击 SplashScreen.SL4.Web,然后选择"属性"。单击"Web"选项卡。将"启动操作"的默认页从SpalshScreen.SL4TestPage.aspx改为 SpalshScreen.SL4TestPage.html,其实用aspx也可以,不过没必要这么做。
-
在解决方案资源浏览器中右键单击 SplashScreenSource.Web,然后依次选择"添加"、"新建项"。在"类别"树视图中选择"Silverlight"选项。选择"Silverlight JScript 页"选项。将页面命名为 SplashScreen.xaml。单击"添加"。
-
打开SplashScreen.xaml页面,需要注意的是,默认生成布局是Canvas,这个控件大家应该都熟悉,用它做布局容器,需要设置Canvas内元素的位置,我们一般希望初始屏幕的进度条在屏幕中央,而且对于不同分辨率下达到一样的效果;事实上,MSDN上和VS模板里都是针对Sl1.0的情况,对于2.0以上版本,已经能用Grid作为布局容器了,因此修改SplashScreen.xaml的内容如下:
- <Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- x:Name="parentCanvas"
- >
- </Grid>
-
在解决方案资源浏览器中选中SplashScreen.xaml,在属性选项卡选择生成操作为内容,这一点很重要,否则在发布后会看不到效果的。
三、创建进度条资源
大多数Silverlight初始屏幕都需要一个进度条显示应用程序加载进度,MSDN示例中是一种显示初始屏幕进度条的方式,这里我要使用另一种方法,先看看效果:
这里我使用文字做的效果,这里我可不是直接用的TextBlock,TextBlock写不出这种效果的字,当然也不是普通图片,而是通过Path路径画的向量图。注意在初始屏幕页面中最好不要用普通图片做为背景或者显示,普通图片是作为资源被异步加载的,因此可能会导致进度已经开始了,但是图片都没显示出来;向量图片会随初始页面显示一同呈现出来,动画也是一样,最好用Xaml来写动画。
那么画矢量图的文字是不是很麻烦呢,大家应该都安装了Expression Studio,其中有一个软件叫Expression Design,用它做矢量图就很容易了,步骤如下:
-
打开Expression Design,依次选择文件、新建,文档大小没关系,只要能显示下你要显示的文字就可以了,点击确定。
-
在左侧快捷操作栏中选择文本,在画板中间输入文字Silverlight,然后选中文字,在属性对话框中选择文字的字体为Jokerman,大小60磅,接着调整字体颜色和渐变,如图
-
- 光文字内容不能创建出进度条效果,需要在文字上添加一个遮挡的层,让遮挡层的宽度随进度增加而变小,即可实现文字逐渐显示的进度;要注意的控件宽度默认从右向左进行收缩的,因此需要对遮挡层进行180度旋转,可以围绕中心旋转,也可以绕原点旋转,然后平移
- 最后添加2个TextBlock标题,一个显示加载中的文字,一个用数字显示进度,整个初始屏幕布局的代码如下:
- <Grid
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- x:Name="parentCanvas"
- >
- <Canvas Width="410.35" Height="93.6">
- <Path x:Name="Path" Width="41.6" Height="70.4" Canvas.Left="0" Canvas.Top="2.40001" Stretch="Fill" Data="F1 M 41.6,16.4C 41.6,20.625 40.3521,24.0146 37.8562,26.5687C 35.3604,29.1229 32.0625,30.4 27.9625,30.4C 26.2542,30.4 24.6729,30.1875 23.2188,29.7625C 21.7646,29.3375 20.4333,28.6708 19.225,27.7625C 17.8833,26.7708 16.8771,25.5875 16.2062,24.2125C 15.5354,22.8375 15.2,21.3 15.2,19.6C 15.2,18.3583 15.4521,17.2542 15.9562,16.2875C 16.4604,15.3208 17.2292,14.5 18.2625,13.825C 19.1875,13.2333 20.225,12.7813 21.375,12.4688C 22.525,12.1563 23.8167,12 25.25,12C 26.125,12 26.9583,12.1042 27.75,12.3125C 28.5417,12.5208 29.2417,12.8417 29.85,13.275C 30.5667,13.7917 31.1042,14.3792 31.4625,15.0375C 31.8208,15.6958 32,16.4542 32,17.3125C 32,18.5458 31.5188,19.5771 30.5562,20.4063C 29.5938,21.2354 28.4583,21.65 27.15,21.65C 26.3083,21.65 25.5979,21.5083 25.0188,21.225C 24.4396,20.9417 23.9917,20.4875 23.675,19.8625C 23.8833,19.9125 24.1062,19.9521 24.3438,19.9812C 24.5813,20.0104 24.7917,20.025 24.975,20.025C 25.8917,20.025 26.575,19.8625 27.025,19.5375C 27.475,19.2125 27.7,18.7 27.7,18C 27.7,17.3333 27.4625,16.825 26.9875,16.475C 26.5125,16.125 25.8,15.95 24.85,15.95C 24.225,15.95 23.6229,16.0333 23.0437,16.2C 22.4646,16.3667 21.9625,16.6208 21.5375,16.9625C 21.0375,17.3458 20.6563,17.7896 20.3938,18.2937C 20.1312,18.7979 20,19.3458 20,19.9375C 20,21.8542 20.6375,23.2771 21.9125,24.2063C 23.1875,25.1354 25.0958,25.6 27.6375,25.6C 30.1375,25.6 32.1563,24.7354 33.6937,23.0062C 35.2312,21.2771 36,19.1417 36,16.6C 36,15.075 35.6458,13.7104 34.9375,12.5062C 34.2292,11.3021 33.1833,10.2583 31.8,9.375C 30.65,8.625 29.375,8.075 27.975,7.72499C 26.575,7.375 25.0625,7.2 23.4375,7.2C 21.4625,7.2 19.6625,7.43333 18.0375,7.90001C 16.4125,8.36665 14.975,9.08333 13.725,10.05C 12.3583,11.0917 11.3292,12.3417 10.6375,13.8C 9.94583,15.2583 9.6,16.925 9.6,18.8C 9.6,20.7 10.2396,22.5417 11.5187,24.325C 12.7979,26.1083 14.7167,27.8458 17.275,29.5375C 19.6667,31.1208 22.0479,32.6937 24.4187,34.2562C 26.7896,35.8187 29.1583,37.3833 31.525,38.95C 34.0833,41.1583 36.0021,43.5833 37.2813,46.225C 38.5604,48.8667 39.2,51.725 39.2,54.8C 39.2,57.6417 38.675,60.1812 37.625,62.4187C 36.575,64.6562 34.9833,66.5833 32.85,68.2C 30.8833,69.6833 28.6687,70.8208 26.2063,71.6125C 23.7437,72.4042 21.0083,72.8 18,72.8C 15.6583,72.8 13.5062,72.6 11.5438,72.2C 9.58125,71.8 7.77084,71.1833 6.1125,70.35C 4.0875,69.325 2.5625,68.0521 1.5375,66.5312C 0.512505,65.0104 0,63.2333 0,61.2C 0,57.725 0.872917,54.9229 2.61875,52.7937C 4.36459,50.6646 6.82916,49.6 10.0125,49.6C 11.3042,49.6 12.475,49.7917 13.525,50.175C 14.575,50.5583 15.5333,51.1083 16.4,51.825C 17.35,52.5917 18.0542,53.4958 18.5125,54.5375C 18.9708,55.5792 19.2,56.7333 19.2,58C 19.2,60.2833 18.65,61.9875 17.55,63.1125C 16.45,64.2375 14.7708,64.8 12.5125,64.8C 11.3042,64.8 10.25,64.4563 9.35,63.7688C 8.45,63.0813 8,62.1708 8,61.0375C 8,60.0125 8.22916,59.2437 8.6875,58.7312C 9.14584,58.2188 9.83334,57.9625 10.75,57.9625C 10.85,57.9625 10.9667,57.9688 11.1,57.9812C 11.2333,57.9937 11.3667,58 11.5,58C 11.1833,58.2417 10.9458,58.4979 10.7875,58.7688C 10.6292,59.0396 10.55,59.3083 10.55,59.575C 10.55,60.1167 10.7083,60.5083 11.025,60.75C 11.3417,60.9917 11.8,61.1125 12.4,61.1125C 13.075,61.1125 13.5771,60.8917 13.9063,60.45C 14.2354,60.0083 14.4,59.325 14.4,58.4C 14.4,57.7833 14.2646,57.225 13.9938,56.725C 13.7229,56.225 13.3042,55.775 12.7375,55.375C 12.2792,55.05 11.7604,54.8063 11.1813,54.6437C 10.6021,54.4812 9.99167,54.4 9.35,54.4C 7.58334,54.4 6.25,54.9313 5.35,55.9938C 4.45,57.0562 4,58.625 4,60.7C 4,61.9083 4.28542,62.9833 4.85625,63.925C 5.42709,64.8667 6.27084,65.675 7.3875,66.35C 8.30417,66.9083 9.33334,67.3229 10.475,67.5937C 11.6167,67.8646 12.8417,68 14.15,68C 15.8083,68 17.3292,67.7292 18.7125,67.1875C 20.0958,66.6458 21.3333,65.825 22.425,64.725C 23.4833,63.6417 24.2771,62.4437 24.8062,61.1312C 25.3354,59.8187 25.6,58.3542 25.6,56.7375C 25.6,55.0375 25.0521,53.2292 23.9563,51.3125C 22.8604,49.3958 21.1875,47.3833 18.9375,45.275C 16.9292,43.4 14.8896,41.5479 12.8187,39.7188C 10.7479,37.8896 8.68333,36.05 6.625,34.2C 4.43333,31.9667 2.78125,29.7625 1.66875,27.5875C 0.556252,25.4125 0,23.2833 0,21.2C 0,18.05 0.564583,15.2646 1.69375,12.8438C 2.82291,10.4229 4.5,8.40001 6.725,6.77501C 8.74167,5.3 11.0854,4.20209 13.7562,3.48125C 16.4271,2.76042 19.4417,2.40001 22.8,2.40001C 25.1667,2.40001 27.4,2.67708 29.5,3.23125C 31.6,3.78542 33.5375,4.625 35.3125,5.75C 37.4208,7.09167 38.9958,8.65001 40.0375,10.425C 41.0792,12.2 41.6,14.1917 41.6,16.4 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.400331" RadiusY="0.236559" Center="0.501712,0.736808" GradientOrigin="0.501712,0.736808">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_0" Width="17.5" Height="61.4125" Canvas.Left="47.2" Canvas.Top="12.9875" Stretch="Fill" Data="F1 M 64.7,25.1875L 63.725,27.5875L 60.3375,25.8125C 59.9792,26.2875 59.5833,26.6687 59.15,26.9563C 58.7167,27.2438 58.2292,27.4542 57.6875,27.5875L 58.4625,30.8125L 55.85,31.2L 55.1875,28C 54.7792,27.9167 54.3771,27.7625 53.9812,27.5375C 53.5854,27.3125 53.2083,27.0542 52.85,26.7625L 50.3,29.175L 48.5,27.075L 51.5125,24.8375C 51.2458,24.3292 51.0937,23.7958 51.0562,23.2375C 51.0187,22.6792 51.0667,22.0792 51.2,21.4375L 47.725,19.2L 49.0125,17.05L 52.2,19.275C 52.5083,18.875 52.8604,18.5354 53.2562,18.2562C 53.6521,17.9771 54.1042,17.7583 54.6125,17.6L 53.9625,12.9875L 56.425,12.9875L 56.575,17.2875C 57.1416,17.3625 57.6542,17.4917 58.1125,17.675C 58.5708,17.8583 59.0042,18.0958 59.4125,18.3875L 62.125,16.1875L 63.925,17.9875L 60.8,20.1125C 61.0083,20.4042 61.1521,20.85 61.2312,21.45C 61.3104,22.05 61.3375,22.8125 61.3125,23.7375L 64.7,25.1875 Z M 63.2,74.4L 47.2,72.4L 53.6,34.4L 60.8,34.4L 63.2,74.4 Z M 59.175,54.8C 59.175,53.8833 58.9479,53.1917 58.4937,52.725C 58.0396,52.2583 57.3417,52.025 56.4,52.025C 55.4417,52.025 54.7271,52.2583 54.2562,52.725C 53.7854,53.1917 53.55,53.8833 53.55,54.8C 53.55,55.7333 53.7854,56.4354 54.2562,56.9063C 54.7271,57.3771 55.4417,57.6125 56.4,57.6125C 57.3417,57.6125 58.0396,57.3771 58.4937,56.9063C 58.9479,56.4354 59.175,55.7333 59.175,54.8 Z M 59.225,65.2C 59.225,64.2083 58.875,63.3604 58.175,62.6562C 57.475,61.9521 56.6167,61.6 55.6,61.6C 54.6333,61.6 53.7979,61.9521 53.0937,62.6562C 52.3896,63.3604 52.0375,64.2083 52.0375,65.2C 52.0375,66.1833 52.3896,67.0208 53.0937,67.7125C 53.7979,68.4042 54.6333,68.75 55.6,68.75C 56.6167,68.75 57.475,68.4042 58.175,67.7125C 58.875,67.0208 59.225,66.1833 59.225,65.2 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.965573" RadiusY="0.275147" Center="0.501357,0.659719" GradientOrigin="0.501357,0.659719">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_1" Width="20.3875" Height="67.2" Canvas.Left="73.2125" Canvas.Top="3.2" Stretch="Fill" Data="F1 M 93.6,3.2L 85.6,70.4L 73.6,69.225L 74.475,65.7375L 79.275,66.4L 79.475,59.2L 74,58.875L 74.275,55.9125L 79.475,56L 79.5875,48.8L 73.6,48.5625L 74.275,45.6L 79.675,45.6L 79.7875,37.9L 73.325,37.5L 74,33.4875L 79.8625,34.575L 79.8625,28L 74,27.3375L 74.475,24.1125L 79.9875,24L 80.0625,17.6L 73.4,17.3L 74.4,13.8125L 80.0625,14.4L 80.25,8L 73.2125,7.46251L 74,3.2L 93.6,3.2 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.785224" RadiusY="0.238226" Center="0.508216,0.761775" GradientOrigin="0.508216,0.761775">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_2" Width="43.2" Height="41.775" Canvas.Left="94.4" Canvas.Top="32.3" Stretch="Fill" Data="F1 M 129.187,34.8C 129.187,35.6333 128.992,36.2521 128.6,36.6563C 128.208,37.0604 127.608,37.2625 126.8,37.2625C 125.992,37.2625 125.373,37.0604 124.944,36.6563C 124.515,36.2521 124.3,35.6333 124.3,34.8C 124.3,33.9667 124.515,33.3417 124.944,32.925C 125.373,32.5083 125.992,32.3 126.8,32.3C 127.608,32.3 128.208,32.5083 128.6,32.925C 128.992,33.3417 129.187,33.9667 129.187,34.8 Z M 126.1,42.8C 126.1,43.6333 125.898,44.2583 125.494,44.675C 125.09,45.0917 124.458,45.3 123.6,45.3C 122.767,45.3 122.135,45.0917 121.706,44.675C 121.277,44.2583 121.062,43.6333 121.062,42.8C 121.062,41.9917 121.277,41.3729 121.706,40.9437C 122.135,40.5146 122.767,40.3 123.6,40.3C 124.458,40.3 125.09,40.5146 125.494,40.9437C 125.898,41.3729 126.1,41.9917 126.1,42.8 Z M 122.9,50.8625C 122.9,51.7208 122.692,52.3521 122.275,52.7562C 121.858,53.1604 121.233,53.3625 120.4,53.3625C 119.592,53.3625 118.973,53.1604 118.544,52.7562C 118.115,52.3521 117.9,51.7208 117.9,50.8625C 117.9,50.0542 118.115,49.4417 118.544,49.025C 118.973,48.6083 119.592,48.4 120.4,48.4C 121.233,48.4 121.858,48.6083 122.275,49.025C 122.692,49.4417 122.9,50.0542 122.9,50.8625 Z M 137.6,37.2L 118.8,73.6L 117.537,71.4125L 113.6,74.075L 111.975,71.6L 116.113,68.7875L 113.712,64.475L 109.375,67.2125L 107.762,64.4L 112.175,62.1L 109.375,57.2L 105.037,59.6875L 103.425,57.2L 107.95,54.475L 105.15,49.4L 100.738,51.8L 99.125,49.2L 103.613,46.875L 100.387,41.3125L 95.65,43.6375L 94.4,41.2L 110,32.8L 120.4,62.4L 132.4,34.4L 137.6,37.2 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.281163" RadiusY="0.290753" Center="0.49783,0.643178" GradientOrigin="0.49783,0.643178">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_3" Width="42.9875" Height="48.0125" Canvas.Left="141.012" Canvas.Top="31.675" Stretch="Fill" Data="F1 M 184,67.6C 183.342,68.2333 182.752,68.7958 182.231,69.2875C 181.71,69.7792 181.254,70.175 180.862,70.475L 183.8,74.7125L 181.05,76.2875L 178.063,72.7C 177.021,73.3083 175.91,73.8208 174.731,74.2375C 173.552,74.6542 172.292,74.9375 170.95,75.0875L 170.875,79.6875L 167.337,79.45L 167.65,75.2C 166.45,75.2 165.169,75.0771 163.806,74.8313C 162.444,74.5854 161.017,74.2167 159.525,73.725L 157.325,78.4L 153.787,76.4875L 156.188,72.1375C 154.904,71.4375 153.731,70.6292 152.669,69.7125C 151.606,68.7958 150.671,67.7542 149.862,66.5875L 145.663,69.225L 143.9,66.475L 148.487,64.1125C 147.879,62.8708 147.406,61.5958 147.069,60.2875C 146.731,58.9792 146.508,57.6417 146.4,56.275L 142.225,57.325L 141.012,53.9L 146.4,52.7C 146.533,51.25 146.756,49.9437 147.069,48.7813C 147.381,47.6188 147.788,46.5875 148.288,45.6875L 144.488,43.4375L 146.288,40.4875L 150,43.05C 150.658,42.2417 151.373,41.5146 152.144,40.8688C 152.915,40.2229 153.729,39.6542 154.587,39.1625L 151.375,34.5375L 154.9,32.8125L 157.487,37.775C 158.329,37.5167 159.09,37.3083 159.769,37.15C 160.448,36.9917 161.05,36.875 161.575,36.8L 162.625,31.675L 165.412,32.5375L 164.7,36.6C 165.75,36.6 166.746,36.7312 167.688,36.9938C 168.629,37.2562 169.529,37.6458 170.388,38.1625L 174.263,34.3375L 176.462,36.175L 172.775,40.15C 173.35,40.6917 173.885,41.3458 174.381,42.1125C 174.877,42.8792 175.321,43.7292 175.712,44.6625L 180.287,43.15L 181.075,46.025L 176.662,47.55C 176.871,48.125 177.046,48.75 177.188,49.425C 177.329,50.1 177.467,50.825 177.6,51.6L 159.2,54.8L 159.2,55.225C 159.2,57.075 159.404,58.8208 159.813,60.4625C 160.221,62.1042 160.85,63.6625 161.7,65.1375C 162.7,66.8875 163.902,68.2021 165.306,69.0813C 166.71,69.9604 168.283,70.4 170.025,70.4C 171.825,70.4 173.717,69.9396 175.7,69.0188C 177.683,68.0979 179.783,66.6917 182,64.8L 184,67.6 Z M 168,48.35C 167.892,47.1667 167.462,46.2792 166.712,45.6875C 165.962,45.0958 164.888,44.8 163.487,44.8C 161.771,44.8 160.173,45.3229 158.694,46.3688C 157.215,47.4146 156.212,48.7583 155.688,50.4L 168,48.35 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.284123" RadiusY="0.254387" Center="0.497528,0.563109" GradientOrigin="0.497528,0.563109">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_4" Width="38.6125" Height="42.275" Canvas.Left="189.6" Canvas.Top="31.325" Stretch="Fill" Data="F1 M 228.212,39.6L 224.313,40.9375C 224.313,41.1375 224.327,41.4375 224.356,41.8375C 224.385,42.2375 224.4,42.55 224.4,42.775C 224.4,43.4167 224.327,44.0167 224.181,44.575C 224.035,45.1333 223.821,45.65 223.537,46.125L 226.8,48.4L 224.662,50.675L 221.65,48.0875C 221.225,48.4958 220.742,48.8896 220.2,49.2687C 219.658,49.6479 219.054,50.025 218.388,50.4L 216.388,47.6C 216.804,47.1083 217.11,46.6167 217.306,46.125C 217.502,45.6333 217.6,45.1417 217.6,44.65C 217.6,43.65 217.248,42.8917 216.544,42.375C 215.84,41.8583 214.779,41.6 213.362,41.6C 211.804,41.6 210.144,42.4708 208.381,44.2125C 206.619,45.9542 204.754,48.55 202.788,52L 203.2,73.6L 189.6,71.6L 196.4,34.8L 202.4,33.6L 202.625,45.0625C 203.3,43.8875 203.952,42.8458 204.581,41.9375C 205.21,41.0292 205.821,40.2333 206.413,39.55L 205.05,35.7625L 207.2,34.4L 208.6,37.6375C 209.508,37.0958 210.435,36.6354 211.381,36.2562C 212.327,35.8771 213.296,35.6083 214.288,35.45L 214.4,31.325L 217.388,31.6L 216.8,35.2C 218.375,35.275 219.717,35.6021 220.825,36.1813C 221.933,36.7604 222.779,37.5792 223.362,38.6375L 227.2,36.7875L 228.212,39.6 Z M 199.788,56.4C 199.788,55.5917 199.579,54.9729 199.163,54.5437C 198.746,54.1146 198.092,53.9 197.2,53.9C 196.4,53.9 195.792,54.1146 195.375,54.5437C 194.958,54.9729 194.75,55.5917 194.75,56.4C 194.75,57.2333 194.958,57.8521 195.375,58.2562C 195.792,58.6604 196.4,58.8625 197.2,58.8625C 198.092,58.8625 198.746,58.6604 199.163,58.2562C 199.579,57.8521 199.788,57.2333 199.788,56.4 Z M 199.563,66C 199.563,65.0917 199.256,64.3167 198.644,63.675C 198.031,63.0333 197.283,62.7125 196.4,62.7125C 195.542,62.7125 194.794,63.0333 194.156,63.675C 193.519,64.3167 193.2,65.0917 193.2,66C 193.2,67.0667 193.467,67.8604 194,68.3812C 194.533,68.9021 195.333,69.1625 196.4,69.1625C 197.492,69.1625 198.292,68.9021 198.8,68.3812C 199.308,67.8604 199.563,67.0667 199.563,66 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.309518" RadiusY="0.282703" Center="0.499093,0.641603" GradientOrigin="0.499093,0.641603">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_5" Width="20.3875" Height="67.2" Canvas.Left="232.413" Canvas.Top="3.2" Stretch="Fill" Data="F1 M 252.8,3.2L 244.8,70.4L 232.8,69.225L 233.675,65.7375L 238.475,66.4L 238.675,59.2L 233.2,58.875L 233.475,55.9125L 238.675,56L 238.788,48.8L 232.8,48.5625L 233.475,45.6L 238.875,45.6L 238.988,37.9L 232.525,37.5L 233.2,33.4875L 239.063,34.575L 239.063,28L 233.2,27.3375L 233.675,24.1125L 239.188,24L 239.263,17.6L 232.6,17.3L 233.6,13.8125L 239.263,14.4L 239.45,8L 232.413,7.46251L 233.2,3.2L 252.8,3.2 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.785222" RadiusY="0.238226" Center="0.508216,0.761775" GradientOrigin="0.508216,0.761775">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_6" Width="17.5" Height="61.4125" Canvas.Left="257.6" Canvas.Top="12.9875" Stretch="Fill" Data="F1 M 275.1,25.1875L 274.125,27.5875L 270.737,25.8125C 270.379,26.2875 269.983,26.6687 269.55,26.9563C 269.117,27.2438 268.629,27.4542 268.087,27.5875L 268.862,30.8125L 266.25,31.2L 265.587,28C 265.179,27.9167 264.777,27.7625 264.381,27.5375C 263.985,27.3125 263.608,27.0542 263.25,26.7625L 260.7,29.175L 258.9,27.075L 261.912,24.8375C 261.646,24.3292 261.494,23.7958 261.456,23.2375C 261.419,22.6792 261.467,22.0792 261.6,21.4375L 258.125,19.2L 259.412,17.05L 262.6,19.275C 262.908,18.875 263.26,18.5354 263.656,18.2562C 264.052,17.9771 264.504,17.7583 265.012,17.6L 264.362,12.9875L 266.825,12.9875L 266.975,17.2875C 267.542,17.3625 268.054,17.4917 268.512,17.675C 268.971,17.8583 269.404,18.0958 269.812,18.3875L 272.525,16.1875L 274.325,17.9875L 271.2,20.1125C 271.408,20.4042 271.552,20.85 271.631,21.45C 271.71,22.05 271.737,22.8125 271.712,23.7375L 275.1,25.1875 Z M 273.6,74.4L 257.6,72.4L 264,34.4L 271.2,34.4L 273.6,74.4 Z M 269.575,54.8C 269.575,53.8833 269.348,53.1917 268.894,52.725C 268.44,52.2583 267.742,52.025 266.8,52.025C 265.842,52.025 265.127,52.2583 264.656,52.725C 264.185,53.1917 263.95,53.8833 263.95,54.8C 263.95,55.7333 264.185,56.4354 264.656,56.9063C 265.127,57.3771 265.842,57.6125 266.8,57.6125C 267.742,57.6125 268.44,57.3771 268.894,56.9063C 269.348,56.4354 269.575,55.7333 269.575,54.8 Z M 269.625,65.2C 269.625,64.2083 269.275,63.3604 268.575,62.6562C 267.875,61.9521 267.017,61.6 266,61.6C 265.033,61.6 264.198,61.9521 263.494,62.6562C 262.79,63.3604 262.437,64.2083 262.437,65.2C 262.437,66.1833 262.79,67.0208 263.494,67.7125C 264.198,68.4042 265.033,68.75 266,68.75C 267.017,68.75 267.875,68.4042 268.575,67.7125C 269.275,67.0208 269.625,66.1833 269.625,65.2 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.965569" RadiusY="0.275147" Center="0.501358,0.659719" GradientOrigin="0.501358,0.659719">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_7" Width="42" Height="61.6125" Canvas.Left="280.8" Canvas.Top="31.9875" Stretch="Fill" Data="F1 M 322.8,33.6L 322.512,36.8L 317.8,36.6125L 317.387,39.6375L 322.15,40L 321.862,44L 316.5,43.4125L 316.575,46.4875L 321.462,47.2L 321.137,50.4L 316.087,50.0125L 315.887,53.7375L 320.85,54.4C 319.733,67.4833 317.337,77.2875 313.662,83.8125C 309.987,90.3375 305.033,93.6 298.8,93.6C 296.675,93.6 294.66,93.1979 292.756,92.3937C 290.852,91.5896 289.033,90.3833 287.3,88.775C 285.708,87.3 284.379,85.6667 283.312,83.875C 282.246,82.0833 281.408,80.125 280.8,78L 283.6,76C 284.325,77.3333 285.152,78.5396 286.081,79.6187C 287.01,80.6979 288.033,81.6792 289.15,82.5625C 290.483,83.6042 291.825,84.3708 293.175,84.8625C 294.525,85.3542 295.867,85.6 297.2,85.6C 299.183,85.6 300.919,85.0417 302.406,83.925C 303.894,82.8083 305.154,81.125 306.187,78.875C 306.896,77.3083 307.475,75.5375 307.925,73.5625C 308.375,71.5875 308.667,69.4208 308.8,67.0625C 307.45,67.9208 306.008,68.5583 304.475,68.975C 302.942,69.3917 301.317,69.6 299.6,69.6C 294.667,69.6 290.433,67.8875 286.9,64.4625C 283.367,61.0375 281.6,56.8833 281.6,52C 281.6,47.1333 283.367,42.9833 286.9,39.55C 290.433,36.1167 294.667,34.4 299.6,34.4C 301.608,34.4 303.515,34.6917 305.319,35.275C 307.123,35.8583 308.804,36.7125 310.362,37.8375L 310.637,31.9875L 322.8,33.6 Z M 309.2,52.4C 309.2,51.15 309.037,49.9708 308.712,48.8625C 308.387,47.7542 307.887,46.6917 307.212,45.675C 306.479,44.5833 305.604,43.7646 304.587,43.2188C 303.571,42.6729 302.442,42.4 301.2,42.4C 299.725,42.4 298.375,42.7458 297.15,43.4375C 295.925,44.1292 294.817,45.1833 293.825,46.6C 292.933,47.8583 292.273,49.1729 291.844,50.5437C 291.415,51.9146 291.2,53.3333 291.2,54.8C 291.2,56.075 291.356,57.275 291.669,58.4C 291.981,59.525 292.462,60.5542 293.112,61.4875C 293.904,62.6042 294.804,63.4354 295.812,63.9812C 296.821,64.5271 297.95,64.8 299.2,64.8C 300.642,64.8 301.985,64.4479 303.231,63.7437C 304.477,63.0396 305.583,61.9833 306.55,60.575C 307.408,59.325 308.065,58.0208 308.519,56.6625C 308.973,55.3042 309.2,53.8833 309.2,52.4 Z M 305.325,53.2C 305.325,54.5333 304.85,55.6813 303.9,56.6438C 302.95,57.6062 301.783,58.0875 300.4,58.0875C 299.1,58.0875 297.981,57.5979 297.044,56.6187C 296.106,55.6396 295.637,54.5 295.637,53.2C 295.637,51.9 296.119,50.775 297.081,49.825C 298.044,48.875 299.15,48.4 300.4,48.4C 301.725,48.4 302.877,48.8688 303.856,49.8063C 304.835,50.7438 305.325,51.875 305.325,53.2 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.412589" RadiusY="0.281254" Center="0.503601,0.516758" GradientOrigin="0.503601,0.516758">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_8" Width="44.0375" Height="72.8" Canvas.Left="330.4" Canvas.Top="0" Stretch="Fill" Data="F1 M 374.437,62.5875C 374.437,63.2542 374.437,64.1667 374.437,65.325C 374.437,66.4833 374.425,67.9083 374.4,69.6L 360.075,72C 361.117,67.4917 361.898,63.3729 362.419,59.6438C 362.94,55.9146 363.2,52.5542 363.2,49.5625C 363.2,48.2292 363.112,46.9271 362.937,45.6563C 362.762,44.3854 362.529,43.15 362.237,41.95C 361.804,40.2417 361.252,38.9562 360.581,38.0938C 359.91,37.2312 359.117,36.8 358.2,36.8C 356.65,36.8 355.042,37.2125 353.375,38.0375C 351.708,38.8625 349.962,40.0833 348.137,41.7L 347.2,70.8L 336,72.8L 335.237,69.6L 340.375,68.9L 339.987,64.025L 334.85,64.8L 334.312,62.4L 339.787,61.8125L 339.312,55.375L 334.237,56L 333.85,52.8L 339.125,52.2875L 338.575,45.6625L 333.85,46.4L 333.162,43.2L 338.262,42.575L 337.875,37.4125L 333.275,38.4L 332.7,35.2L 337.6,34.6125L 337.012,27.05L 332.775,27.825L 332.275,24.8L 336.812,23.8125L 336.187,15.9375L 332.275,16.8L 331.587,13.6L 335.887,12.5625L 335.5,7.27501L 331.325,8.8L 330.4,5.08751L 349.6,0L 348.325,35.6125C 350.283,34.1292 352.246,33.0229 354.212,32.2937C 356.179,31.5646 358.15,31.2 360.125,31.2C 363.208,31.2 365.798,32.1958 367.894,34.1875C 369.99,36.1792 371.571,39.1542 372.637,43.1125C 373.237,45.3292 373.687,48.0604 373.987,51.3063C 374.287,54.5521 374.437,58.3125 374.437,62.5875 Z M 360.212,44.4C 358.521,47.7083 357.083,51.0771 355.9,54.5062C 354.717,57.9354 353.817,61.4208 353.2,64.9625L 349.575,63.6C 350.717,59.5083 352.052,55.7146 353.581,52.2188C 355.11,48.7229 356.85,45.5292 358.8,42.6375L 360.212,44.4 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.363525" RadiusY="0.219901" Center="0.501703,0.747133" GradientOrigin="0.501703,0.747133">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- <Path x:Name="Path_9" Width="28.5" Height="52.8" Canvas.Left="381.85" Canvas.Top="21.6" Stretch="Fill" Data="F1 M 410.35,36.8L 409.762,40.975L 401.937,41.575L 401.35,46.5875L 409.762,46.825L 408.163,52.375L 400.675,51.9L 397.737,73.6L 392,74.4L 391.262,51.2L 384.237,50.6875L 385.4,46.275L 391.175,46.4L 390.987,42.4L 383.525,42.9875L 381.85,36.8L 390.787,36.8L 390.4,23.2L 404.8,21.6L 402.687,36.8L 410.35,36.8 Z M 400.412,30.8C 400.412,29.725 400.144,28.9208 399.606,28.3875C 399.069,27.8542 398.267,27.5875 397.2,27.5875C 396.133,27.5875 395.333,27.8542 394.8,28.3875C 394.267,28.9208 394,29.725 394,30.8C 394,31.8917 394.267,32.7042 394.8,33.2375C 395.333,33.7708 396.133,34.0375 397.2,34.0375C 398.267,34.0375 399.069,33.7708 399.606,33.2375C 400.144,32.7042 400.412,31.8917 400.412,30.8 Z M 398.862,40.4C 398.862,39.5417 398.66,38.9042 398.256,38.4875C 397.852,38.0708 397.233,37.8625 396.4,37.8625C 395.542,37.8625 394.904,38.0708 394.487,38.4875C 394.071,38.9042 393.862,39.5417 393.862,40.4C 393.862,41.2333 394.071,41.8521 394.487,42.2562C 394.904,42.6604 395.542,42.8625 396.4,42.8625C 397.233,42.8625 397.852,42.6604 398.256,42.2562C 398.66,41.8521 398.862,41.2333 398.862,40.4 Z ">
- <Path.Fill>
- <RadialGradientBrush RadiusX="0.57092" RadiusY="0.308167" Center="0.49978,0.626018" GradientOrigin="0.49978,0.626018">
- <RadialGradientBrush.GradientStops>
- <GradientStop Color="#FF0897FB" Offset="0"/>
- <GradientStop Color="#FF6ABFFA" Offset="0.671296"/>
- <GradientStop Color="#FFCDE7F9" Offset="1"/>
- </RadialGradientBrush.GradientStops>
- <RadialGradientBrush.RelativeTransform>
- <TransformGroup/>
- </RadialGradientBrush.RelativeTransform>
- </RadialGradientBrush>
- </Path.Fill>
- </Path>
- </Canvas>
- <TextBlock Width="132" Margin="-90,0,0,150" x:Name="uxStatusText" Height="25" Text="加载中,请稍候..." FontFamily="STCaiyun" FontSize="16" Foreground="#FF0A92FB"/>
- <TextBlock Width="180" Margin="230,0,0,180" x:Name="uxStatus" Height="60" Text="90%" FontFamily="Bodoni MT Condensed" FontSize="60" Foreground="#FFA1D3F9"/>
- <Rectangle x:Name="uxProgress" Width="411" Height="94" Fill="#FFFFFFFF">
- <Rectangle.RenderTransform>
- <TransformGroup>
- <ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="1"/>
- <SkewTransform AngleX="0" AngleY="0"/>
- <RotateTransform Angle="180"/>
- <TranslateTransform X="410.35" Y="94"/>
- </TransformGroup>
- </Rectangle.RenderTransform>
- </Rectangle>
- </Grid>
四、使用js控制显示加载进度返回到 SpalshScreen.SL4TestPage.html进行编辑,首先需要引用之前创建的 JavaScript 文件。在紧挨 HTML 中 head 元素的后面,添加以下内容:
- <script type="text/javascript" src="splashscreen.js"></script>
接着在SplashScreenSourceTestPage.html 的 Silverlight object 元素区域进行编辑。请注意,当前已存在大量作为 object 的子元素的"params"元素。现在将要添加几个 params 元素以添加您的自定义初始屏幕信息。添加以下 params 元素:- <param name="splashscreensource" value="SplashScreen.xaml"/>
- <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
最后打开SplashScreen.js文件,清空里面的内容,复制以下代码到SplashScreen.js中:- function onSourceDownloadProgressChanged(sender, eventArgs) {
- sender.findName("uxStatus").Text = Math.round((eventArgs.progress * 1000)) / 10 + "%";
- sender.findName("uxProgressBar").ScaleX = 1 - eventArgs.progress;
- }
五、运行程序
到这里所有工作就做完了,可以调试运行程序查看效果,不过可能由于加载过快而看不到过程,这时我们可以在Silverlight应用程序里添加一个外部文件,20M左右大小就可以了,不要太大,将生成属性设置为嵌入的资源,这样Silverlight应用程序就有足够大而且可以看到动画加载过程