プログラミング学習の記録 194 Silverlight+JavaScriptで動く円(楕円)を描いてみる。

開発環境:
Microsoft Windows 7 Home Premium (OS)
Internet Explorer 8 (Web browser) + Silverlight (Plug-in)
Microsoft Visual Web Developer 2010 Express Edition (IDE)

Script言語:JavaScript

Silverlight+JavaScriptで動く円(楕円)を描いてみる。

参考書籍

"JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)"



iframe1.html
function createSilverlight() { var d0 = document.getElementById("d0"); Silverlight.createObject("iframe1.xaml", d0, "Sample", { hdight: '200', width: '200', inplaceInstallPrompt: true, background: '#FFFFFF' }, { onError: d0.innerHTML = "Error", onLoad: d0.innerHTML = "Load" }, null); }

iframe1.xaml
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Canvas.Left="20" Canvas.Top="20" Width="100" Height="100" Name="ellipse" Fill="Red" Stroke="Blue" StrokeThickness="5" > <Ellipse.Triggers> <EventTrigger RoutedEvent="Canvas.Loaded"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Width" From="50" To="150" Duration="0:0:5" RepeatBehavior="Forever"/> <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Height" From="150" To="50" Duration="0:0:5" RepeatBehavior="Forever"/> <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="StrokeThickness" From="1" To="10" Duration="0:0:5" RepeatBehavior="Forever"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse> </Canvas>