第一次在博客园写文章 俺是菜鸟 有不足之处还请大佬们多多指教 第一次也不知道该写啥 俺就拿自己最近做的一个项目 来细说吧 俺们公司是做医疗卫生方面的 其中有一块涉及到应急卫生模拟演练方面
这块分到我这里 我就用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界面中 不能放入控件 我试过 会提示错误 可能控件都要有一些事件 所以不支持吧