ASP.NET Futuresで次世代ASP.NETを体験しよう

ASP.NET Futuresのコントロール利用方法を学習する

XAMLコントロール

　XAMLコントロールは、作成されたXAMLファイルをXAMLコントロール上で参照設定を行うだけでWebページ上にホストできます（図7～8）。

図7 実行直後の画面

図8 実行中の画面（アニメーション動作中）

図9 マウスイベントを発生させた画面

　XAMLコントロールはSilverlight 1.0ではJavaScriptを、Silverlight 1.1では動的言語などを利用して、コンテンツ（XAMLファイル）に対話性を持たせることができます。ここでは、JavaScriptを利用した処理の記述について説明します。

　以下の表2にXAMLコントロールで設定できるプロパティの中で、頻繁に利用しそうな物をまとめてみました。サンプルの中ですべて活用はしていませんが、参照ください。

表2

プロパティ名	概要
EnableHtmlAccess	XAMLで定められるコードがSilverlightをホストしているDOMを含む、HTML DOMにアクセスするかどうか。既定ではTrue。
MaxFramerate	XAMLファイル内のフレームレート。既定では24。
SilverlightBackColor	SilverlightをホストしたXAMLコントロールの背景色。
XamlUrl	参照するXAMLファイルのURL。
OnClientXamlError	XAMLファイルのロード失敗時（Webページ実行時エラー）に実行したいJavaScriptファイル。
OnClientXamlLoaded	XAMLファイルがロードされる時に実行したいJavaScriptファイル。

　XAMLコントロールはMediaコントロール同様に、XamlUrlプロパティの参照だけ設定をすれば動作します。こちらもASP.NETを利用したSilverlightアプリケーションの第一歩としては最適なコントロールの1つと言えます。

　ただし、大きさなどの指定は別途行う必要があるので、XAMLファイル内で設定した以上の大きさを設定する必要があります（さもないとXAMLファイルが切れた状態で表示されてしまうので）。

　以下のサンプルはXAMLファイル（アニメーション付）を参照させて、Webページ上に表示させた物です。中心の円に対して4つのマウスイベントを与えています。まずはフォームデザイナ上のコードです。

XAML.aspxファイル（一部）

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Xaml ID="Xaml1" runat="server" XamlUrl="~/XAMLFile.xaml"
 Height="400" Width="450" SilverlightBackColor="Pink" >
    <Scripts>
        <asp:ScriptReference Path="XAMLScript.js" />
    </Scripts>
</asp:Xaml>

　次にXAMLファイルの記述ですが、XAMLファイル内のアニメーション処理に関しては、前述したようにこちらの記事で非常に丁寧に書かれているのでそちらを参照してください。少し大きめのCanvasオブジェクトの中にいくつか図形をレンダリングさせ、アニメーションを付加しています。

XAMLFile.xamlファイル

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="Transparent"
   >
  <!--アクションを起動するトリガのサポート-->
  <Canvas.Triggers>
    <!--ページが読み込まれたときにイベント起動-->
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <!--Storyboard内のアニメーションを指定された
            オブジェクトやプロパティに適用する-->
        <BeginStoryboard>
          <Storyboard>
            <!--緑色の円が上から下まで動き続ける-->
            <DoubleAnimation Storyboard.TargetName="Ellipse1"
                             Storyboard.TargetProperty="(Canvas.Top)"
                             From="0" To="300" AutoReverse="true"
                             BeginTime="0:0:0" Duration="0:0:2"
                             RepeatBehavior="Forever"/>
            <!--赤色の円が左から右へ動き続ける-->
            <DoubleAnimation Storyboard.TargetName="Ellipse2"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="0" To="300" AutoReverse="true"
                             BeginTime="0:0:0" Duration="0:0:4"
                             RepeatBehavior="Forever"/>
            <!--オレンジ色の四角形が「く」の字のように動き続ける-->
            <!--四角形が下から上に動く-->
            <DoubleAnimation Storyboard.TargetName="Rectangle2"
                             Storyboard.TargetProperty="(Canvas.Top)"
                             From="300" To="0" AutoReverse="true"
                             BeginTime="0:0:0" Duration="0:0:8"
                             RepeatBehavior="Forever"/>
            <!--四角形が下から上に動く倍の速さで右から左へと動く
            左端まで移動した時点で右側へと動く-->
            <DoubleAnimation Storyboard.TargetName="Rectangle2"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="350" To="0" AutoReverse="true"
                             BeginTime="0:0:0" Duration="0:0:4"
                             RepeatBehavior="Forever"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>

  <!--緑色の円の描画-->
  <Ellipse x:Name="Ellipse1" Opacity=".65" Fill="green"
           Height="100" Width="100" />
  <!--テキストの描画-->
  <TextBlock Text="Ellipse and RectAngle"  FontSize="30"/>
  <!--赤色の円の描画-->
  <Ellipse x:Name="Ellipse2" Opacity=".65" Fill="red"
         Height="100" Width="100" />
  <!--右下に表示される四角形の描画-->
  <Rectangle x:Name="RectAngle1" Opacity=".5" Fill="purple"
             Height="200" Width="200" Canvas.Left="250"
             Canvas.Top="200" Stroke="Red" StrokeThickness="5" />
  <!--中央に表示される円の描画で、マウスイベントに対応-->
  <Ellipse x:Name="Ellipse0" Opacity=".7"  Height="150" Width="150"
           Canvas.Left="80" Canvas.Top="100" Stroke="Black" StrokeThickness="10"
           Fill="yellow" MouseLeftButtonDown="changeEllipseSizeAndColor"
           MouseEnter="changeEllipseColor" MouseLeave="changeEllipseSize"
           MouseMove="changeEllipsePosition"/>
  <!--オレンジ色の円の描画-->
  <Rectangle x:Name="Rectangle2" Opacity=".65" Fill="orange"
           Height="100" Width="100" RadiusX="15" RadiusY="15" />
</Canvas>

　最後に中央に表示される円（Ellipse0）にMouseLeftButtonDownイベント、MouseLeaveイベント、MouseEnterイベント、MouseMoveイベントの4つのマウスイベントを付加します。XAMLファイル内でイベントが記述されているオブジェクトがsenderとして渡され（ここではEllipseオブジェクト）、findNameメソッドがオブジェクト内に記述されたx:Name（ここではEllipse0）を指定することで、オブジェクト内のプロパティ（FillプロパティやHeightプロパティなど）を編集しています。

XAMLScript.jsファイル

//MouseLeftButtonDownイベント
//円の色を紫に、高さと幅を400に変更する
function changeEllipseSizeAndColor(sender, args) {
    sender.findName("Ellipse0").Fill = "purple";
    sender.findName("Ellipse0").Height = "400";
    sender.findName("Ellipse0").Width = "400";
}

//MouseLeaveイベント
//円の高さと幅を100に変更し、円の外側のラインを黒に、太さを10にする
function changeEllipseSize(sender, args) {
    sender.findName("Ellipse0").Height="100";
    sender.findName("Ellipse0").Width="100";
    sender.findName("Ellipse0").Stroke="black";
    sender.findName("Ellipse0").StrokeThickness="10";
}

//MouseEnterイベント
//円の色を青色に変える
function changeEllipseColor(sender, args) {
    sender.findName("Ellipse0").Fill="blue";
}

//MouseMoveイベント
//円の外側のラインを赤色に、太さを5にする
function changeEllipsePosition(sender, args) {
    sender.findName("Ellipse0").Stroke="red";
    sender.findName("Ellipse0").StrokeThickness="5";
}

　以上の設定で、XAMLコントロールとJavaScriptを組み合わせたページの完成です。実行画面は図7～9のようになります。