Silverlight

[Silverlight 奮戦記] (5) 折れ線グラフを作る

はなおかじった — Wed, 30 Jul 2008 21:05:00 GMT

前回のあらすじ。XML で記述されているファイルを取り出したらβ2が公開されて、仕様が変わっちゃってて困ったよ。

なんか、Silverlight でなくてもええやん？？って感じなんだけど、Silverlight なのっ！！

前回、XML ファイルからクラス化した情報を、グラフにする。検索すればコンポーネントが見つかるのだけど、あえてそれらは使わない。

「グラフにする」とは、どういう事か、というところを考える。

線を引けば良いわけだけど、じゃぁ、どうやって引くの？データの個数だけ、横に区切りがある。値の最大値にあわせて、縦にもいくつか区切りがある。その区切りにあわせてプロットすればよい。

いうのは簡単だぁ！

まず、横。グラフを描画する範囲。これを便宜上、「キャンバス」と呼ぶことにします。キャンバスの横幅（ピクセル数）をデータの個数で割れば、データとデータの間に何ピクセル置けばよいか、求まります。

同じく縦も、キャンバスの縦幅（ピクセル数）を、データの最大値で割れば、データ1単位あたり、何ピクセル取ればよいか求まります。

こうして求めたものを、単位ピクセル数とします。

データ配列のｎ番目に横の単位ピクセル数を掛け、値に縦の単位ピクセル数を掛けると、座標が求まります。

ところで、「値」ってどれ？

とりあえず、「累積稼働時間」としたけど、他の線を重ねたりするかもしれない。そんなわけで、インターフェイスを定義してみた。


public interface IGraphConvertible
{
    double Value {
        get;
    }
}

で、第3回では List<Log> としたのだけれど、これを、このインターフェイスのリストにしてみる。すると、「インターフェイスは実体化できません」と怒られた。そりゃそうか。で、abstruct クラスを作ってみた。


public abstract class GraphConvertibleObject : IGraphConvertible
{
    #region IGraphConvertible メンバ

    public abstract double Value {
        get;
    }

    #endregion
}

仮想クラスも実体化できないからなぁ。最初っから virtual なメソッドにすればいいんじゃね？とか思いながら動かすと、動いた。・・・ふ～ん。まぁ、いいや。

で、コレクションが変更になる。


public class GraphConvertibleCollection
    : System.Collections.Generic.List<GraphConvertibleObject>
{

}

当然、Log クラスも変更。


class Log
{
    public Log() {
        List = new GraphConvertibleCollection();
    }

    [XmlArrayItem(typeof(Warning))]
    public GraphConvertibleCollection List() {
        get;
        set;
    }
}

おっと、肝心の Warning クラスを忘れていた。


class Warning : GraphConvertibleObject
{
    [XmlAttruibute]
    public Int64 TotalRuntime() {
        get;
        set;
    }

    [XmlAttribute]
    public Int64 ErrorCode() {
        get;
        set;
    }

    [XmlText]
    public string LogMessage() {
        get;
        set;
    }

    public override double Value {
        get { return this.TotalRuntime; }
    }
}

それでは、グラフ化…というか、折れ線化するところ。


static public PointCollection NormalSeriesLine(
    GraphConvertibleCollection dataCollection, Size canvasSize, Size divideCount) {
    // 1
    PointCollection points = new PointCollection();
    // 2
    double stepX, stepY;
    if (divideCount.Width == 0) {
        stepX = canvasSize.Width / (double)dataCollection.Count;
    } else {
        stepX = canvasSize.Width / (double)divideCount.Width;
    }
    // 3
    if (divideCount.Height == 0) {
        // 4
        double maxY = 0;
        foreach (IGraphConvertible w in dataCollection) {
            if (w.Value > maxY) {
                maxY = w.Value;
            }
        }
        stepY = canvasSize.Height / (double)maxY;
    } else {
        stepY = canvasSize.Height / (double)divideCount.Height;
    }
    // 5
    points.Add(new Point(0, canvasSize.Height));
    // 6
    int cnt = 0;
    foreach (IGraphConvertible w in dataCollection) {
        long x = Convert.ToInt32(Math.Floor(++cnt * stepX));
        long y = Convert.ToInt32(Math.Floor(w.Value * stepY));
        // 7
        y = Convert.ToInt32(canvasSize.Height - y);
        // 8
        points.Add(new Point(x, y));
    }
    // 9
    return points;
}

引数は、dataCollection がデータのリスト。canvasSize は、描画範囲。divideCount は、それを縦横それぞれいくつに分割するか。複数の線を重ねるとき、あるデータ集団は10個あるけど、あるデータ集団は8個しかデータがないかもしれない。そもそも、今回もｎ回の故障履歴を元に、ｎ＋１回目の故障がどれくらいのタイミングで発生するかをグラフで見るものだから、故障回数とグラフの右端は等しいわけではない。そのため、別個に指定できるようにした。

1...PolyLine を返さずに PointCollection にしたのは、それぞれの頂点がアニメーションしたらおもしろいと思いません？後で変更できるように、とりあえず、PointCollection にしておく。

2...横軸の単位ピクセル数を求める処理。divideCount が0なら、データ数を用いることにする。

3...縦軸の単位ピクセル数を求める処理。

4...縦軸の場合、「データの数」なんてわかりやすいものはないので、全データをなめて最大値を求める。最小値は0なの。0以下になる場合は自分で考えよう。

5...これは、不要かも。(0, 0) の点を追加。

6...それぞれのデータを、座標に変換する処理。

7...普通、見慣れているグラフは上に行くほど Y の値が大きくなります。しかし、コンピュータの座標系は、左上が (0, 0) です。そのため、Y = 0 の線を軸に、反転させてやる必要があります。その処理。Matrix とかいうのがあって、それを指定すると一点一点反転させなくてもいいのだけれど、字を描いたとき、字まで反転しちゃうので、却下。

8...PointCollection に追加して。

9...返しておしまい。

おまけ

多角形をアニメーションさせる方法。元ネタ→Animating A Polygon?（英語）

PolyLine じゃ無理のようで、パスになりました。パスについては、[Silverlight 奮戦記] (2) 線を描くの回をご覧ください。


{
    Storyboard lineStory = new Storyboard();
    foreach (LineSegment line in figure.Segments) {
    PointAnimation anime = CreatePointAnimation(new Point(line.Point.X, canvas1.ActualHeight), line.Point);
        lineStory.Children.Add(anime);
        Storyboard.SetTarget(anime, line);
        Storyboard.SetTargetProperty(anime, new PropertyPath("Point"));
    }
    LayoutRoot.Resources.Add("lineStory", lineStory);
    lineStory.Begin();
}
private PointAnimation CreatePointAnimation(Point from, Point to) {
    PointAnimation anime = new PointAnimation();
    anime.AutoReverse = false;
    anime.BeginTime = new TimeSpan(1);
    anime.From = from;
    anime.To = to;
    anime.RepeatBehavior = new RepeatBehavior(1.0);
    anime.Duration = new Duration(TimeSpan.FromSeconds(3.0));
    return anime;
}

[Silverlight 奮戦記] (3,4) ファイルを読む β2 対応版

はなおかじった — Thu, 12 Jun 2008 21:39:00 GMT

Silverlight 2 β2 で、WebHttpRequest や WebClient が、本当に非同期通信になりました。

うん。なんかね、「非同期通信にしか対応していないよ」と書いてあったのに、Silverlight 上ではスレッドが1つしかなかったのね。それが、UI Thread と、Communication Thread に分かれたの。

はい、何が起こるかわかるよね。Communication Thread で UI Elements を操作しようとすると、例外が発生しますorz...

それと、Uri 型だった WebClient.BaseAddress が、ただの文字列になりましたorz...

そんなわけで、第3回と、第4回のコードを書き直し。

まず、SyncronizationContect を用意します。その名の通り、同期するためのコンテキストです。こいつに、UI Thread を参照させます。そして、通信を受け取った後、UI Thread で通信の内容を転写します。

元ネタは、開発者さんのブログ。

では、書き直したコード。


// 同期コンテキスト
SynchronizationContext syncContext;

public Page() {
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(Page_Loaded);
}

void Page_Loaded(object sender, RoutedEventArgs e) {
    // 現在のコンテキストを参照させておく
    syncContext = SynchronizationContext.Current;
    WebClient client = new WebClient();
    // ただの文字列なので、Uri に変換
    Uri assmblUri = new Uri(client.BaseAddress);
    // β1ではパスだったのに、.xap に変わっているので、パスに変換
    string path = System.IO.Path.GetDirectoryName(assmblUri.LocalPath).Replace('\\', '/');
    // スキーマやホストをつなげて URI にできる文字列にする
    string uri = String.Format("{0}://{1}{2}/warnigLog.xml"
        , assmblUri.Scheme, assmblUri.Host, path, assmblUri.AbsolutePath);
    textBox1.Text = uri;
    Uri logUri = new Uri(uri);
    HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(logUri);
    request.BeginGetResponse(new AsyncCallback(GetWarningLog), request);
}

private void GetWarningLog(IAsyncResult result) {
    HttpWebRequest request = (HttpWebRequest)result.AsyncState;
    HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result);
    // 同期コンテキストから呼び出す
    syncContext.Post(SynchronizedResponse, response);
}

private void SynchronizedResponse(object state) {
    HttpWebResponse response = state as HttpWebResponse;
    Stream stream = response.GetResponseStream();
    try {
        XmlSerializer serializer = new XmlSerializer(typeof(WarningLog));
        log = (WarningLog)serializer.Deserialize(stream);

        textBox1.Text += ":resieved\n";
        foreach (Warning w in log.WarningList) {
            textBox1.Text += (w.ToString() + "\n");
        }
    } catch (Exception ex) {
        textBox1.Text = ex.ToString();
    }
}

Silverlight 2 Beta 2

はなおかじった — Tue, 10 Jun 2008 21:19:00 GMT

Silverlight 2 Beta 2 SDK が公開されています。→Silverlight 2 SDKのBeta2が公開されています。（ひろえむの日々是勉強）

インストールするときは、アドオンや SDK の Beta1 をアンインストールしてから、インストーラを起動します。

これだけなら、ひろえむさんがリンクしてくださっているのでブログを書いたりしません。SDK Beta 2 では、ドキュメントが日本語化されています！beta 1 相当だけど。

Visual Studio ヘルプへのインテグレートの仕方は、こちら！。

あ...ば、ば、ば、ばっかヤローーー！！Beta 2 に Beta 1 のドキュメントつけてどーする！！

追加になったクラスのドキュメントが、全く見あたりません。

一部のクラスに、メンバの型が変更になっているものがあります。ドキュメントは、古い型のままです。

日本語化の努力は買う。賞賛する。でもね、それでもね。。。これは、ちょっと、どうよ？？

[Silverlight 奮戦記] (4) XML シリアル化とシリアル化解除

はなおかじった — Fri, 06 Jun 2008 23:37:00 GMT

前回のあらすじ。HTTP ベースサービスを利用して、XML ファイルを持ってくる、と決めた。

今回の目標。読み込む対象を決定する。

どんなデータが必要か、or あればよいかを考える。

まず、故障回数。まぁ、ログの件数を数えれば件数はできるから、いっか。累積稼働時間。これは必要。エラーコード。まぁ、必要。エラー内容を分類するかもしれないし。それと、メッセージ内容。要らないかもしれないけど、ログだし。

とりあえず、そんなところで。XML だし、後から追加できるから。

ということで、ログ1件のクラスは、こんな感じ。


class Warning
{
    [XmlAttruibute]
    public Int64 TotalRuntime() {
        get;
        set;
    }

    [XmlAttribute]
    public Int64 ErrorCode() {
        get;
        set;
    }

    [XmlText]
    public string LogMessage() {
        get;
        set;
    }
}

<Warning TotalRuntime="Int64" ErrorCode="Int64">LogMessage</Warning>

そして、ログファイルは、この1件のログがたくさん集まっているわけだから、XML が、こんな感じ。

<?xml version="1.0" encoding="utf-8" ?>
<Log>
    <List>
        <Warning TotalRuntime="Int64" ErrorCode="Int64">LogMessage</Warning>
    </List>
</Log>

このファイルのためのクラスは、次のようになる。


class LogList : List<Log>
{
    // シリアル化のために必要
    // 空クラス
}

class Log
{
    public Log() {
        List = new LogList();
    }

    [XmlArrayItem(typeof(Warning))]
    public LogList List() {
        get;
        set;
    }
}

あ、あっさりできた...

ここの注意点は、「[Xmlほにゃらら]」という、属性ですかね。XML の、要素なのか、属性なのか、内容なのか。それから、どんな型の配列なのか。その辺がきっちり押さえてあれば、よろしいかと。

それと、クラスに「[Serialize]」属性をつけなくて良いみたい。1.x の頃は必要だったけど、2.0 以降のどこかで不要になった？それとも、Silverlight では不要？

あれ？そうすると、LogList クラスも要らないかな？2.0 では、ジェネリックをシリアル化できなかったのだけど。。。

クラスの設計ができたので、それに沿った XML ファイルを作る。そして、配置する。作るのが面倒なときは、このクラスに適当なデータを放り込んで、シリアル化して作る。先にシリアル化しておくと、本当に望むとおりになっているか、確認もできる。

次、GetWarningLog メソッドの実装。

サンプルコードに、ストリームを取り出すところまで載っている。なので、真似すればいい。最後に、出力のところだけ、こっちに都合が良いように変えればいい、と。


#using System.Net;
#using System.IO;
#using System.Xml.Serialization;

private void GetWarningLog(IAsyncResult result) {
    HttpWebRequest request = (HttpWebRequest)result.AsyncState;
    HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(result);
    Stream stream = response.GetResponseStream();
    try {
        XmlSerializer serializer = new XmlSerializer(typeof(WarningLog));
        WarningLog log = (WarningLog)serializer.Deserialize(stream);
        textBox1.Text += ":resieved\n";
        foreach (Warning w in log.WarningList) {
            textBox1.Text += (w.ToString() + "\n");
        }
    } catch (Exception ex) {
        textBox1.Text = ex.ToString();
    }
}

実行してみる。ロードが終わって、ワンテンポ遅れて、テキストボックスに XML ファイルの内容らしきもの（ToString メソッドの実装に依存）が表示されれば OK。例外が発生した場合は、例外の内容がテキストボックスに書かれる。

ん～？Silverlight っちゅう感じがしないのはなぜ？

Silverlight ってば

はなおかじった — Fri, 06 Jun 2008 23:35:00 GMT

サーバに、xap ファイルへの関連づけがいるらしい。→第5回　Silverlight 2でHello world（gihyo.jp）

というわけで、管理人さん、よろしくお願いしま～す→真っ白なワケ

zip ファイルも置きました。Silverlight 2 がインストールされていれば、ローカルでも表示できます。

[Silverlight 奮戦記] (3) ファイルを読む

はなおかじった — Fri, 30 May 2008 23:31:00 GMT

前回のあらすじ。線を引くことができるようになった。アニメーションのさせ方も、何となくわかった。

今回の目標。ファイルからデータを読み込む。

さて、ファイル。ウェブを使うアプリケーションで、開発者が必ず意識しないといけないこと。「このコードは、クライアントとサーバ、どちらで動いているの？」これを意識しないと、「＊＊の設定がとれない」とか、「＊＊の設定を変えられない」とか、泣くことになる。

じゃぁ、Silverlight アプリケーションは、どこで動いているのか。

Visual Studio が作ったプロジェクトのディレクトリを見ると、「ClientBin」というディレクトリがある。ここに、プロジェクト名と同じ名前の DLL がある。また、TestPage.html というファイルがあり（どうしたマイクロソフト？拡張子が .html じゃないか！！)、デバッガはこいつを表示しているようだ。

この、TestPage.html をのぞいてみる。「SilverlightControlHost」という div 要素の中に、パラメータでプロジェクト名の DLL をソースとして指定している object 要素がある。プロジェクトを、「テスト用 HTML ファイルを作る」で作ると、.xap ファイルの他に .dll もできる。「Web サイト」で作ると、.xap だけが、テスト用サイトにコピーされる。.zap ファイルは、拡張子が .zap な ZIP ファイル。拡張子を変更して解凍してみるとよい。これが、Silverlight アプリケーションの実体だろう。IE にホストさせる Windows Forms のような形で動いているわけですね。どういう事？こういう事→Code Access Security and Distribution Features in .NET Enhance Client-Side Apps 日本語は、こちら→msdn magazine July 2002 No.28こいつを探すために、Insider.NET 会議室に 2002/8/8 に投稿した質問を引っ張り出してきたよ。

ということで、これで Silverlight アプリケーションとして書いている C# や VB のコードは、DLL などをまとめた XAP ファイルという形でクライアントに送られ、ブラウザ（あるいは、ブラウザのプラグイン）がホストになって実行している、ということがわかりました。.xap ファイルを、おそらくブラウザプラグインとして実装された Silverlight ランタイムが受け取り、DLL になっているアセンブリを実行している...と、想像します。←なんか、「想像します」とか「思います」とかって、ちゃんとつけているのに「誰それが言っていることだから、そうだ」と決めつける人がいるみたいです。

ということは、前回のようにトライアンドエラーでやるのは、ちょっときつそうです。観念して、英文を読むことにしますorz

目次では、[Microsoft Silverlight 2 SDK → Silverlight 2 Beta 1 - Development with the .NET Framework → Accessing Web Services in Silverlight] の下です。

おっとその前に、どんなアクセスをするのか、決めなくちゃ。

とりあえず簡単に、Silverlight アプリケーションを実行しているのと同じディレクトリ（サイト）にあるテキストファイルを読み込めればいい、とします。XML Web Service にアクセスするのが、Silverlight 側は簡単なのでしょうが、サーバ側にそういう実装ができるかどうかはまた別の問題なので。

で、ドキュメント。ざっとタイトルを眺めて、これかな？「Accessing HTTP-Based Services Directly」（HTTP ベースのサービスに直接アクセスする)。この下に、「Working with XML Data in Silverlight」（Silverlight で XML データを扱う）とあるので、これ。

ざっと読むと、HTTP リクエストによる、人が理解しやすい形のメタデータを扱う、らしい。で、「How To: Make Requests to HTTP-Based Services」（HTTP ベースのサービスへのリクエストを作成する方法）を読んで、「Working with XML Data in Silverlight」を読めば、何とかなりそう。なので、読む。

読んだ。翻訳しておいた。

XML データを読む方法は3通りある（XQuery, XLINQ, シリアル化解除）が、ここではあまり工数をかけたくないので、知っている方法である、シリアル化解除を利用することにする。時間がかけられるなら、XLINQ がおもしろそう。

まず、URI を作成する。これは、Silverlight アプリケーションが置いてあるドメインか、サイトがとれれば良いんだけど...ってことで、またドキュメントにあたる。System.Net.WebClient.BaseAddress という、プロパティがある。たぶんこれ。だと思うけど、説明がなんもないよ？！こういうときは、やってみるしかない。

まず、IIS をインストールする。そして、Silverlight アプリケーションの ClientBin ディレクトリを、適当な名前で仮想ディレクトリとして登録する。http://localhost/silvertest/testpage.html につながるかどうか、テスト。………よし、OK!

前回、Page コンストラクタに追加したコードを、別の適当な名前のメソッドに追い出す。そして、今回のテスト用に、コードを追加する。

まず、XAML に、TextBlock を追加しておく。コードからアクセスするので、x:Name も、追加しておく。ここでは、"baseUri" にしておく。XAML を保存すると、裏で .g.cs ファイルが更新される。そうしないと、.cs ファイルでオブジェクトにアクセスできないので注意。


public Page() {
    InitializeComponent();
    baseUri.Text = new System.Net.WebClient().BaseAddress.AbsoluteUri;
}

すると、「http://localhost/silvertest/」と表示された。これで、出所がとれる。

本当に良いのかなぁ？なんか違うような気がするなぁ？でも、実行したら期待通りのものが出たから、よしとする。

これを元に、Uri を、次のように作る。


public Page() {
    InitializeComponent();
    System.Net.WebClient client = new System.Net.WebClient();
    string uri = String.Format("{0}warnigLog.xml", client.BaseAddress.AbsoluteUri);
}

次に、HttpWebRequest を作るわけですが、System.Net の下にそれがない。よくよく読んでいくと、アセンブリを参照しろ、と書いてあるorz というわけで、System.Net.dll と、System.Xml.Serialization.dll を、参照に追加する。

で、リクエストを作る。


using System.Net;
using System.Xml.Serialization;

public Page() {
    InitializeComponent();
    WebClient client = new WebClient();
    string uri = String.Format("{0}warnigLog.xml", client.BaseAddress.AbsoluteUri);
    textBox1.Text = uri; // TextArea だと、クリップするので、TextBox に変えた
    Uri logUri = new Uri(uri);
    HttpWebRequest request = (HttpWebRequest)HttpWebRequest.Create(logUri);
    request.BeginGetResponse(new AsyncCallback(GetWarningLog), request);
}
private void GetWarningLog(IAsyncResult result) {
    // とりあえず用意
}

ここ、GetWarningLog メソッドの中で、HttpResponse にあるデータを復元するわけです。が、データをまだ作ってないです。

というわけで、次回に続く。。。

Tips 的なことを一つ。

Silverlight アプリケーションのデバッグについてです。

「デバッグ実行」で、一応いけますが、いちいち IE が起動するのが面倒だ、という方向け。IE を起動して、IIS 経由なり仮想サーバ経由で .html ファイルを表示しておきます。

デバッグの時は、VS2008 のメインメニューより、[デバッグ → プロセスにアタッチ] を選びます。

選択可能なプロセスの中に、iexplorer.exe が、2つあります。このうち、「型」のところに、「スクリプト, マネージ, x86」と書かれているものに、アタッチします。

その前に、[アタッチ先] の右にある [選択] ボタンをクリックして、[Silverlight] のチェックボックスに、チェックをしておきます。←これ、重要。[デバッグするコードの種類を自動的に判断する] だと、Silverlight アプリケーションがその他のアタッチ可能なものと互換性がないらしく、デバッグできません。

[Silverlight 奮戦記] (2) 線を描く

はなおかじった — Thu, 22 May 2008 21:11:00 GMT

前回のあらすじ。開発環境が整った。今回は、グラフを描くための準備、どのようにしたらグラフがかけるのかを知ることが目標。

まず、遊んでみる。Silverlight プロジェクトを作る。Web サイトにするか、Web プロジェクトにするか、HTML を作るか、聞いてくる。ん？？？とりあえず配置の予定はないし、表示が確認できればよいので、HTML にする。

Page.xaml というファイルが、デザイン状態で表示される。ツールボックスを見ると、コントロールが並んでいる。グラフを作るので、ラインがあるかな・・・あった。これを、ドラッグ・・・できないorz

ん～？どうも、ビジュアルデザイナには、ドラッグできないもよう。XAML エディタの方にはドラッグできる。なので、XAML へドロップしてみる。XAML は変わったけど、デザイナの方には何も表示されないorz

とりあえず、<Line にカーソルを持って行き、スペースキーを押してみる。インテリセンスが表示される。一通り眺めると、「X1」とか「X2」とかいうプロパティ(属性)があることがわかる。これだろう。X1,Y1 を、10,10、X2,Y2 を、100,100 にしてみる。で、出ない・・・。

さらに眺める。Stroke ってなんだ？StrokeLineJoin とか、StrokeDashArray というのがある。Join は線の終端の形状、DashArray は破線を描くときの線と破れ目の形状を指定するものだろう。これかもしれない。入力してみる。値の入力候補に、色の名前が出てくる。当たり！Black を選択。やっと線が引けた。

グラフを描くときには、コード上で線を追加することになるが、そのときに設定しなければならない属性が、これでわかった。X1, Y1, X2, Y2, Stroke は、最低限設定しなければならない。デザイナに追加したコントロールをコードで操作するには x:Name を指定する必要があるが、コードからは変更できない（ReadOnly）のようだ。オブジェクトそのものを指定すればいいから、要らないのかな？

では、コードで追加できるか、やってみる。Page.xaml.cs を開く。コンストラクタに、コードを追加する。

// コンストラクタへ追加
public Page() {
    InitializeComponent();
    System.Windows.Media.Line l = new Line();
    l.X1 = 100;
    l.Y1 = 10;
    l.X2 = 10;
    l.Y2 = 100;
    l.Stroke = ...
}

はて、困った。Stroke に設定する、色はどうやって指定するの？インテリセンスによると、ここは Brush を設定するらしい。ということは、規定の Brush が、Brushes に用意されているはずだ！！（WindowsForms での経験より）………Brushes がない？？？

困った。困ったときは [F1]！！カーソルを、l.Stroke の、Stroke に置いて、押してみる。System.Windows.Shapes から出てくる。え～っと。これって、WPF？仕方がないので、目次より、[Microsoft Silverlight 2 SDK → Silverlight 2 Beta 1 - Development with the .NET Framework → Silverlight Reference → System.Windows.Media Namespace] を参照する。ここから、Brush へジャンプ。

For XAML syntaxes that take a Brush, you need to specify one of the following:

A Color, specified as a string to directly fill a Brush-type property in XAML attribute form. That string is implied to create a SolidColorBrush to fill the value, and the Color you specify becomes the Color property value.

A nonabstract derived type of Brush as an object element, with the Brush-type property in question being specified in property element form. For details, see the XAML syntax on the reference pages for SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush, and VideoBrush.

For more information and examples of the XAML syntax and illustrations of the types of brushes, see Brushes (Silverlight 2).

ん～～～。今のところ、SolidColorBrush でいいみたい。こいつのオブジェクトを作ればいい、と。で、SolidcolorBrush へジャンプ。コンストラクタを見ると、Color を指定する...はいはい。

やっぱり、また、眺める。なんだ、Colors なんてのがあるやん。これ。

// コンストラクタへ追加
public Page() {
    InitializeComponent();
    System.Windows.Media.Line l = new Line();
    l.X1 = 100;
    l.Y1 = 10;
    l.X2 = 10;
    l.Y2 = 100;
    l.Stroke = new SolidColorBrush(Colors.Black);
}

これで実行！！でない...

そういえば、WindowsFoms ではコンテナに追加してやらないとダメだったな。Silverlight の場合、コンテナって、どれだ？ってことで、XAML を見る。LayoutRoot なんて名前のコントロールがある。こいつに違いない。ってことでメンバ一覧見ると、案の定、Children なんてのがある。こいつに追加する。

// コンストラクタへ追加
public Page() {
    InitializeComponent();
    System.Windows.Media.Line l = new Line();
    l.X1 = 100;
    l.Y1 = 10;
    l.X2 = 10;
    l.Y2 = 100;
    l.Stroke = new SolidColorBrush(Colors.Black);
    this.LayoutRoot.Children.Add(l);
}

これで実行！！よし、表示された。

さて、他のもついでに見ておく。・・・PolyLineSegment クラスなんてのがある。PointCollection を受け取って、それぞれの Point 間をつなぐ線を引く、と。折れ線部分はこれが使えそう。早速試す。

試す前に、今度は説明を読む。StartPoint を設定して、そこから PointCollection の最初の要素へ線が引かれるらしい。というより、PathFigure クラスに設定するもの、だな、これは。ってことで、PathFigure をみる。Properties に、StartPoint と、Segments がある。Segments に、PolyLineSegment などのオブジェクトを放り込んで使うものだな、きっと。

では、早速やってみる。


public Page() {
    InitializeComponent();
    Line l = new Line();
    l.X1 = 100;
    l.X2 = 10;
    l.Y1 = 10;
    l.Y2 = 100;
    l.Stroke = new SolidColorBrush(Colors.Black);
    LayoutRoot.Children.Add(l);

    PathFigure pf = new PathFigure();
    PolyLineSegment poly = new PolyLineSegment();
    poly.Points.Add(new Point(10, 10));
    poly.Points.Add(new Point(100, 10));
    poly.Points.Add(new Point(100, 100));
    poly.Points.Add(new Point(10, 100));
    pf.StartPoint = new Point(10, 100);
    pf.Segments.Add(poly);
    LayoutRoot.Children.Add(pf);
}

PathFigure を、UIElement に変換できません、だそうです。。。そ、そういうところまで、見てなかったねぇ。

改めて、PathFigure Class の、例示されているコードを見る。XAML なのね。Canvas の中に Path があって、その Data プロパティに PathGeometry があって、それの Figures が、PathFigure になっている。ということは、PathFigure をさらに Path に入れればいい？

早速修正してみる。


public Page() {
    InitializeComponent();
    Line l = new Line();
    l.X1 = 100;
    l.X2 = 10;
    l.Y1 = 10;
    l.Y2 = 100;
    l.Stroke = new SolidColorBrush(Colors.Black);
    LayoutRoot.Children.Add(l);

    PolyLineSegment poly = new PolyLineSegment();
    poly.Points.Add(new Point(10, 10));
    poly.Points.Add(new Point(100, 10));
    poly.Points.Add(new Point(100, 100));
    poly.Points.Add(new Point(10, 100));
    PathFigure pf = new PathFigure();
    pf.StartPoint = new Point(10, 100);
    pf.Segments.Add(poly);
    PathGeometry pg = new PathGeometry();
    pg.Figures.Add(pf);
    Path p = new Path();
    p.Stroke = new SolidColorBrush(Colors.Blue);
    p.Data = pg;
    LayoutRoot.Children.Add(p);
}

実行してみる。何も表示されない...orz

なぜ？なぜ？なぜ？とりあえず、どこまで実行されているのかわからないので、今追加した、PolyLineSegment 以降の行をコメントアウトする。そして、1行ずつコメントを外しながら、実行する。

すると、pf.Segment.Add(poly); の行のコメントアウトを外すと、何も出なくなる事がわかった。もしかすると、例外が発生している？

ここの説明を見ていて、「gets or sets...」と書かれていることが気になったのよ。WindowsForm では、こういうコレクションクラスを扱うプロパティは、get しかできない。なのに、どうして set もできるの？もしかして、コンストラクタでは自動で作らない？

ってことで、コードを修正する。きっと PathGeometry の Figures も同じに違いない。


public Page() {
    InitializeComponent();
    Line l = new Line();
    l.X1 = 100;
    l.X2 = 10;
    l.Y1 = 10;
    l.Y2 = 100;
    l.Stroke = new SolidColorBrush(Colors.Black);
    LayoutRoot.Children.Add(l);

    PolyLineSegment poly = new PolyLineSegment();
    poly.Points.Add(new Point(10, 10));
    poly.Points.Add(new Point(100, 10));
    poly.Points.Add(new Point(100, 100));
    poly.Points.Add(new Point(10, 100));
    PathFigure pf = new PathFigure();
    pf.StartPoint = new Point(10, 100);
    pf.Segments = new PathSegmentCollection();
    pf.Segments.Add(poly);
    PathGeometry pg = new PathGeometry();
    pg.Figures = new PathFigureCollection();
    pg.Figures.Add(pf);
    Path p = new Path();
    p.Stroke = new SolidColorBrush(Colors.Blue);
    p.Data = pg;
    LayoutRoot.Children.Add(p);
}

実行する。青い四角の中に黒いバッテンになった。

さて、マウスポインタが乗ったときに色が変わると、いいことがあるかもしれない。ということで、それも考えておく。

たぶん、アニメーションの一種だろう。当然、[Silverlight 2 Beta 1 - Development with the .NET Framework] の下にあるはずだ。きっと、[Core Presentation Framework / UI] にあるに違いない。ほら、あった [Animation] が。で、見てみる。[Animation Overview] を、ざっと読む。フェードイン、フェードアウトの例がある。で、DoubleAnimation を作って、Storyboard を作るらしい。

では、DoubleAnimation を見てみる。これは、double 型のプロパティを変化させるためのものらしい。今回は、Color を変えたいので、階層の上、Timeline に戻ってみる。すると、ColorAnimation があるのがわかる。これを見る。

要は、From と To を指定して、Duration に何秒かけてアニメーションするか、を指定すればいいらしい。そして、Storyboard に組み込む、と。マウスを当てると瞬時に赤になり、離すと1秒かけて青に戻る、とする。


Storyboard colorChangeStory;

public Page() {
    ...略
    ColorAnimation colorAnime = new ColorAnimation();
    colorAnime.AutoReverse = false;
    colorAnime.Duration = new Duration(new TimeSpan(0, 0, 1));
    colorAnime.From = Colors.Red;
    colorAnime.To = Colors.Blue;
    colorChangeStory = new Storyboard();
    colorChangeStory.Children.Add(colorAnime);

    Storyboard.SetTarget(colorChangeStory, p);
    Storyboard.SetTargetProperty(colorChangeStory, "Color");

    p.MouseEnter += new MouseEventHandler(PathMouseEnter);
    p.MouseLeave += new MouseEventHandler(PathMouseLeave);

    LayoutRoot.Children.Add(p);
}
void PathMouseEnter(object sender, MouseEventArgs e) {
    Path p = sender as Path;
    if (p == null) { return; }
    p.Stroke = new SolidColorBrush(Colors.Red);
}
void PathMouseLeave(object sender, MouseEventArgs e) {
    colorChangeStory.Begin();
}

こんな感じかな。実行してみる。・・・何も起こらない。なんで？

例示されているコードを見ると、Storyboard をリソースに登録しなければいけないらしい。では、追加する。


public Page() {
    ...略
    LayoutRoot.Resources.Add(colorChangeStory);
    LayoutRoot.Children.Add(p);
}

これでどうだ？消えた...

ストーリーボードを実行するときに、例外が発生しているらしい。たぶん、Color のプロパティ指定が間違っているんだろうな。ColorAnimate のサンプルを見ると、"(Panel.BackgroundColor).(SolidColorBrush.Color)"となっている。ん～？じゃぁ、「Stroke に設定する SolidColorBrush の Color プロパティ」の様な設定になるわけ？試す。


public Page() {
    ...略
    Storyboard.SetTarget(colorChangeStory, p);
    Storyboard.SetTargetProperty(colorChangeStory, "(Stroke).(SolidColorBrush.Color)");
    略...
}

これでどうだ！！・・・うまくいった。ふぅ。。。

今日のおさらい。

マニュアルは、注意深く読むこと。
コレクションクラスのプロパティは、インスタンス化してやらないといけない場合がある。
描き始めは、StartPoint で指定する。
オブジェクトの階層が深くて大変。。。
この連載では、XAML を扱うことはなさそう。

解決させていない疑問点。

複数の動きをさせるには？たとえば、「色を変えながら、幅も変える」など。
Storyboard とオブジェクトは、1:1 で結びつくようだ。では、1つの動きを複数のオブジェクトで共有することはできない？たとえば、折れ線が2つ、3つになったとき、すべての折れ線に「ポイントされたら赤い色に変える。ポイントが外れたら元の色に戻す。」といった動きをさせたい。To のみ指定すれば、「赤い色に変える」は共有できる。

Silverlight のネットワーク関係メモ

はなおかじった — Thu, 22 May 2008 21:09:00 GMT

MVP サミットでツーショットを撮られた相手のブログを発見。つうか、SnippetManager の作者その人だった(笑) そこに、Silverlight のネットワーク関係の記事が出ている。Cross domain 系の脆弱性対策につながる記事だと思うので、翻訳してここに載せていいか、問い合わせ中。とりあえず、記事へのリンク。

また、やはり Silverlight 開発者の Kathy さんのブログはこちら。「More to Silverlight 2 Beta 1 Controls than *just* controls!」に、Silverlight2 で予定されているコントロールの一覧が張られているページへのリンクがあります。

[Silverlight]Silverlight 奮戦記(1)

はなおかじった — Mon, 19 May 2008 22:18:00 GMT

先行調査ということで、Silverlight をさわることになった。目的のものができあがるのか、その過程をメモ(._.)φ

お題。「故障の予測グラフを書く」。

機械の摩耗などに起因する機械的なトラブルは、定期的に発生する傾向にあります。そこで、これまでのトラブル発生状況から、次にトラブルが発生するであろう時期を予測します。

具体的には、グラフを描きます。縦軸を累積稼働日数とします。横軸を累積トラブル回数とします。すると、右上に向かってグラフを描くことになります。

ここで考察する必要があるのが、グラフがどのような線になるのか、ということです。機械には取り替えられる部品と、取り替えられない部品があります。トラブルの原因が取り替えられる部品のみに起因するのであれば、y = ax + b の様な、直線状のグラフになります。しかし、取り替えられない部品もあります。

たとえば、自動車のエンジンオイルに喩えてみます。オイルは「取り替えられる部品」です。しかし、エンジンは「取り替えられない部品」です。オイルを取り替えれば、潤滑性という問題はある程度クリアします。しかし、オイルを取り替えただけではエンジン内のガソリン滓などを取り除くことはできません。このため、エンジンの累積稼働時間が長くなるほど、エンジントラブルが発生する頻度は高くなります。

つまり、x が大きくなるにしたがって、y = ax + b の式よりも短い間隔でトラブルが発生すると考えられます。

では、実際にどのような式になるのか？これは、一つ一つの事例によって異なるでしょう。いくつかのサンプルを集め、実際にどのような傾向があるか見極める必要があるでしょう。

そんな面倒なことを考える事は個々の事例に任せるとして、ここでは y = ax + b とします。

では、どのように式を求めるのか。最小二乗法を用います。実際に発生したトラブルの、累積発生回数に対する累積稼働期間を元に、y = ax + b の式に近似すると仮定し、a および b を求めます。そして、x を現在のトラブル発生数+1 として、y を求めます。したがってこの方法では、少なくとも2回、実際にトラブルが発生していないと、予測をすることができません。

と、方針を決めたところで、開発環境を作成します。

とりあえず私は、Visual Studio 2008 Professional Edition を用意しました。Standard Edition 以上が必要になります。無償提供されている Express Edition では、次の Silverlight Tools がインストールできません。

次に、Silverlight Tools をインストールします。マイクロソフトのダウンロードセンターから、入手できます。→Visual Studio 2008 用 Microsoft Silverlight Tools Beta 1

Silverlight Tools をインストールするときの注意です。このツールは、Silverlight の旧バージョンがインストールされていると、インストールできません。Visual Studio 2008 の、特定の KB がインストールされていてもダメなようです。これらがインストール時に検出されると、メッセージが出ます。該当しそうなものは、すべてアンインストールしましょう。ランタイムも、Silverlight Tools がインストールするので、アンインストールしてしまってかまいません。

次に、ドキュメントです。今のところ、英語しかありません。スタートメニューから [Microsoft Silverlight SDK 2.0]→[Welcome] を選択します。

まず、VS2008 Help への統合の仕方について。

Visual Studio 2008 を起動します。
[ヘルプ] メニューから、[目次] を選択して、Document Explorer を起動します。
[キーワード] タブに切り替えて、[検索する文字列] に、「コレクションマネージャ」と入力します。
- 「コレクションマネージャ」の下に「ヘルプ」があるので、この「ヘルプ」をクリックします。
- この項目がなく、「コレクションマネージャ [Visual Studio]」がある場合は、これをクリックして、本文中の「Visual Studio 連結ヘルプコレクションマネージャ」をクリックします。
下の方に、「VSCC に含めることのできるコレクション：」というところがあります。この中に、[Maicrosoft Silverlight 2 SDK Documentation] というチェックボックスがあります。このチェックボックスに、チェックします。
Document Explorer と、Visual Studio 2008 の両方を終了します。必ず両方を終了します。
Visual Studio 2008 を起動します。[ヘルプ] メニューから、Document Explorer を起動します。統合にしばらく時間がかかります。

次、HTML ヘルプの導入。（オプション）

Help の行にある、「Click here」をクリックします。HTML ヘルプが起動します。場合によっては CHM ファイルをダウンロードすることになります。
表示されたヘルプの中に、「You can get the offline documentation for Silverlight 2 Beta here.」とあります。この「here」をクリックして、ダウンロードセンターに行きます。
ダウンロードセンターから、ダウンロードします。
IE でダウンロードした場合、ファイルのプロパティを表示して、ブロックを解除しておきます。
ダウンロードした ZIP ファイルを解凍します。

Visual Studio 2008 の、[新しいプロジェクト] ダイアログで、Visual Basic や Visual C# に「Silverlight」ができているでしょうか。もし、出ていない場合は、ダイアログ右上の、フレームワークのバージョンを確認してみましょう。Silverlight は、「.NET Framework 3.5」で表示されます。はい、2.0 にしていて、表示されなくて焦った人です。

表示されていれば、silverlight アプリケーションを選んで作成します。新しいプロジェクトが作成できれば、インストール成功です。英語版の Silverlight Tools をインストールしていて、プロジェクトが作成されずに焦りました。

今日はここまで。