プログラミング学習の記録 135 JavaScriptとSilverlightで動く円と長方形を描いてみる。 | Kamimura's blog

2010年3月19日金曜日

プログラミング学習の記録 135 JavaScriptとSilverlightで動く円と長方形を描いてみる。

開発環境、Script言語:
Microsoft Visual Web Developer+Internet Explorer Silverlight,JavaScript

JavaScriptでScriptを記述して、Silverlightで円と長方形を描いてみる。

SilverlightAnimation.html

<!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>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Silverlight Sample</title>

<script type="text/javascript" src="Silverlight.js">
</script>

<script language="JavaScript" type="text/javascript">
  function createSilverlight()
    {
      Silverlight.createObject(
      "Animation.xaml",  
      parentElement,  
      "animation",       
      {
        width:'300',  
        height:'250', 
        inplaceInstallPrompt:false,  
        background:'#FFFFFF', 
        isWindowless:'false', 
        framerate:'24', 
        version:'1.0'   
      },
      {
        onError:null,   
        onLoad:null    
      },
      null);            
  }
</script>
<script language="javascript" type="text/javascript">
    function change() {
        var parentElement = document.getElementById("d0");
        d0.innerHTML = "Hello,Silverlight Animation!";
    }</script>
    <script language="javascript" type="text/javascript">
        function replace() {
            var parentElement = document.getElementById("d0");
            createSilverlight();
        }</script>
</head>
<body>
  <h1>Silverlight Animation</h1>
   <input type="button" value="Click!" onclick="change();" />
   <input type="button" value="元に戻す" onclick="replace();" />
    <br />
   <br />
  <div id="d0">
  </div>

<script language="JavaScript" type="text/javascript">
    var parentElement = document.getElementById("d0") ;
    createSilverlight();
  </script>

</body>
</html>

Animation.xaml

<?xml version="1.0" encoding="utf-8" ?>
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
      </Grid.ColumnDefinitions>
    <Ellipse Width="100" Height="10" Name="ellipse1"
        Fill="Red" Stroke="Red" Grid.Column="0" >
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="ellipse1"
                Storyboard.TargetProperty="Height"
                From="10" To="100" Duration="0:0:5"
                RepeatBehavior="Forever"
              />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>
    <Rectangle Width="100" Height="150" Name="rectangle1"
               Fill="Blue" Stroke="Black" Grid.Column="1" >
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Canvas.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="rectangle1"
                Storyboard.TargetProperty="Height"
                From="150" To="10" Duration="0:0:5"
                RepeatBehavior="Forever"
              />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </Grid>
</Canvas>

保管場所:Silverlight Animation

0 コメント:

コメントを投稿

コメントの投稿(Atom)