<Canvas x:Class="TgSilverlight.scene" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="480" d:DesignWidth="640"> <Canvas.Resources> <!--如果是动态创建故事集 该段代码可不要<Storyboard x:Name="BarRedrow"> <DoubleAnimation x:Name="BarRedrawDoubleAnimation" Storyboard.TargetName="Bar1" Storyboard.TargetProperty="Width" From="0" To="300" Duration="0:0:1" /> </Storyboard>--> </Canvas.Resources> <Canvas.Background> <LinearGradientBrush EndPoint="1.068,1.077" StartPoint="0.256,0.299"> <GradientStop Color="#ffffffff" Offset="0" /> <GradientStop Color="#fff2ff00" Offset="1" /> </LinearGradientBrush> </Canvas.Background> <Path Width="1" Height="400" Fill="#ffffffff" Stretch="Fill" Stroke="#ff000000" Canvas.Left="55" Canvas.Top="29.5" Data="M 50,50 50,400z"/> <Path Width="511" Height="1" Fill="#ffffffff" Stretch="Fill" Stroke="#ff000000" Canvas.Top="431.5" Canvas.Left="59.5" Data="M 50,400 450,400z" /> <TextBlock Width="31.334" Height="30.667" Canvas.Left="25.499" Canvas.Top="60" TextWrapping="Wrap" > <Run Text="Q1" /> </TextBlock> <TextBlock Width="31.334" Height="30.667" Canvas.Left="25.499" Canvas.Top="160" TextWrapping="Wrap" > <Run Text="Q2" /> </TextBlock> <TextBlock Width="31.334" Height="30.667" Canvas.Left="25.499" Canvas.Top="260" TextWrapping="Wrap" > <Run Text="Q3" /> </TextBlock> <TextBlock Width="31.334" Height="30.667" Canvas.Left="25.499" Canvas.Top="360" TextWrapping="Wrap" > <Run Text="Q4" /> </TextBlock> <TextBlock Width="31.334" Height="30.667" Canvas.Left="42.999" Canvas.Top="431.5" TextWrapping="Wrap" > <Run Text="0" /> </TextBlock> <TextBlock Width="31.334" Height="30.667" Canvas.Left="100" Canvas.Top="433.5" TextWrapping="Wrap" > <Run Text="100" /> </TextBlock> <TextBlock Width="31.334" Height="30.667" Canvas.Left="160" Canvas.Top="433.5" TextWrapping="Wrap" Text="200" /> <TextBlock Width="31.334" Height="30.667" Canvas.Left="220" Canvas.Top="433.5" TextWrapping="Wrap" Text="300" /> <TextBlock Width="31.334" Height="30.667" Canvas.Left="280" Canvas.Top="433.5" TextWrapping="Wrap" Text="400" /> <TextBlock Width="31.334" Height="30.667" Canvas.Left="340" Canvas.Top="433.5" TextWrapping="Wrap" Text="500" /> <TextBlock Width="31.334" Height="30.667" Canvas.Left="400" Canvas.Top="433.5" TextWrapping="Wrap" Text="600" /> <TextBlock Width="31.334" Height="30.667" Canvas.Left="460" Canvas.Top="433.5" TextWrapping="Wrap" Text="700" /> <TextBlock Width="31.334" Height="30.667" Canvas.Left="520" Canvas.Top="433.5" TextWrapping="Wrap" Text="800" /> <Rectangle x:Name="Bar1" Width="340" Height="40" Stroke="#ff979797" Canvas.Left="55.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.1,0.001"> <GradientStop Color="#fffffdfd" Offset="0" /> <GradientStop Color="#ff00ff11" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.RenderTransform> <TransformGroup> <!--缩放变形 其值表示缩放的比例--> <ScaleTransform ScaleX="-1" ScaleY="1" /> <!--产生基于 X Y的偏移三维效果--> <SkewTransform AngleX="0" AngleY="0"/> <!--旋转变形Angle表示旋转的角度--> <RotateTransform Angle="0" /> <!--平移变形--> <TranslateTransform X="0" Y="50" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="Bar2" Width="340" Height="40" Stroke="#ff979797" Canvas.Left="55.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.1,0.001"> <GradientStop Color="#fffffdfd" Offset="0" /> <GradientStop Color="#ff00ff11" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="-1" ScaleY="1" /> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0" /> <TranslateTransform X="0" Y="150" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="Bar3" Width="340" Height="40" Stroke="#ff979797" Canvas.Left="55.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.1,0.001"> <GradientStop Color="#fffffdfd" Offset="0" /> <GradientStop Color="#ff00ff11" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="-1" ScaleY="1" /> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0" /> <TranslateTransform X="0" Y="250" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> <Rectangle x:Name="Bar4" Width="340" Height="40" Stroke="#ff979797" Canvas.Left="55.5" RenderTransformOrigin="0.5,0.5"> <Rectangle.Fill> <LinearGradientBrush StartPoint="0.1,0.001"> <GradientStop Color="#fffffdfd" Offset="0" /> <GradientStop Color="#ff00ff11" Offset="1" /> </LinearGradientBrush> </Rectangle.Fill> <Rectangle.RenderTransform> <TransformGroup> <ScaleTransform ScaleX="-1" ScaleY="1" /> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0" /> <TranslateTransform X="0" Y="350" /> </TransformGroup> </Rectangle.RenderTransform> </Rectangle> </Canvas> using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Browser; using System.Windows.Markup; namespace TgSilverlight { public partial class scene : Canvas { public scene() { InitializeComponent(); //获取页面的button对象 HtmlElement button = HtmlPage.Document.GetElementById("btnShow"); //注册button的click事件 button.AttachEvent("onclick",new EventHandler<HtmlEventArgs>(button_onClick)); HtmlPage.RegisterScriptableObject("Builder",this); } public void button_onClick(object sender, HtmlEventArgs e) { HtmlElement txtYear = HtmlPage.Document.GetElementById("txtYear"); string value = txtYear.GetAttribute("value"); if (value.Equals("2006")) { ShowAnima(date2006); } else { ShowAnima(date2007); } } int[] date2006 = { 100, 200, 300, 400 }; //四个矩形宽度值 int[] date2007 = { 200, 100, 250, 200 }; [ScriptableMember] public void JsShowAnima(string a, int i) //调用后有小bug 前三个矩形宽度不能保存(待解决) { BarRedrow.Stop(); int[] val = a == "2006" ? date2006 : date2007; BarRedrawDoubleAnimation.From = 0; BarRedrawDoubleAnimation.SetValue(Storyboard.TargetNameProperty, "Bar" + i.ToString()); BarRedrawDoubleAnimation.SetValue(Storyboard.DurationProperty, new Duration(new TimeSpan(0, 0, 2))); BarRedrawDoubleAnimation.To = val[i - 1]; BarRedrow.Begin(); } public void ShowAnima(int [] val) { for (int k = 1; k <= 4; k++) { this.Resources.Remove("story" + k.ToString()); } for (int i = 1; i <= 4; i++) { Storyboard story = new Storyboard(); //创建4个Storyboard故事集用于显示4个Rectangle动画 DoubleAnimation anima = new DoubleAnimation(); anima.From = 0; anima.SetValue(Storyboard.TargetNameProperty, "Bar" + i.ToString()); anima.SetValue(Storyboard.TargetPropertyProperty, new PropertyPath("Width")); anima.SetValue(Storyboard.DurationProperty, new Duration(new TimeSpan(0, 0, i))); anima.To = val[i - 1]; story.Children.Add(anima); this.Resources.Add("story" + i.ToString(), story); story.Begin(); } } } } <%@ Page Language="C#" AutoEventWireup="true" %> <!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 runat="server"> <title>TgSilverlight</title> <mce:style type="text/css"><!-- html, body { height: 100%; overflow: auto; } body { padding: 0; margin: 0; } #silverlightControlHost { height: 100%; text-align:center; } --></mce:style><style type="text/css" mce_bogus="1"> html, body { height: 100%; overflow: auto; } body { padding: 0; margin: 0; } #silverlightControlHost { height: 100%; text-align:center; } </style> <mce:script type="text/javascript" src="Silverlight.js" mce_src="Silverlight.js"></mce:script> <mce: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 = "Silverlight 应用程序中未处理的错误 " + appSource + "/n" ; errMsg += "代码: "+ iErrorCode + " /n"; errMsg += "类别: " + errorType + " /n"; errMsg += "消息: " + args.ErrorMessage + " /n"; if (errorType == "ParserError") { errMsg += "文件: " + args.xamlFile + " /n"; errMsg += "行: " + args.lineNumber + " /n"; errMsg += "位置: " + args.charPosition + " /n"; } else if (errorType == "RuntimeError") { if (args.lineNumber != 0) { errMsg += "行: " + args.lineNumber + " /n"; errMsg += "位置: " + args.charPosition + " /n"; } errMsg += "方法名称: " + args.methodName + " /n"; } 引发新错误(errMsg); } // --></mce:script> <mce:script type="text/javascript"><!-- function ShowSilverlight() { var i = 1; var xamlObj = document.all("xamlObj"); setTimeout(function () { xamlObj.content.Builder.JsShowAnima(document.getElementById("txtYear").value, i++); }, 0); setTimeout(function () { xamlObj.content.Builder.JsShowAnima(document.getElementById("txtYear").value, i++); }, 2000); setTimeout(function () { xamlObj.content.Builder.JsShowAnima(document.getElementById("txtYear").value, i++); }, 4000); setTimeout(function () { xamlObj.content.Builder.JsShowAnima(document.getElementById("txtYear").value, i++); }, 6000); } // --></mce:script> </head> <body> <form id="form1" runat="server" style="height:100%"> <div id="silverlightControlHost" style="width:640px;height:480px;"> <object id="xamlObj" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/TgSilverlight.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50826.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" mce_href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none" mce_style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" mce_src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none" mce_style="border-style:none"/> </a> </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div> <br /> 请输入年份:<input type="text" id="txtYear" /> <input id="btnShow" type="button" value="通过Silverlight调用" style="width:140px;" /> <input οnclick="ShowSilverlight()" type="button" value="通过JS调用Silverlight函数" style="width:180px;" /> </form> </body> </html>