プログラミング学習の記録 195.2 Silverlight+JavaScriptで動く長方形(Rectangle)を描いてみる。

開発環境:
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で横長の長方形(Rectangle)から縦長の長方形に変化し、さらにその枠線が太くなるAnimationを描いてみる。

参考書籍

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



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

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