SILVERLIGHT 应急卫生模拟演练项目之loading界面实现

第一次在博客园写文章 俺是菜鸟 有不足之处还请大佬们多多指教 第一次也不知道该写啥 俺就拿自己最近做的一个项目 来细说吧 俺们公司是做医疗卫生方面的  其中有一块涉及到应急卫生模拟演练方面

这块分到我这里 我就用SILVERLIGHT实现了 下面我给大家介绍一下项目

初始化的LOADING界面 这个设计不是俺原创呵呵 是在银光中国找到的  然后修改下了STYLE

因为SILVERLIGHT的机制大家都懂的 它第一次加载要下载XAP包 这个是需要时间的 默认那个界面呢效果不好 这块它提供了可以自定义的功能

首先现在承载SILVERLIGHT项目的网站中 添加一个XAML页 这个页面主要承载LOADING界面的设计

添加完后 就可以用BLEND工具进行STYLE上的设计

这里列出样式的代码如下

<?xml version="1.0" encoding="utf-8" ?>
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      x:Name="LayoRoot" Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="308" d:DesignWidth="554">

        <Grid.Background>

            <RadialGradientBrush RadiusX="0.602" RadiusY="0.675">

                <GradientStop Color="#FF5B91C4" Offset="1"/>

                <GradientStop Color="#FF96E8EF" Offset="0.273" />

            </RadialGradientBrush>

        </Grid.Background>
    <Grid Margin="0" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" HorizontalAlignment="Center" Height="180" Width="300">

            <Grid Margin="0">

                <Grid x:Name="elFuel" Margin="0" RenderTransformOrigin="0.5,0.5" Height="25">

                    <Grid.RenderTransform>

                        <TranslateTransform x:Name="elFuelTranslateY"/>

                    </Grid.RenderTransform>

                    <Border x:Name="rectFuel" BorderThickness="1" Margin="1" Width="1" HorizontalAlignment="Left" CornerRadius="10">

                        <Border.Background>

                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="White" Offset="1"/>

                                <GradientStop Color="Black" Offset="1"/>

                                <GradientStop Color="#FF9DFFD9" Offset="1"/>

                                <GradientStop Color="#FFEBEB45" Offset="1"/>

                                <GradientStop Color="#FFEBEB67" Offset="0.872"/>

                            </LinearGradientBrush>

                        </Border.Background>

                    </Border>

                    <Border BorderThickness="1" CornerRadius="10">

                        <Border.Background>

                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                                <GradientStop Color="#26097320" Offset="0"/>

                                <GradientStop Color="#19FFFFFF" Offset="1"/>

                            </LinearGradientBrush>

                        </Border.Background>

                        <Border.BorderBrush>

                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                            <GradientStop Color="White" Offset="0"/>

                                <GradientStop Color="White" Offset="1"/>

                            </LinearGradientBrush>

                        </Border.BorderBrush>

                    </Border>

                </Grid>

                <TextBlock x:Name="txtProcent2" Margin="0" Text="0%" TextWrapping="Wrap" FontSize="93.333" FontFamily="Arial Black" TextOptions.TextHintingMode="Animated" Foreground="#4CEEFFEE" FontWeight="Bold" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Height="132" Width="281" TextAlignment="Center"/>

                <TextBlock x:Name="txtPro" Margin="0" Text="loading......" TextWrapping="Wrap" FontFamily="Arial Black" TextOptions.TextHintingMode="Animated" Foreground="White" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="12"/>
            <TextBlock FontFamily="Arial Black" FontSize="32" Foreground="White" HorizontalAlignment="Center" Margin="-5,128.75,-36,5" RenderTransformOrigin="0.5,0.5" Text="应急卫生综合模拟演练" TextOptions.TextHintingMode="Animated" TextWrapping="Wrap" VerticalAlignment="Center" Width="341" FontWeight="Bold" Height="46.25" />
        </Grid>
    </Grid>

        <Grid HorizontalAlignment="Right" Height="50" Margin="0,0,-11,0" VerticalAlignment="Center" Width="154">

            <Rectangle Stroke="#FFBEBEBE" StrokeThickness="2" RadiusX="10" RadiusY="10">

                <Rectangle.Fill>

                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                        <GradientStop Color="#FF96E8EF" Offset="0.285"/>

                        <GradientStop Color="#FF5B91C4" Offset="1" />

                    </LinearGradientBrush>

                </Rectangle.Fill>

                <Rectangle.Effect>

                    <DropShadowEffect ShadowDepth="0" BlurRadius="20" Color="#FF7A7A7A"/>

                </Rectangle.Effect>

            </Rectangle>

            <TextBlock x:Name="txtProcent" HorizontalAlignment="Center" Margin="0,0,25,0" Text="0%" TextWrapping="Wrap" FontSize="32" FontFamily="Trebuchet MS" TextOptions.TextHintingMode="Animated" VerticalAlignment="Center" Foreground="White"/>

            <Path Data="M1,24.666666 L1,9.9996738 C1,9.9996738 -3,-7.6666665 8.666667,-8.666667 L143.32564,-8.666667 C143.32564,-8.666667 149.65897,-8.6663418 151.65886,-0.33317503 L151.65886,26.332958 C151.65886,26.332958 24.665447,-1.3330873 0.00012701056,26.999943" Fill="White" Margin="1,1.333,1.333,13" Stretch="Fill" StrokeThickness="2" UseLayoutRounding="False" Opacity="0.2"/>

        </Grid>
</Grid>

　　

样式完成后 要在ASPX页面引用

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="silverlight.Web.Index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<link rel="icon" href="/setting.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/setting.ico" type="image/x-icon" /> 

<%--    <title>综合演练[房间001] 应急卫生演练模拟</title>--%>
    <style type="text/css">
    html, body {
	    height: 100%;
	    overflow: auto;
    }
    body {
	    padding: 0;
	    margin: 0;
    }
    #silverlightControlHost {
	    height: 100%;
	    text-align:center;
    }
    </style>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
        function onSilverlightError(sender, args) {
            var appSource = "";
            if (sender != null && sender != 0) {
                appSource = sender.getHost().Source;
            }

            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {
                return;
            }

            var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";

            errMsg += "Code: " + iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            }
            else if (errorType == "RuntimeError") {
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                errMsg += "MethodName: " + args.methodName + "     \n";
            }

            throw new Error(errMsg);
        }

        function onSourceDownloadProgressChanged(sender, eventArgs) {

            sender.findName("rectFuel").Width = eventArgs.progress * 300;
            sender.findName("txtProcent").Text = Math.round((eventArgs.progress * 100), 0).toString() + "%";

                        sender.findName("txtProcent2").Text = Math.round((eventArgs.progress * 100), 0).toString() + "%";

//            var progressTextBlock = sender.findName("ProgressTextBlock");
//            progressTextBlock.Text = (Math.round(args.progress * 100)) + "%"; 

        }
        function appDownloadComplete(sender, args) {

        }

    </script>
</head>
<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost" style="height: 100%; width:100%">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
		  <param name="source" value="ClientBin/silverlight.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="4.0.50401.0" />
		  <param name="autoUpgrade" value="true" />
                       <param name="splashScreenSource" value="load.xaml" />
        <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
        <param name="onSourceDownloadComplete" value="appDownloadComplete" />
                    <asp:Literal ID="Literal1" runat="server"></asp:Literal>
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		  </a>

	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
    </form>
</body>
</html>

　　onSourceDownloadProgressChanged事件 用于显示下载的进度  xap包下载完成会触发appDownloadComplete事件 这里值得注意的是LOADING界面中 不能放入控件 我试过 会提示错误 可能控件都要有一些事件 所以不支持吧