2010年06月

2010年06月30日

FxUG全国ツアーの発表内容詳解

 FxUGの全国ツアーは7月まで続くのだが、自分の登壇は6月19日(北陸)、26日(広島)だったので一応の終わり。(沖縄とか興味あるけどさすがに予算が…。大阪はふらふらっと行くかもしれない)

 北陸でも広島でもAIR2.0のセッションを担当したが、北陸三兄弟で各パートを担当したので"北陸では説明できたこと"、"広島では言えたこと"があり十分に伝えられていない部分があったと思う。

 というわけで、北陸、広島の総まとめ的な記事を書いておく。
 スライドは以下、北陸版よりAdobe HTTP Dynamic Streamingの紹介が増えている。
 
Adobe AIR Sample by ActionScript3_hiroshima




1.こまんどぷろんぷと



screen


 Windows付属のコマンドプロンプトはコピペし辛いよね。

 というちょっとした不便から作ってみたアプリケーション。
 利用しているAIR2.0のAPIはNativeProcessクラス。

 ただしAIR2.0でNativeProcessを使う場合はWindowsならexeにMacならdmgなどにパッケージしなければならず、いろいろなOSで動くというAIRの利点の一つを犠牲にしなければならないケースが多くなりそうなのでよく考えて利用しなければいけない。

 NativeProcessを利用する場合に使用するクラスは主にNativeProcessクラスと、NativeProcessStartupInfo

 NativeProcess.isSupported

 はNativeProcessが利用可能化の判定に用いることができる。
 .airファイルから実行した場合、設定ファイルにextendedDesktopがない場合などなどにこの値がfalseになる。

 NativeProcessのstart()メソッドにNativeProcessStartupInfoを渡すことで任意の実行プログラムを走らせることができる。

 NativeProcessStartupInfo

 NativeProcessの実行ファイル、コマンド引数などを設定できるクラスだ。

 最小限の実行コードは以下のようになる。

var info:NativeProcessStartupInfo = new NativeProcessStartupInfo();

var file:File = new File("C:/Windows/System32/PING.EXE");
var args:Vector.<String> = new Vector.<String>();

info.arguments = args;
info.executable = file;

var process:NativeProcess = new NativeProcess();
process.start(info);


 NativeProcessExitEvent.EXIT

 実行終了時に発行されるイベント。
 終了するまで他の処理を実行させない等に利用。

 ProgressEvent.STANDARD_OUTPUT_DATA

 実行したNativeProcessからの標準出力を得るイベント。
 上記画像のPingの結果などはここで取得している。

 ネイティブインストーラーでパッケージ化

 勉強会ではさらっと述べましたが、AIRアプリでNativeProcessを実行可能にするにはパッケージ化と、xml設定ファイルに設定追加が必要です。

 (参考)パッケージ化について

 設定ファイル({アプリ名}-app.xmlというプロジェクト作成時に生成される)への追記は以下、
 
<supportedProfiles>extendedDesktop</supportedProfiles>



2.えあーさーばー



screen002


 Adobe AIRで動作するWebサーバー(もどき)。

 AIR2.0からソケット待ち受け可能になり、TCPプロトコルでの通信も可能なためできるようになったアプリだ。

 AIR(サーバー)側で待ち受けするにはServerSocketクラスを利用するだけで良い。クライアント側はブラウザがやってくれるので実装の必要はない。

 サーバーとして待ち受けするには以下の数行で良い、

var socket:ServerSocket = new ServerSocket();
socket.bind(1988, "127.0.0.1"); // ローカルホストの1988ポートで待ち受ける場合
socket.listen(); // 待ち受け開始Timerのstart()と一緒でよく忘れる

socket.addEventListener(ServerSocketConnectEvent.CONNECT, this.connectEventHandler);


 サーバーからhttp://localhost:1988にアクセスすることでAIR側のServerSocketConnectEvent.CONNECTが発生する。

 ServerSocketConnectEvent.CONNECTで渡されるイベントクラスのsocketプロパティでクライアントの接続を表すSocketクラスを操作できる

private function connectEventHandler(event:ServerSocketConnectEvent):void
{
event.socket.addEventListener(ProgressEvent.SOCKET_DATA, this.socketDataEventHandler);
}


 複数のクライアントを処理したり、任意のタイミングで接続クライアントへの通信を行いたい場合はevent.socketを変数に格納しておくと良い。
 今回はその必要がないので、ProgressEvent.SOCKET_DATA(クライアントからデータが送られてきた際に発生するイベントハンドドラー)をセットして終了。

 データ受信時のコードは以下、

private function socketDataEventHandler(event:ProgressEvent):void
{
var client_socket:Socket = event.target as Socket;

this.log_text.text += client_socket.readUTFBytes(this._client_socket.bytesAvailable); // クライアントからの情報をテキストエリアに表示する


var head:String = "HTTP/1.0 200 OK\n" +
"Server:AdobeAIR\n" +
"Content-Type:text/html\n";
var ret:String = "\r\n";
var body:String = "<h1>I'm AIR Server!!</h1>";

client_socket.writeUTFBytes(head);
client_socket.writeUTFBytes(ret);
client_socket.writeUTFBytes(body);
client_socket.flush();

client_socket.close();
}


 クライアントソケットの操作の参考になれば光栄です。
 最初に(もどき)と書いたのは、このアプリがどんなURLにアクセスしようが静的にデータを返すだけだからです。

sceen003


3.AIR meets Silverlight



 実はここまで話すとこのサンプルの説明はほぼ終わっていて、NativeProcessクラスでOutOfBrowserとしてインストールしたSilverlightアプリを起動、ServerSocketでソケット接続して通信するというのがその仕組みです。

 Silverlight側のコードは後程紹介予定。


4.Adobe HTTP Dynamic Streaming



 勉強会では簡単な紹介だけですませましたが、詳細は自分のブログの記事を読んでいただければと思います。

 Adobe HTTP Dynamic Streamingを使ってみる
 Adobe HTTP Dynamic Streamingを使ってみる(その2):Linux編

 

全国ツアーはまだまだ続くよ



 FxUG全国ツアーは7月末まで続きます。
 技術的な発見と、優れた(変態?)技術者との出会いがあるFxUG全国ツアーにぜひご参加ください!!



(追記)スライドのエフェクトについてTwitter上で質問がいくつかありましたがPowerPoint2010でデフォルトで使えるものです。

2010年06月23日

FxUG全国ツアーin北陸終了しました!!

 毎週のように全国のどこかで行われているFxUG全国ツアーの北陸編が無事(?)終了しました。

 今回驚いたのが北陸の第一回では数人しかいなかったFlex利用者が、今回の参加者40人の半数程がFlex利用経験ありと挙手したこと。
 ちょっとだけFxUG勉強会の効果があったといってもひいき目ではないのではないでしょうか!!

 セッションは、Adobe枠として県外の経験豊かなスピーカーが、そして北陸からは現場でFlexを使っている方が登壇したのですが、北陸の現場ではまだまだFlashBuilder4の変化に戸惑っている状態という感じがしました。
 今後の北陸でのFxUG勉強会の課題ですね。

 私はAIR2.0の紹介の一コマを担当したのですが、AIR2.0は-当然ですが-Windows上での.NETアプリ、Mac上でのObject-Cアプリのパフォーマンスにはかなわないが、Web開発者がデスクトップアプリをActionScriptの知識を利用して開発できる協力な橋頭堡だと感じました。

 逆が.NET開発者にとってのSilverlightなんじゃないかなとも思う。

 自分のセッションのスライドはこちら
 PoworPoint2010版
 PDF版

 参加者の皆様、会場を提供してくださいました石川工業高等専門学校の越野先生、そしてFxUG主催メンバーのみなさま本当にありがとうございましたー!!
 

coelacanth_blog at 00:59勉強会FlexBuilder この記事をクリップ!

Adobe HTTP Dynamic Streamingを使ってみる(その2):Linux編

 前回に引き続いてAdobeが公開したHTTPストリーミングであるAdobe HTTP Dynamic Streamingについて。

 前回はWindows環境での動作確認だったので今回はLinuxにインストールしてみる。

 利用OSはCentOS 5.5(32bit)、Apacheのバージョンは2.2.3

 とはいえ、実際の処理はWindows版とほとんど同様で、Packageされた動画はWindows上で実行したものがLinuxでも利用可能。

 まずはAdobeのHTTP Dynamic StreamingページよりLinux版のHTTP Dynamic Streaming用のHTTP OriginモジュールをDLする。

 (DLにはAdobeIDの登録が必要)

 解凍してできたファイルをApacheのmodulesディレクトリに配置する。

(自分の場合 /etc/httpd/modules)

 続いてhttpd.confにWindowsの時と同様に設定を記載、
  

LoadModule f4fhttp_module modules/mod_f4fhttp.so

<Location /~mac/vod>
HttpStreamingEnabled true
HttpStreamingContentPath "/home/mac/public_html/vod"
</Location>


 LocationやHttpStreamingContentPathは自分の環境の設定に合わせて書き換えてください。

 ここまで設定を行い、パッケージングされた動画ファイルを設置すればLinux上で再生できるはずだ。

 再生はOpenSourceMediaFrameworkを利用すると簡単に動画を確認できる。

余談



 HTTPを利用したストリーミングにはSilverlight+IISで実現できるSmoothStreamingがあるがApacheに簡単に組み込めるのはやはり便利だ。

 ちなみにHTTPの80番ポートを使うメリットは、基本的に解放されているポートなので環境によって見れないということが少ないことと、キャッシュを利用したり負荷分散がやりやすい点だ。

 一度動画を再生した後に同じ動画を再生するとサーバーからの返答で304 Not Modifiedが返され、実際のデータのやりとりは行われずキャッシュが利用されていることが見て取れると思う。

 (そのせいでパケット眺めながら、動画データ流れてないんじゃね??? としばらく混乱したのは内緒だ)

 ちなみに動画は1514bytesのパケットの塊として連続でやり取りされている(この点もSmoothStreamingに似ている)

 次はOpenSourceMediaFrameworkのサンプルプレイヤーではなく、OSMFを組み込んだ自作プレイヤーで再生してみようと思う。

 

 

2010年06月20日

Adobe HTTP Dynamic Streamingを使ってみる

 FMSのDynamicStreamingについては過去に何回か言及したが、FMSを使わずにHTTPでストリーミングするプラグインをAdobeが提供したので紹介する。

 記事:アドビ、「HTTP Dynamic Streaming」の提供を開始

 日本語のサイトは公開されたばかりのようだが、とりあえずパッケージング用のプラグインとApache2.2モジュールはそこからたどれる。

 ただしダウンロードしたファイルには使い方が記されていないので、その辺の情報は英語サイトを参照。

 以下はDLしたファイルから再生してみるまでの紹介。
 OSはWindows7(64bit)、Apacheのバージョンは2.2.14(XAMPP使用)

1.既存の動画をHTTP Dynamic Streaming用にパッケージする



 DLしてきたadobe_f4fpackager100_windows_x86.zipを解凍すると

adobe\f4fpackager\f4fpackager.exe

 という実行ファイルがある。

 こいつにFlash Media Encoderなど(探せばフリーのエンコードソフトもあったはず)でエンコードしたf4v形式の動画をファイルを渡してあげればよいわけだ。
 コマンドラインから、

f4fpackager.exe --input-file=test.f4v --output-path=/test


 これでtestディレクトリ以下に再生に必要なファイルが生成される。
 拡張子.f4mがマニフェストファイル(動画の情報が書かれたファイル)、f4fが動画データ。もう一つf4xというファイルも生成されていたが、これは用途不明。

2.Apacheモジュールを組み込む



 次はApacheで上記エンコードされたファイルを扱えるようにしよう。
 AdobeサイトよりDLしてきたadobe_f4f_apache_module100_windows_x86.zipの中身のdllとsoをApacheのモジュールディレクトリに配置する。

 自分の場合(というより最近のXAMPPの場合)C:\xampp\apache\modulesに設置した。

 続いて設置したファイルを読み込むようにApacheの設定ファイル(httpd.conf)に以下を追記する。

LoadModule f4fhttp_module modules/mod_f4fhttp.so
<Location /vod>
HttpStreamingEnabled true
HttpStreamingContentPath "C:\xampp\htdocs\vod"
</Location>


 LocationやHttpStreamingContentPathの値は自分の環境の設定にあわせる必要がある。

 ここまで設定したらApache再起動。

3.再生



 動画の再生はとりあえずOpenSourceMediaFrameworkのサンプルを利用してさくっと再生する。

 DLサンプルプレイヤー

 OSMFPlayer.htmlを開きプレイヤー部分の取出しマークをクリックすると任意のURLを入力できるので、そこで自分が設置したファイルへのパスを入力する。

 自分の場合、localhostで起動したApacheのドキュメントルート(c:\xampp\htdocs)以下のvodディレクトリにtest.f4mファイルを設置したのでURLは

 http;//localhost/vod/test.f4m

 となった。

screen


 

2010年06月16日

FxUG全国ツアーin北陸は今週土曜日(19日)開催です

 FlashBuilder4FlashPlayer10.1、そして先ほど公開されたAIR2.0、Flash界隈は新技術のリリースラッシュです。

 このタイミングで全国ツアーとしてFlex、そしてFlash、AIRの話ができる機会を持てることが非常に楽しみでしょうがありません。

 北陸でも石川県で今週末に石川工業高等専門学校さんを会場に勉強会が開催されます。

 Flashに興味があるプログラマー、プログラマー向けのFlash開発ツールFlexに興味があるデザイナー、それからAIR2について話をしたい人。
 この際なのでみんな集まってAdobe製品の話をしましょう!!

 参加申し込みはこちら

 ちなみに懇親会の申し込みはATNDの下COMMENTページで受け付けております。
 今回の懇親会会場は当日の人数変更が難しそうなので早めの受付をお願いします。

 それでは石川工業高等専門学校でお会いしましょうー。

2010年06月14日

Silverlight:Silverlight4のSDK(日本語版)が出たようです

 いつのまに!!
 何か勘違いして6月15日だと思い込んでましたがすでに利用可能なようです。

 これでSilverlight4開発だけ英語版のVisualStudioと使い分ける必要がなくなりましたね。

 DLは以下  

 Silverlight開発ツール

2010年06月09日

Silverlight:Accordionコントロールを利用する(その1)

 こんばんわ、筆箱探しに本屋に行ったら、なぜか小脇に「標準テキストWindows Server 2008 R2」という分厚い書籍を抱えて帰宅の途についていた新米プログラマーです。

 久々にSilverlightToolkitのページに行ったら、最新バージョンはSilverlight4のみ対応という状態になっておりちょっと驚き。
 Silverlight3版も「Download」ページの右ナビの November 2009以前のものをダウンロードできますのでご心配なく。

 SilverlightToolkitというのは、VisualStudioでSilverlight開発する際に利用できるコントロールを追加できるライブラリのようなものです(ExpressionBlendにもちゃんと追加されてました)。

 今回はその中からAccordionコントロールを利用する方法を紹介しようと思います。

ともあれインストール



 まずは上記リンクから開発するSilverlightのバージョンにあったToolkitをダウンロード、インストールします。

 インストールが無事終了したなら、VisualStudioを起動→Silverlightプロジェクトを作成、ツールボックスを開いてみましょう。

 screen


 新しいコレクションがいろいろ追加されていると思います。

 余談ですが末尾にThemeとつくコントロールが変わっていて、単体でどうというより、その中に入れ子にしたボタンなどのパーツがテーマに沿ったスタイルになり全体のテーマが適応されるという、簡単にそれっぽいサンプルを作成するのにもってこいのコントロールです。

xamlでAccordionを配置



 ツールボックスからAccordionをドラックしてステージに配置します。
 xamlでAccordionを定義する簡単なサンプルは以下のようになります。

 xamlコード
 
 実行する

C#で動的にメニューを追加



 続いて、動的にAccordionのメニューを追加してみる。
 基本的にはxamlでやったことをC#コードで書く感覚でOK。

AccordionItem item = new AccordionItem();
item.Header = "書籍紹介";

StackPanel panel = new StackPanel();
panel.Children.Add(new TextBlock() { Text = "Silverlight2テクノロジ入門" });
panel.Children.Add(new TextBlock() { Text = "エッセンシャルSilverlight3" });
panel.Children.Add(new TextBlock() { Text = "Silverlightリファレンスブック基礎編" });

item.Content = panel ;

this.accordion1.Items.Add(item);


 実行結果

 次回以降はHTTPリクエストでデータを取ってきて動的にAccordionのデータを変更したり、スタイルをいじったりする予定です。



2010年06月08日

Silverlight:自作コントロールを利用する(未解決編)

 Silverlightで自作のコントロールを作成して別プロジェクトで利用する方法を調べてみた。
 ただしまだわからない点もあるので参考程度で。

Blendでボタンを作成する



 作業としては「デザイナーさんがExpressionBlendでボタンをデザインしてシステムがVisualStduioでそれを利用する」
という幻想的なシチュエーションを想定している(Blendってデザインさん向けツールとしてみると微妙ですよね…)ので、まずはExpressionBlendでボタンを用意する。

 まずはプロジェクトの作成。
 プロジェクトは「Silverlight ControllLibrary」を作成する。

 このプロジェクトはビルド後にxapではなくdllが生成されるので、それを参照に追加することで別プロジェクトで利用する(詳細は後述)。

 (BlendはExpressionBlend4Beta(Eng)を利用)

 screen


Canvasをボタンに変更する



 まずはTextBlockを内包したCanvasを用意する。
 TextBlockは必須ではないがButtonに変更したときにContentPresenterに変換されるので都合がよい。

 サンプルとして以下のようなxamlを用意する。

<Canvas HorizontalAlignment="Left" Height="77" Margin="146,132,0,0" VerticalAlignment="Top" Width="148">
  <TextBlock Height="36" Canvas.Left="8" TextWrapping="Wrap" Text="TextBlock" Canvas.Top="17" Width="123"/>
</Canvas>

 Canvasを選択した状態で「Tools」→「Make Into Controll」を選択。

screen2


 コントロールはButtonを選択。
 生成されたxamlを見ると、StaticResourceとして変換前の構造が利用されていることがわかると思う。ちなみにTextBlockは前述のとおり、ContentPresenterに変換されている。

(ContentPresenterに変換した場合文字色をStoryBoardでアニメーションさせる方法がわからなかった。ボタンに変換された時点で文字色の設定はSetter Propertyで定義していた)

 後はボタンをVisualStudioで読み込んだ場合にわかるように背景等を設定しておく。

 screen3


ビルドする



 「Project」→「Build Project」でプロジェクトをビルドする。
 ライブラリなのでデバック実行できないのが不便な所。

 デフォルトの設定のままビルドすると、

{Project DIr}/Bin/Debug


 に.dllファイルが生成されていると思う。
 次はVisualStudioからこのdllを利用してみる。

 
 

dllを利用する



 次はVisualStudioを起動してSilverlight用のプロジェクトを作成する。
 
 (こちらはVisualStudio2010(JPN)の体験版を利用)

 「参照設定」→「参照の追加」で先ほど生成したdllを追加する。

 screen4


 ExpressionBlend側のプロジェクト名が「SampleButton」だったので自分の場合、参照にはSampleButtonが追加された。

 続いてxaml側で利用を宣言する

xmlns:sample="clr-namespace:SampleButton;assembly=SampleButton"


 これでsampleという名前空間を利用してxaml上でボタンを利用できるようになる。





 利用する場合はxamlのタグの頭にsampleをつける。

 サンプルを実行する。

 これでBlendで作成したボタンを利用できたのだが、実はsample:ButtonControllのButtonControllはButtonクラスではなくUserControllなのだ。

 UserControllの子要素としてButtonがあるのでButtonを操作することは可能だが、トップレベルにおけないのが残念。xamlを使った場合にButtonを一番親にする方法がわからなかった(csファイルのみの場合Buttonにすることはできた)のがその理由だ。

 まだまだBlendやxamlは理解してないなぁ。。。

2010年06月04日

Silverlight:TreeViewの構成がよくわかる記事(英語)の解説

 Silverlightでデータバインディングの記事を書いていた時に「TreeViewの使い方がよくわからないなぁ」と感じたので調べてみた。
 英語のサイトでわかりやすいものがあったので咀嚼の意味も込めて解析してみた。

 Styling a TreeView in Silverlight 3 and Blend 3

 
 screen


 というタイトルがあらわす通り、Blend3での記事だがなるべくコードで表すとどうなるかも含めて紹介していく。

 

1.プロジェクトを作成する



 まずはプロジェクトを作成する。
 ここでは「TreeView」というプロジェクトを作成したが名前は任意だ。

 screen2



 

2.TreeViewコントロールを配置する



 続いて、LayoutRootにTreeViewを配置する。
 
 下の写真のように左上タブのAssets→Controls→TreeViewをドラック&ドロップしてもいいし、左端のアイコンメニューの「》」からコントロール一覧を開いて追加することもできる。

 screen3


 続いてサイトの記事に従うなら各Marginを0に、WidthとHeightをAuto、HorizontalAlignmentとVerticalAlignmentをストレッチに指定する。(これは表示するのに適当な幅があれば良い)

screen4


 

3.SampleDataを用意する



 続いて表示を確かめるためのサンプルのデータを当てはめてみる。
 Blend3にはサンプルデータを生成する機能がある(へぇ、便利)ようなのでそれを利用する。

(デザイン向けのツールなのでモックをコーディングで作るのは難しいからフォローということだろうか? プログラマーもこんな簡単にモックを作れるならうれしいのでVisualStudioにもつけてもらえないかな。)

 screen5


 次は画面右の上部タブからData、タブの右下にあるプルダウンボタンをクリック(ちょっとわりにく、同じようなアイコンのマウスオーバーするとCreate Sample Dataとポップアップする方だ)、「New Sample Data...」をクリック、その後のポップアップ(下画像)はそのままでOKをクリックする。

 screen6


 すると以下のようなサンプルデータソースが生成される。

 下記画像のCollectionがデータの集合、Property1、Property2は個々のデータの値だ。

 screen7


 メニューの右側の下向き三角をクリックすると新しいコレクションの追加、プロパティの追加が行えるので以下のように入れ子状態のプロパティを設定する。

RootLevelCollection

  • NameProperty Simple Property of String (Format: Name)
  • NumberProperty Simple Property of Number
  • FirstLevelCollection Collection Property

FirstLevelCollection

  • CompanyProperty Simple Property of String(Format: Company Name)
  • NumberProperty Simple Property of Number
  • UrlProperty Simple Property of String(Format: Website Url)
  • SecondLevelCollection Collection Property

SecondLevelCollection

  • ImageProperty Simple Property of Image
  • NameProperty Simple Property of String(Format: Name)
  • PhoneProperty Simple Property of String(Format: Phone number)


 ここまで操作すると下記画像のように、SampleDataディレクトリが生成されている。
 SampleDataSource.xamlファイルを開いてみるとモック用のダミーデータが生成されていることがわかる。(素晴らしい!!)

screen8


 

4.SampleDataをTreeViewに設定する



 さぁ、データはできた。
 次はこれをTreeViewにセットしてみましょう(プログラミングコード的にいうとItemSourceにバインドしよう!!)。

 ExpressionBlendでのやり方は右ナビのRootLevelCollectionをドラックして中央のGUIにドロップするだけだ。
 結果は下記画像のようになる。


screen9
(クリックで拡大)


XAMLコードは以下のようになっている。

<UserControl.Resources>
<common:HierarchicalDataTemplate x:Key="RootLevelCollectionItemTemplate" ItemsSource="{Binding FirstLevelCollection}">
<StackPanel>
<TextBlock Text="{Binding NameProperty}"/>
<TextBlock Text="{Binding NumberProperty}"/>
</StackPanel>
</common:HierarchicalDataTemplate>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<controls:TreeView Margin="0" DataContext="{Binding}" ItemTemplate="{StaticResource RootLevelCollectionItemTemplate}" ItemsSource="{Binding RootLevelCollection}"/>
</Grid>


 この時点でプロジェクトを実行してみると、階層構造が正確には反映されていないことがわかると思う。
 次はデータ構造を定義して、バインドしたデータを意図通りに表示できるように修正する。

 

5.データの構造を定義する



 上部メニューの「File」→「New Item」をクリック、ポップアップしたウィンドウでResource Dictionaryを選択OKを押す。

screen11


 続いて右ナビのResourceタブから、TreeViewにリソースディクショナリーファイルを関連付ける。
 (ただしファイルはまだ未記述なので現時点ではなにも変化はない)

 screen12


 この後はBlendというよりコードをコピペするような形になるので一気に完成系を紹介する。英語サイトだとItemTemplateを定義する部分が省略気味なので戸惑ってしまった。

 TreeViewのような階層構造を表すにはHierarchicalDataTemplateを使う。
 
 x:Key="RootLevel"(一番上の階層)のItemTemplateがLevel1、x:key="Level1"のItemTemplateがLevel2になっているのがポイントで、これが階層構造を定義する部分だ。

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"
>
<common:HierarchicalDataTemplate x:Key="Level2">
<StackPanel Orientation="Horizontal">
<TextBlock Margin="5,0,3,0"
FontStyle="Italic"
Text="{Binding Path=NameProperty}" />
<TextBlock Margin="3,0,3,0"
Text="{Binding Path=PhoneProperty}" />
<Image Margin="3,0,5,0"
Height="25" Width="25"
Source="{Binding Path=ImageProperty}"/>
</StackPanel>
</common:HierarchicalDataTemplate>

<common:HierarchicalDataTemplate x:Key="Level1"
ItemsSource="{Binding Path=SecondLevelCollection}"
ItemTemplate="{StaticResource Level2}"
>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="5,0,3,0"
Text="{Binding Path=NumberProperty}" />
<TextBlock Margin="3,0,3,0"
Text="{Binding Path=CompanyProperty}" />
<TextBlock Margin="3,0,5,0"
Text="{Binding Path=UrlProperty}" />
</StackPanel>
</common:HierarchicalDataTemplate>
<common:HierarchicalDataTemplate x:Key="RootLevel"
ItemsSource="{Binding Path=FirstLevelCollection}"
ItemTemplate="{StaticResource Level1}"
>
<StackPanel Orientation="Horizontal">
<TextBlock Margin="5,0,3,0"
Text="{Binding Path=NumberProperty}"

FontWeight="Bold" FontSize="12" />
<TextBlock Margin="3,0,5,0"
Text="{Binding Path=NameProperty}" />
</StackPanel>
</common:HierarchicalDataTemplate>
</ResourceDictionary>


 

6.スタイルを変更する



 テンプレートを用いて構造を定義した。次はスタイルを変更して見た目を定義する。

 
 screen13
(クリックで拡大)



 TreeViewの左側の三角の部分はExpanderButtonを変更することで、各項目はItemsHostで変更できる。
 (詳細はMSDNページ参照)

 screen14


 

7.最後に



 ソースコード全体は紹介元のサイトの下部、

 The code for the tutorial can be downloaded here.

 のhereの部分で確認できる。

Profile

シーラカンス

Recent Comments
QRコード
QRコード
livedoor Readerに登録
RSS
livedoor Blog(ブログ)