mikeo_410

XAMLマークアップだけでできること

  以下の3通りのようです。

 区分

 方法

 機能

HTMLエディタ 

 XAMLスクリプト  HTML中にスクリプトとしてXAMLマークアップを書く。
 これをobjectタグでSilverlightコンポーネントに渡す。		 Silverlightの機能から、入力
関連を除いたもの		  表示されない
 XAMLファイル
(objectタグ)		  XAMLマークアップを独立したファイルを書く。
 これをobjectタグでSilverlightコンポーネントに渡す。		 Silverlightの機能から、入力
関連を除いたもの		 表示されない
 ＸＡＭＬファイル
(iframeタグ)		  XAMLマークアップを独立したファイルを書く。  フル機能(これは、Silverlightのランタイムでなく、.Net Frameworkのランタイムが使われるようだ)  表示される

１．利点と欠点

 区分

 利点

欠点

 XAMLスクリプト  描画が早い ・XAMLの記述能力が低い
・HTMLの編集時に表示されない
・XAML部分の編集が困難
 XAMLファイル
(objectタグ)		  XAMLエディタで編集し易い ・XAMLの記述能力が低い
・HTMLの編集時に表示されない
・クロスドメインの制限（HTMLと同じ場所にあることが必要）
 ＸＡＭＬファイル
(iframeタグ)		 ・XAMLの記述能力が高い
・XAMLエディタで編集し易い
・クロスドメインの問題はない
・Silverlightのインストールが必要ない		 ・遅い
・サーバーがMIMEタイプをサポートする必要がある

※サーバーのMIMEタイプ設定
  .htaccess が利用可能なら、
  Addtype application/xaml+xml .xaml

２．何ができるか

  1. Buttonやマウスのイベントを利用することができます。
  2. CheckBoxやTextBoxの入力値を他に代入することはできます。
  3. アニメーションの機構でUIエレメントのプロパティを操作します。
  4. 変数は利用できません。
  5. 演算もできません。

  このことから、double 型を操作するプログラムなら作れる可能性があります。
  経過時間を座標として表すことができそうです。

３．利用できる仕組み

  XAMLマークアップ記述では、演算をしたり変数を割り当てたりすることはできませんが、以下のようなことができます。

３．１．文字列や数式

  文字列や数式は、どの方法でも大差なく利用可能です。

  これらの数式は、このHTMLページのスクリプトとして記述してあります。ブラウザの機能でソースを表示すると見ることができます。


３．２．図形

  2Dの図形は、どの方法でも大差なく利用可能です。3Dは、IFRAMEで開く方法でしか利用できません。

  左図は、このHTMLページのスクリプトとして記述してあります。ブラウザの機能でソースを表示すると見ることができます。


３．３．図形を動かす

  アニメーションの仕組みを使います。アニメーションの記述は、もともとSilverligt と WPF で異なります。
  記述方法に差はありますが概ね同じようなことができると思います。
  時間変化を、辺の長さや角度の変化に置き換えられるものが描画可能です。

３．４．入力を利用

  IFRAMEで開く方法でのみ可能です。DataTrigger を使って、CheckBox などのチェック状態をトリガして、自身や他のUIエレメントのプロパティを取得、設定できます。
 できることは、値の取得、設定であって、演算することはできないことに注意します。

４．ポップアップで表示

  IFRAMEでXAMLを表示するのは時間がかかります。現状では、この例のように、説明文を付加して、ユーザの意思で開いてもらう方法が良いように思います。

  左図をクリックすると別窓で、Loose XAMLのサンプルをロードします。
  「Button」をクリックすると、文字列をアニメーション表示します。

http://hp.vector.co.jp/authors/VA039696/xaml/animate_text1.xaml


４．１．XAMLファイルの概要

  StackPanel に Canvas と Button が配置してあります。
  Canvas に ellipse と 2つのTextBlock を描画します。

  1. <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  2.   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3.   Title="Loose XAML example">
  4.     <StackPanel>
  5.         <Canvas Width="200" Height="200" Background="Gainsboro">
  6.             <Ellipse Canvas.Left="20" Canvas.Top="100" Width="80" Height="80" Fill="Tomato"/> 
  7.             <TextBlock Name="tb1" Canvas.Left="30" Canvas.Top="30" Foreground="DarkSlateGray" />
  8.             <TextBlock Name="tb2" Canvas.Left="170" Canvas.Top="40" Foreground="Firebrick"
  9.                        Text="{Binding ElementName=tb1, Path=Text}">
  10.                 <TextBlock.RenderTransform>
  11.                     <RotateTransform Angle="90"/>
  12.                 </TextBlock.RenderTransform>
  13.             </TextBlock>
  14.         </Canvas>
  15.         <Button Name="button1" Content="Button" />
  16.         <StackPanel.Triggers>
  17.             <EventTrigger RoutedEvent="Button.Click" SourceName="button1">
  18.                 <BeginStoryboard>
  19.                       ：
  20.                 </BeginStoryboard>
  21.             </EventTrigger>
  22.         </StackPanel.Triggers>
  23.     </StackPanel>    
  24. </Page>

４．２．ButtonのClickイベントの検出

  Button には button1 と名前が付けてあります。
  <StackPanel.Triggers> で、button1 の Click イベントの処理を書きます。

４．３．Click イベントの処理

  Storyboard として、イベントの処理を記述します。

  1. <Storyboard>
  2.     <StringAnimationUsingKeyFrames 
  3.             Storyboard.TargetName="tb1"
  4.             Storyboard.TargetProperty="(TextBlock.Text)"
  5.             Duration="0:0:8" FillBehavior="HoldEnd">
  6.         <DiscreteStringKeyFrame Value="" KeyTime="0:0:0" />
  7.         <DiscreteStringKeyFrame Value="m" KeyTime="0:0:1" />
  8.         <DiscreteStringKeyFrame Value="mi" KeyTime="0:0:1.5" />
  9.         <DiscreteStringKeyFrame Value="mik" KeyTime="0:0:2" />
  10.         <DiscreteStringKeyFrame Value="mike" KeyTime="0:0:2.5" />
  11.         <DiscreteStringKeyFrame Value="mikeo" KeyTime="0:0:3" />
  12.         <DiscreteStringKeyFrame Value="mikeo_" KeyTime="0:0:3.5" />
  13.         <DiscreteStringKeyFrame Value="mikeo_4" KeyTime="0:0:4" />
  14.         <DiscreteStringKeyFrame Value="mikeo_41" KeyTime="0:0:4.5" />
  15.         <DiscreteStringKeyFrame Value="mikeo_410" KeyTime="0:0:5" />
  16.         <DiscreteStringKeyFrame Value="mikeo_410 " KeyTime="0:0:5.5" />
  17.         <DiscreteStringKeyFrame Value="mikeo_410 t" KeyTime="0:0:6" />
  18.         <DiscreteStringKeyFrame Value="mikeo_410 te" KeyTime="0:0:6.5" />
  19.         <DiscreteStringKeyFrame Value="mikeo_410 tes" KeyTime="0:0:7" />
  20.         <DiscreteStringKeyFrame Value="mikeo_410 test" KeyTime="0:0:7.5" />
  21.     </StringAnimationUsingKeyFrames>
  22. </Storyboard>

  tb1 と 名前の付いた TextBlock の Text プロパティを指定して、文字列を時間差を付けて書き込みます。
mikeo_410@hotmail.com