第一次在博客园写文章 俺是菜鸟 有不足之处还请大佬们多多指教 第一次也不知道该写啥 俺就拿自己最近做的一个项目 来细说吧 俺们公司是做医疗卫生方面的 其中有一块涉及到应急卫生模拟演练方面
这块分到我这里 我就用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 + "
";
errMsg += "Code: " + iErrorCode + "
";
errMsg += "Category: " + errorType + "
";
errMsg += "Message: " + args.ErrorMessage + "
";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + "
";
errMsg += "Line: " + args.lineNumber + "
";
errMsg += "Position: " + args.charPosition + "
";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + "
";
errMsg += "Position: " + args.charPosition + "
";
}
errMsg += "MethodName: " + args.methodName + "
";
}
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%; 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;0px;border:0px"></iframe></div>
</form>
</body>
</html>
onSourceDownloadProgressChanged事件 用于显示下载的进度 xap包下载完成会触发appDownloadComplete事件 这里值得注意的是LOADING界面中 不能放入控件 我试过 会提示错误 可能控件都要有一些事件 所以不支持吧